От автора: если в 2006 году вы уже писали сайты, вы могли сталкиваться с такими дизайнерами, как я, которые скрупулезно подходили к вопросу шрифтов, но не сравнивали, как они выглядят на макете и в браузере. Вы, возможно, пытались объяснить таким, как я, что такое кроссбраузерная совместимость, и как разные браузеры по-разному отображают эти шрифты. Я же высылал вам в ответ изображение с контентом, не утруждая себя проверить, что текст во всех браузерах смотрится одинаково. Да, я был одним из таких дизайнеров.
Веб-шрифты сильно эволюционировали с того времени, а у нас появились инструменты для изменения стиля их отображения. Некоторые из инструментов довольно старые. Помню, как у меня чуть не слетела крыша, когда я узнал про FitText.js и Lettering.js.
Несмотря на большой выбор инструментов, есть множество ситуаций, когда нам приходится подстраивать шрифты вручную для лучшей разборчивости. В этой статье я расскажу вам про эти случаи, а также узнаем про способы решения таких проблем.
Исправляем вид одного конкретного заголовка
Я часто сталкиваюсь с такой проблемой, особенно когда в дизайне присутствует супер навороченный шрифт. Сам веб-шрифт выглядит превосходно, но в отдельных ситуациях начинаются проблемы. Для примера возьмем следующий заголовок со шрифтом Abril Fatface с Google Fonts:
Какой красивый шрифт! Но именно в этом заголовке мне не нравится пара вещей, а в частности расстояния между несколькими буквами. Буквы расположены слишком близко:
Тут нам поможет кернинг! Кернинг – это расстояние между буквами. Во всех файлах шрифтов есть кернинг, и с помощью свойства font-kerning мы можем его удалить:
|
1 2 3 |
.no-kern-please { font-kerning: none; } |
|
1 |
<h1 class="no-kern-please">Rubber Baby Buggy Bumpers</h1> |
Разница совсем небольшая, но кернинг может действительно помочь, если ваш дизайнер захочет изменить расстояние между буквами.
Отключение кернинга не всегда целесообразно. Как отметил Джеймс Колче, хорошие шрифты используют кернинг в качестве инструмента не просто так. Если удалить кернинг с помощью CSS для решения одной конкретной проблемы, мы можем непреднамеренно изменить расстояния между буквами во всем шрифте.
Данные о поддержке в браузерах ниже взяты с сайта Caniuse, на котором также говорится, что данная функция находится в статусе W3C Candidate Recommendation.
Полная фиксация расстояний между буквами
Если вы работали со шрифтами, где расстояние между буквами или слишком большое, или слишком маленькое, то вы познали, что такое боль. Ниже пример с еще одним замечательным Google шрифтом Dorsa:
Шрифт отлично подходит для заголовков. Но можете себе представить, каково было бы читать текст с таким шрифтом в параграфе? Да ну.
Свойство letter-spacing может радикально поменять восприятие данного шрифта в параграфе, добавив пару пикселей между букв:
|
1 2 3 |
.spaced-out { letter-spacing: 2px; } |
Я не стану говорить, что этот шрифт стал лучшим для параграфов, однако с дополнительным расстоянием стало легче читать:
Данные о поддержке в браузерах ниже взяты с сайта Caniuse, на котором также говорится, что данная функция находится в статусе W3C Candidate Recommendation.
Слишком маленькое или слишком большое расстояние между словами
Последняя ситуация. Здесь отличие в том, что нас не устраивает расстояние между словами, а не отдельными символами. Тут нам поможет свойство word-spacing, одинаково работающее во всех браузерах. Пример со стихотворением, в котором используется шрифт Prompt. Шрифт слегка шире других, и смотрелся бы лучше, будь он немного уже.
Неравные расстояния между строками
Не все строки имеют одинаковую высоту. Посмотрите, как один шрифт кажется больше другого, хотя значение font-size у них одинаковое.
Свойство font-size задает прямоугольную область, которую может занять шрифт. Если задать свойство font-size: 20px, то мы создадим блок, в который можно поместить буквы размером в 20px.
Некоторые шрифты будут занимать больше пространства, из-за чего будет казаться, что они больше по размеру и имеют большее или меньшее вертикальное расстояние между строками.
Для управления вертикальными отступами можно воспользоваться свойством line-height. Есть так называемое золотое правило разборчивости текста font-size * 1.5 = line-height (или безразмерный вариант line-height: 1.5;), которое будет изменяться в зависимости от выбранного шрифта и того, как он занимает вертикальное пространство. Посмотрите molten leading.
Четкость и разборчивость
Не все шрифты одинаково отображаются в разных операционных системах. Это происходит потому, что в ОС Windows, Mac OS и т.д. берется разное количество пикселей на отрисовку шрифтов. Многие веб-дизайнеры ненавидят ту мысль, что мы зависим от того, как ОС интерпретирует наши решения со шрифтами.
В CSS есть свойства, увеличивающие разрешение шрифтов для отображения в ОС. Этот процесс называется субпиксельный рендеринг. Браузеру даются команды, чтобы тот попробовал залить определенные пиксели на экране.
Было множество споров, можно ли играться с субпиксельным рендерингом или нет. Дмитрий Фадеев красиво высказался против данной практики. Его слова актуальны, несмотря на то, что прошло уже несколько лет.
«Режим сглаживания – не «фикс» для субпиксельного рендеринга, в большинстве случаев он только мешает. Субпиксельный рендеринг технически превосходит режим сглаживания, он чище и более читаемый. Эффективное разрешение для сглаживания шрифта увеличивается в три раза за счет использования каждого субпикселя. Режим сглаживания будет полезен в определенных ситуациях. К примеру, темный текст на светлом фоне. Однако сглаживание не заменит субпиксельный рендеринг, и уж точно это не «фикс».»
Но, к примеру, мы все же хотим это сделать. Свойство font-smooth дает нам определенный уровень контроля над четкостью и читаемостью текста. Свойство заполняет те пиксели, которые пропустила ОС. Значения свойства font-smooth:
auto: позволяет браузеру самому принять решение о том, как лучше всего залить пиксели шрифта.
never: отключает автоматическое сглаживание системы. Шрифт будет отображаться по-обычному, с зазубренными краями и т.д.
always: браузер получает команду всегда добавлять пиксели в шрифт, если есть такая возможность.
Заметка: на момент написания статьи свойство font-smooth считалось неофициальным свойством и не рекомендовалось для использования. Для работы в браузерах WebKit и Mozilla есть специальные вендорные префиксы, однако свойство нестандартизированное. Учитывая заметку выше, для вендорных префиксов можно выделить следующие значения:
-webkit-font-smoothing
none: отключает сглаживание шрифта в WebKit браузерах.
antialiased: сглаживает шрифт на одном уровне, так как пиксели уже отрисованы операционной системой.
subpixel-antialiased: сглаживает текст на микро уровне, повышая четкость текста, особенно для экранов с высоким разрешением.
-moz-osx-font-smoothing
auto: браузер сам решает, нужно ли оптимизировать сглаживание шрифта или нет.
inherit: свойство наследует значение от родителя.
unset: то же самое, что none в префиксе WebKit.
grayscale: то же самое, что значение antialiased в префиксе WebKit.
Данные о поддержке в браузерах ниже взяты с сайта Caniuse, на котором также говорится, что данная функция находится в статусе Unofficial или W3C «Note».
Вы пользуетесь SVG?!
В SVG есть свой уровень поддержки описанных в этой статье техник. В SVG есть свой кернинг, расстояние между букв и слов. Также стоит упомянуть атрибут textLength, с помощью которого можно явно задать ширину текста, а текст подстроится под указанные рамки. Атрибут lengthAdjust также работает с одним символом или глифом (знаки пунктуации).
Заключение
Типографика в интернете – занятие непростое. Да, у нас есть тьма инструментов, с помощью которых можно контролировать отображение шрифта, его рендеринг и расположение на экране. Однако с большой силой приходит большая ответственность. По крайней мере, теперь у вас есть парочка инструментов, которыми вы можете помочь дизайнерам, которые не могут решить проблему точного переноса дизайна в браузер.
Автор: Geoff Graham
Источник: //css-tricks.com/
Редакция: Команда webformyself.
