Frontender Magazine

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

Если вы разрабатывали сайты в 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 Chrome Mozilla Firefox Internet Explorer Opera Apple Safari
29* 34 No 16* 7*

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

iOS Safari Android Opera Mobile Android Chrome Android Firefox
8* 4.4* 37 53 49

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

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

Скриншот

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

Скриншот

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

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

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

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

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

Десктоп

Google Chrome Mozilla Firefox Internet Explorer Opera Apple Safari
4 2 5.5 9 3.1

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

iOS Safari Android Opera Mobile Android Chrome Android Firefox
3.2 2.1 10 53 49

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

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

Здесь нам поможет свойство 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 включают:

Примечание: Свойство font-smooth считается неофициальным на момент написания статьи и не рекомендуется для использования на продакшен-версии сайта. Есть свойства с вендорными префиксами для WebKit и Mozilla, хотя стандартной реализации нет.

Существующие свойства с вендорными префиксами можно использовать с их специфическими значениями:

-webkit-font-smoothing

-moz-osx-font-smoothing

Десктоп

Google Chrome Mozilla Firefox Internet Explorer Opera Apple Safari
5* 25* No 15* 4*

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

iOS Safari Android Opera Mobile Android Chrome Android Firefox
No No No No No

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

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

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

В заключение

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

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Geoff Graham
Автор:
Geoff Graham
Сaйт:
http://geoffgraham.me/
GitHub:
geoffgraham
Twitter:
@geoffreygraham
Альбина Токарчук
Переводчик:
Альбина Токарчук
GitHub:
endophasie
Twitter:
@endophasie

Комментарии (1 комментарий, если быть точным)

Автар пользователя
porcelanosa

а что это какая-то странная поддержка у letter-spacing Она, по-моему, гораздо шире. http://caniuse.com/#search=letter-spacing