Методы управления интервалами в веб-типографике

Если вы разрабатывали сайты в 2006, то вам наверняка доводилось работать с дизайнерами вроде меня, которые не давали вам покоя, если шрифты в браузере хоть немного отличались от макета.

Тогда, возможно, вы пробовали объяснить мне всю боль кроссбраузерной совместимости и насколько по-своему разные браузеры рендерят шрифты. В ответ я, скорее всего, отправлял картинку, чтобы убедиться, что все выглядит одинаково во всех браузерах. Да, я был одним из тех дизайнеров.

Веб-шрифты с тех пор прошли очень долгий путь, и теперь у нас есть инструменты управления рендерингом в браузерах, некоторые существуют уже достаточно давно. Я помню, как чуть не умер от восторга, когда нашел FitText.js и Lettering.js.

Несмотря на все эти замечательные инструменты, сегодня все еще есть множество ситуаций, в которых может понадобиться настройка шрифтов, чтобы обеспечить необходимую удобочитаемость текста. В этой статье мы рассмотрим такие случаи и узнаем как с ними справиться.

Использование правильного оформления для конкретного заголовка

Я часто так делаю, особенно если в дизайне используются сильно кастомизированные шрифты, которые отлично выглядят в целом, но в конкретном контексте могут смотреться нелепо.

Возьмем заголовок, набранный шрифтом Abril Fatface из Google Fonts:

Отличный шрифт! Однако пара нюансов в этом конкретном заголовке мне не нравится, особенно интервалы между некоторыми буквами, из-за которых он кажется немного сжатым:

Вот где кернинг приходит на помощь! Кернинг буквально означает «интервал между буквами». Все файлы шрифтов, знаем мы об этом или нет, содержат несколько степеней кернинга, и у нас есть CSS-свойство font-kerning, чтобы их отключить:

.no-kern-please {
    font-kerning: none;
}

<h1 class="no-kern-please">Rubber Baby Buggy Bumpers</h1>

Мне кажется, это выглядит намного лучше, даже если на первый взгляд разница незначительна.

Посмотреть пример управления кернингом.

Десктоп

Мобильные и планшеты

Исправляем межбуквенное расстояние

Если вы хоть раз работали с веб-шрифтом, в котором интервал между символами слишком широкий или слишком узкий, тогда вы знаете, насколько это неприятно. Вот пример использования другого прекрасного шрифта из библиотеки Google Fonts, который называется Dorsa:

Этот шрифт вполне подходит для заголовка, но можете ли вы представить чтение целого параграфа такого текста? Как-то не очень.

Это действительно тяжело читать!

С помощью letter-spacing мы можем увеличить межбуквенное расстояние, что значительно повысит читабельность текста:

.spaced-out {
    letter-spacing: 2px;
}

Я бы не сказал, что это лучший шрифт для набора основного текста, но текст стал читабельнее:

Посмотреть пример изменения межбуквенного интервала.

Десктоп

Мобильные и планшеты

Слишком большие или слишком маленькие интервалы между словами

Это частный случай предыдущего пункта, за исключением того, что здесь нас интересуют интервалы вокруг слов, а не вокруг отдельных символов.

Здесь нам поможет свойство 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-свойств, которые помогают визуально улучшить то, как шрифты отображаются в разных системах. Формально, этот процесс известен как субпиксельное сглаживание, потому что он заставляет браузер постараться визуально отобразить отсутствующие пиксели там, где они должны находится (за счет использования цветовой составляющей — Прим. ред.).

Нет недостатка в спорах допустимо ли играть с субпиксельным сглаживанием. Несмотря на то, что несколько лет назад Дмитрий Фадеев хорошо изложил свои аргументы против этой практики.

The antialiasing mode is not a “fix” for subpixel rendering — in most cases it’s a handicap. Subpixel rendering is technically superior, clearer, and more readable than antialiasing because by utilizing every one of the subpixels it increases its effective resolution used for font smoothing by three times.

Режим сглаживания — это не «фикс» для субпиксельного рендеринга, а, в большинстве случаев, помеха. Субпиксельный рендеринг технически лучше, чище, читабельние чем текст, к которому применено сглаживание, потому что использует каждый субпиксель и увеличивает его эффективное разрешение, использующееся для сглаживания шрифта, в три раза. Сглаживание более полезно в конкретных случаях, например, для светлого текста на темном фоне, но он не заменяет субпиксельный рендеринг и не является «фиксом».

Но, предположим, мы все равно хотим это сделать. 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.

Десктоп

Мобильные и планшеты

О, подождите, вы используете SVG?!

У SVG свой собственный уровень поддержки методов, рассмотренных в этой статье. У нас есть кернинг (с не очень широкими возможностями) и обычные свойства letter-spacing (межбуквенное расстояние) и word-spacing (расстояние между словами). Интересно, что у нас также есть атрибут textLength, который может использоваться для явного указания как широко может рендериться текст, и он растягивает или сжимает текст, чтобы вместить его. Атрибут lengthAdjust контролирует рендеринг как символов, так и глифов (например, пунктуации).

Посмотреть пример различных межбуквенных расстояний в SVG.

В заключение

Типографика в вебе — это сложно! Да, мы можем контролировать как разные символы отображаются, отрисовываются и позиционируются на экране. Но с большой силой приходит и большая ответственность. Теперь в вашем распоряжении есть, по меньшей мере, несколько приемов, чтобы отвечать веб-дизайнерам, которые зацикливаются на точности типографического дизайна в браузере.