В CSS расстояние между строками задать очень просто. Для этого есть специальное свойство. Но, разумеется, есть и много других параметров, которые универсальны, и их можно применить к тексту.
Если никаких настроек не делать, то выставляются значения по умолчанию. При желании вы можете изменить это расстояние. Значение может быть как в процентном соотношении, так и в пикселях.
Высота строк
В CSS расстояние между строками можно продемонстрировать следующим рисунком.
На изображении выше указаны параметры с соответствующими расстояниями. Текст располагается в пространстве font-size. Обратите внимание, что линия текста начинается не на основании, а немного выше. Пространство ниже предусмотрено для букв, у которых есть элементы снизу (g, у и так далее).
Обратите внимание, что пространство между блоками font-size называется leading. В HTML и CSS это свойство никак не фигурирует, но оно есть в других графических и текстовых редакторах. Например, в Adobe Photoshop.
На рисунке выше указано, где в "Фотошопе" можно указать leading. А рядом указывается параметр font-size.
Примеры использования line-height
В CSS расстояние между строками можно задать процентами. Наглядный пример приведен ниже.
В случае маленького значения пользователю вашего сайта читать будет неудобно.
Расстояние можно менять и размером шрифта. Если разница между основными параметрами будет в цифрах сильно отличаться, то эта разница компенсируется увеличением leading.
Тонкости оформления
В CSS расстояние между строками можно дополнительно настраивать различными отступами. Рассмотрим пример на рисунке.
В поле "Элемент" в нашем случае будет текст. Padding - это отступ внутри объекта, а margin - отступ за объектом. Border - это рамка. Она может быть 0 пикселей, а может быть и 100.
На следующем изображении показаны сразу все отступы, рамка и высота линии текста.
Если у вас текст небольшой, всего в одну строку, или каждая строка в отдельном абзаце, то расстояние можно настраивать отступами между этими абзацами. То есть maring и padding между строчками в одном элементе не оказывают никакого влияния. Они создают отступы только по краям объекта. Объект - это весь абзац, а не строчки в нем. Здесь важно не запутаться.
В случаях, когда много строк, и всё это расположено в одном объекте, шрифт рекомендуется менять основными параметрами.
Как увеличить расстояние между строками CSS
Расстояние между строками HTML можно прописывать к какому-нибудь классу или для всех абзацев в тексте. Если вы укажете вот так: p { line-height:20px; }, - то абсолютно все абзацы на странице будут со строками размером 20 пикселей. Если нужно в разных местах различные размеры, то рекомендуется делать следующим образом.
Прописываем стили.
Class1 { line-height:20px; }
Class2 { line-height:16px; }
Class3 { line-height:12px; }
Для наглядности добавим рамку, чтобы вы увидели, что это работает. В дальнейшем ее нужно убрать.
Обратите внимание, что в третьем случае полоса наехала на текст. Всё из-за того, что больше, чем высота линии. Поэтому важно следить, чтобы таких противоречий не было. Если вы делаете маленькую высоту линии, то соответственно уменьшайте шрифт.
Не рекомендуется делать слишком маленький текст и маленькое расстояние между строками. Поскольку ни один пользователь не сможет спокойно всё это прочитать. У него быстро устанут глаза. Поисковые системы так же говорят, чтобы текст был удобным для пользователя.
Более того, в последнее время идет большой упор на удобство для мобильных пользователей. Там в рекомендациях всегда говорится, что размер шрифта должен быть нормальным, а не маленьким. Особенно сильно это влияет на ссылки. При их маленьком размере пользователю будет сложно использовать навигацию по сайту.
У поисковика "Гугл" есть специальный инструмент, который помогает в этом анализе. Он очень удобен для веб-мастеров.
Вот пример результатов, которые могут быть.
Установка
межстрочного расстояния для горизонтального текста
Межстрочное
расстояние (интерлиньяж) -это расстояние между текущей строчкой текста и строчкой,
расположенной над ней. У каждого символа может быть свое собственное межстрочное
расстояние; наибольшее значение будет определять межстрочное расстояние для
данной строки.
Рис. 17.19.
Увеличенное межзнаковое расстояние в заголовке
Рис. 17.20.
Выбор межстрочного интервала
Рис. 17.21.
Абзацы с одинаковым кеглем, но разными межстрочными интервалами
Совет
Межстрочный интервал по умолчанию рассчитывается пропорционально кеглю. Их отношение указывается в диалоговом окне Justification (Выравнивание), которое открывается с помощью меню палитры Paragraph (Абзац). По умолчанию величина интервала составляет 120% от кегля. Например, межстрочное расстояние для кегля в 30 точек по умолчанию равно 36.
Совет
Для установки межсимвольного расстояния в тексте, который расположен по вертикали, выделите нужные символы и измените значение трекинга в палитре Character (Шрифт). Вы увидите, что текст после этого преобразится.
Поэтому, если
установить разные значения межстрочного расстояния для строк абзаца и потом
редактировать текст, изменяя его распределение по строкам, межстрочное расстояние
может поменяться.
Нельзя с уверенностью
сказать, что создаваемый вами текст будет примечательным во всех отношениях,
но использование оптимальных расстояний между строчками существенно облегчит
его чтение, даже если он займет много места на странице. Не утомляйте читателя
прежде, чем он прочитает все ваши умные мысли.
Совет
Сказанное выше о форматировании текста относится только к программе Photoshop. Если вы используете другие приложения, возможно, порядок действий при выборе шрифта будет иным. При создании текстов для сети Internet лучше обратиться к программе, предназначенной для Web-дизайна.
-
В палитре Layers (Слои)
выберите нужный слой.
-
По желанию.
Выделите
одну или несколько строк, в которых будете менять межстрочный интервал. Если
текст был введен в построчном режиме, то необходимо выделить всю строку. Если
не выделять строки, то изменения произойдут во всем тексте.
- Выберите или введите значение межстрочного интервала в палитре Character (Шрифт) - см. рис. 17.20, 17.21.
- В палитре Layers (Слои) выберите текстовый слой.
- По желанию. С помощью инструмента Туре выделите тот фрагмент текста, который следует изменить. Иначе трекинг будет применен ко всему тексту.
- Щелкните по кнопке Palettes (Палитры), чтобы открыть палитру Character (Шрифт), если она еще не открыта.
- Выберите одно из значений трекинга во всплывающем меню Tracking (Tpeкинг) либо введите любое свое значение (рис. 17.19). Воспользуйтесь отрицательным значением, чтобы сблизить символы, и положительным - чтобы увеличить зазор между ними.
Рис. 17.19. Увеличенное межзнаковое расстояние в заголовке
Нажав
клавишу Alt
при активном инструменте Move
(Перемещение) и нажимая
клавиши со стрелками «вправо»/«влево», можно скопировать
весь текстовый блок.
Для
того чтобы текст в сети был читабельным, не следует размещать символы слишком
близко друг к другу.
Установка межстрочного расстояния для горизонтального текста
Межстрочное расстояние (интерлиньяж) -это расстояние между текущей строчкой текста и строчкой, расположенной над ней. У каждого символа может быть свое собственное межстрочное расстояние; наибольшее значение будет определять межстрочное расстояние для данной строки.
Межстрочный
интервал по умолчанию рассчитывается пропорционально кеглю. Их отношение указывается
в диалоговом окне Justification
(Выравнивание), которое открывается с
помощью меню палитры Paragraph
(Абзац). По умолчанию величина интервала
составляет 120% от кегля. Например, межстрочное расстояние для кегля в 30 точек
по умолчанию равно 36.
Для
установки межсимвольного расстояния в тексте, который расположен по вертикали,
выделите нужные символы и измените значение трекинга в палитре Character
(Шрифт). Вы увидите, что текст после этого преобразится.
Поэтому, если установить разные значения межстрочного расстояния для строк абзаца и потом редактировать текст, изменяя его распределение по строкам, межстрочное расстояние может поменяться.
Нельзя с уверенностью сказать, что создаваемый вами текст будет примечательным во всех отношениях, но использование оптимальных расстояний между строчками существенно облегчит его чтение, даже если он займет много места на странице. Не утомляйте читателя прежде, чем он прочитает все ваши умные мысли.
Сказанное
выше о форматировании текста относится только к Фотошопу. Если вы
используете другие приложения, возможно, порядок действий при выборе шрифта
будет иным. При создании текстов для сети Internet лучше обратиться к программе,
предназначенной для Web-дизайна.
- В палитре Layers (Слои) выберите нужный слой.
- По желанию. Выделите одну или несколько строк, в которых будете менять межстрочный интервал. Если текст был введен в построчном режиме, то необходимо выделить всю строку. Если не выделять строки, то изменения произойдут во всем тексте.
- Выберите или введите значение межстрочного интервала в палитре Character (Шрифт) - см. рис. 17.20, 17.21.
Рис. 17.20. Выбор межстрочного интервала
Рис. 17.21. Абзацы с одинаковым кеглем, но разными межстрочными интервалами
Смещение выделенных символов относительно базовой линии
- На палитре Layers (Слои) выберите нужный слой.
- По желанию. С помощью инструмента Туре (Текст) выделите те символы, которые следует сместить. Иначе изменят положение все символы слоя.
- Откройте палитру Character (Шрифт).
- Введите значение в поле смещения относительно базовой линии (рис. 17.22) -положительное, если хотите, чтобы буквы были расположены выше базовой линии; и отрицательное - в противном случае (рис. 17.23). Если вы не выполняли шаг 2, нажмите клавишу Enter.
Рис. 17.22. Поле смещения относительно базовой линии
Рис. 17.23. Положение текста при вводе положительного, нулевого и отрицательного значения смещения относительно базовой линии
Офисный пакет от Microsoft широко распространен, а его формат DOC практически стал стандартом оформления текстовых документов. К сожалению, большинство пользователей заканчивает свое знакомство с этим текстовым процессором научившись менять гарнитуру шрифтов и освоив его выравнивание на странице.
Между тем, во многих организациях существуют правила работы с текстовыми документами, которыми предписываются определенные параметры их оформления. Обычно они определяют тип шрифта , используемого по умолчанию и необходимый межстрочный интервал в документе.
Изменение межсимвольного расстояния , называемое еще кернингом , требуется в основном для придания форматируемому тексту более гармоничного и эстетически законченного вида. Основная область его применения – типографика , или художественная верстка .
Как изменить и настроить межстрочный интервал
Для изменения межстрочного интервала в Word предусмотрено несколько способов :
Последний пункт вызывается по нажатию правой кнопки мыши и позволяет регулировать межстрочные расстояния вручную в широком диапазоне величин.
Значения межстрочного интервала
Межстрочный интервал представляет собой расстояние
между гипотетическими линиями, проходящими через середину букв в строчках и по умолчанию равен размеру шрифта. Стандартные размеры
, доступные в Word, составляют 1, 1,15, 1,5, 2 и 3 значения этого расстояния.
Выпадающий список, в пункте «Абзац », позволяет применять в тексте варианты межстрочного интервала отличные от указанных. Кроме стандартного набора из одинарного, полуторного и двойного здесь можно найти еще следующие:
Изменяем межбуквенный интервал
Каждому символу, в любом шрифте, выделяется определенное пространство, но, в зависимости от начертания, буквы могут заполнять его по-разному. Для точной регулировки занимаемого ими пространства и используют кернинг
. В Word он может задаваться в трех различных вариантах. Кроме стандартного, доступен разреженный
и уплотненный
.
Регулировка осуществляется с шагом в 0,1 пункта. Доступ к этому параметру можно осуществить двумя способами:
Для придания тексту эстетически законченного вида, иногда требуется применить визуальное разделение между абзацами. Нажатие на клавишу Enter
, используемое обычно для этой операции, не дает такого эффекта, поскольку просто переводит курсор на следующую строку. Войти в меню редактирования
можно двумя способами:
- Используя контекстное меню «Абзац » вызываемое по нажатию правой копки мышки;
- Используя группу команд «Абзац » на вкладке «Главная » Word.
В обоих случаях открывается дополнительное окно, в котором используя сектор «Интервал » можно задать отступ перед и после абзаца. Регулировка, независимо от выбранной гарнитуры шрифта, выполняется с фиксированным шагом в 6 пунктов.
Эти четыре опции имеются панели параметров и дублируются на панели символов. Не имеет значения, на какой из панелей Вы измените эти опции, значения будут продублированы:
Метод сглаживания (Anti-aliasing) для букв
Сглаживание букв (Anti-aliasing) - технология, применяемая для улучшения визуализации букв текста с целью сгладить резкие края и убрать "зубцы", возникающие на краях букв.
Эта опция также дублирована на двух панелях:
На данный момент в Photoshop существуют семь методов сглаживания текста, включая режим "без сглаживания" (none), на рисунке я привёл русскоязычный и англоязычный интерфейсы Photoshop:
Каждый из методов сглаживания производит собственный эффект на буквы, и к каждому отдельному случаю метод надо подбирать опытным путём, но это в идеале, а на практике в основном я пользуюсь методом сглаживания, установленным в Photoshop по умолчанию - "Резкое" (Sharp).
На рисунке я привёл пример двух видов сглаживания текста Photoshop:
Межстрочный интервал (интерлиньяж, Leading)
Этот параметр текста доступен только из панели Символ, как понятно из названия, он задаёт вертикально расстояние между строк. По умолчанию параметр установлен на "Авто":
В основном, использование Межстрочного интервала в значение Auto даёт неплохие результаты, но вы можете задать Межстрочный интервал самостоятельно перед вводом текста, либо после ввода, выделив весь текст. Вы можете выбрать одно из предустановленных значений (от 6 pt до 72 pt), либо ввести собственное одним из фотошоповских методов ввода параметров, т.е. изменение перетаскиванием мыши или прокруткой колёсика или вводом значения в окно с клавиатуры.
Трекинг (Межбуквенный интервал, Tracking)
Параметр "Трекинг" также доступен только из панели Character, он управляет расстоянием межу буквами или символами. Он расположен непосредственно под Межстрочным интервалом и по умолчанию установлен в 0:
Чтобы настроить значение межбуквенного интервала , вы можете нажать на треугольник справа от поля ввода и выбрать из списка заданных значений, можно ввести значение с клавиатуры, или изменить параметр с помощью перетаскивания курсора или вращения колёсика мыши. Введённое отрицательное значение Трекинга будет сдвигать буквы или символы ближе друг к другу, в то время как положительное значение будет отодвигать их друг от друга.
Чтобы изменить Трекинг, следует выделить нужный участок текста и ввести значение в поле ввода. На примере я увеличил трекинг в слове "участок" , не затрагивая остальной текст:
Кернинг (Kerning)
Этот параметр также доступен только из панели Символ и расположен слева от Трекинга . По умолчанию он установлен на значение "Метрический" (Metrics), что это значит, я объясню немного ниже. Кернинг регулирует промежуток между двумя конкретными буквами или символами:
Кернинг часто путают с Трекингом , потому что они кажутся похожими, но они на самом деле это совершенно разные вещи. В то время как Трекинг задаёт диапазон между всеми символами , Кернинг регулирует расстояние между двумя конкретными символами . Можно провести аналогию, если Трекинг - глобальная настройка, то Кернинг - "местная".
Для того, чтобы опция стала доступной, следует установить курсор в тексте между двумя нужными буквами. На примере я задал отрицательное значение Кернинга :
Как я уже говорил, по умолчанию опция Кернинг установлен на "Метрический", что означает, что Photoshop использует межбуквенное расстояние, заданное дизайном шрифта. Это часто вариант в большинстве случаев даёт лучшие результаты, хотя и зависит от свойств используемого шрифта. Если вы нажмете на маленький треугольник справа от поля ввода значения Кернинга , вы увидите, что непосредственно под значением "Метрический" находится значение "Оптический" (Optical). При этом варианте Photoshop самостоятельно устанавливает межбуквенный интервал, основываясь на форме букв. Опять таки, зависит от самого шрифта, какой из этих двух вариантов, "Метрический" или "Оптический", даст лучший результат.
Изменить значение Кернинга можно, как и в других опциях, с клавиатуры или мышью.
Масштаб по вертикали и горизонтали (Vertical и Horizontal Scale)
Эти две опции расположены непосредственно под Кернингом
и Трекингом
.
Их назначение понятно из названия, опции масштабируют выбранный текст вертикально или горизонтально.
Оба этих опции по умолчанию установлены на 100%
Смещение базовой линии (Baseline Shift)
Ниже расположена опция Смещение базовой линии . Базовый сдвиг позволяет переместить выбранные участки текста или отдельные буквы выше или ниже базовой линии шрифта. По умолчанию значение опции установлено в 0 пт. Положительные значения сместят выделенный текст над базовой линией, а отрицательные значения опустят выделенное ниже базовой линии. Опция не имеет предустановленных значений, так что значение необходимо вводить вручную:
Дополнительные текстовые опции
Ниже находятся кнопки дополнительных опций.
Слева направо: псевдополужирный, псевдонаклонный, все прописные, капители (уменьшенные прописные), надиндекс, подиндекс, подчёркнутые, зачёркнутые. На примере я показал действие опций в тексте начиная со второй строки:
Выбор языка
В левом нижнем углу расположена опция "Выбор языка", призванная проверять правописание и расстановку переносов, но, на данный момент, для русского, да и впрочем, для английского, она малоэффективна, поэтому опцию не используется.
