Привет!

Текст и адаптивный дизайн

Артур ШевченкоАртур Шевченко

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

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

Типы шрифта

Есть платные гарнитуры, к которым, например, относится всеми любимая Helvetica. Нелегальное коммерческое использование такого шрифта может привести к судебным искам со стороны владельца лицензии. Альтернативой платному шрифту являются бесплатные гарнитуры. Лет 5 назад, если вы слышали термин “бесплатный шрифт”, то это не обещало ничего хорошего. Их было сложно читать, а некоторые начертания выглядели даже пугающие. Ситуация поменялась в лучшую сторону, когда Google создали ресурс Google Fonts, где каждый может выбрать и использовать качественные бесплатные гарнитуры. Рекомендуем вам этот ресурс, он стоит вашего внимания.

Совет
Вы можете ознакомится со статистикой использования шрифтов Google Fonts, чтобы иметь представление о популярности той или иной гарнитуры.

Подключение шрифта

Можно подключать как свой кастомизированный шрифт, так и шрифт из Google Fonts. Для использования своего шрифта вы можете использовать правило @font-face. Поддержка @font-face начинается с IE8, и составляет согласно статистике сервиса Can I Use 82%. Чтобы добиться полной кроссбраузерности вы можете использовать следующий синтаксис:

@font-face {
                    font-family: 'DroidSerifRegular';
                    src: url('../fonts/DroidSerif-Regular-webfont.eot');
                    src: url('../fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
                    url('../fonts/DroidSerif-Regular-webfont.woff') format('woff'),
                    url('../fonts/DroidSerif-Regular-webfont.ttf') format('truetype'),
                    url('../fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
                    font-weight: normal;
                    font-style: normal;
}

Этот синтаксис позволяет решить баг парсинга шрифта в IE8. Баг происходит тогда, когда вы объявляете несколько источников шрифтов (IE8 выдает ошибку 404 и не обрабатывает их). При добавлении хака ‘?#iefix’, парсер браузера воспринимает все объявления шрифта в @font-face, как один шрифт 'FontName.eot'. В итоге все работает.

Обратите внимание
Браузер IE9 работает только с .eot форматом шрифта, Safari версии 4.1 и ниже поддерживают .svg формат. Браузеры IE 9+, Firefox, Chrome, Safari, и Opera поддерживают .woff формат. Кроме того, Firefox, Chrome, Safari, и Opera могут использовать .ttf и .otf форматы. Поэтому следует подключать ваш шрифт в различных вариантах, как минимум в .eot, .ttf. и .woff.

Вторым вариантом использования кастомизированных шрифтов является подключение их с помощью Google Fonts. Это сделать достаточно легко, но в таком случае вы сталкиваетесь с проблемой зависимости вашего ресурса от сторонних сайтов. Этот вариант подключения шрифта создает запросы на другой домен, что сказывается на времени загрузки вашего сайта. По сути вы не увидите значительного падения скорости загрузки, но это все же будет запрос на другой ресурс. Поэтому для оптимизации загрузки из другого домена можно использовать 'link rel="dns-prefetch" href="your-website-to-load"'.

Совет
Не используйте на странице больше трех кастомизированных шрифтов @font-face. Файл шрифта имеет большой размер (от 200 до 500 Кб.), и это сказывается на скорости загрузки.

Величины измерения и адаптивный дизайн

Пиксели — это классика

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

Пункты

Эта единица измерения пришла в веб из типографий. Один ‘pt’ эквивалентен 1/72 дюймам. Величина ‘pt’ имеет фиксированный размер, поэтому не может изменять свой масштаб. Размер ‘4 pt’ будет таковым при любом размере viewport. По сути эта единица измерения в вебе абсолютно бесполезна, потому что не имеет привязки к архитектуре устройства. Вариант не подходит.

Относительные величины ‘em’

Следующий способ — использовать относительные величины ‘em’. Вы устанавливаете размер корневого элемента (html {font-size:100%;}). Все последующие селекторы наделяете шрифтом относительно корневого элемента. Тут возникает проблема наследования css-селекторов, которая сводится к следующему:

html {font-size:100%;} 
h1 {font:400 2em/2em 'Lobster regular', sans-serif;}

Каждый селектор определяет размер шрифта в зависимости от своего родительского элемента. Все последующие параметры селектора, использующие размер в ‘em’, будут подсчитываться от размера шрифта этого селектора. Единственным выходом из этой ситуации будут ручные подсчеты интерлиньяжа селектора. Дополнительно возникает проблема наследования: когда вы задаете размер шрифта контейнера, то элемент внутри него будет считать именно этот размер как корневой, но не размер шрифта селектора html. Словом, использование 'em' приносит больше мороки, чем пользы.

Относительные величины ‘rem’

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

html {font-size:100%;} 
h1 {font-size:2rem;line-height:2rem;font-family:'Lobster regular', sans-serif;}

Большим плюсом этого подхода является то, что изменив размер шрифта корневого элемента, вы сможете изменить размеры шрифта всех элементов, сохранив их соотношение. Вы просто меняете размер шрифта корневого элемента страницы, и теперь не нужно менять вручную размер всех селекторов текста. Поддержка данного свойства начинается от IE9 и насчитывает 83%. Рекомендуем вам использовать эту относительную величину.

Совет
Если использовать ‘rem’ в форме собирательного атрибута {font:normal 2rem/2rem 'Lobster regular', sans-serif;}, то вы столкнетесь с багом браузера IE, который воспринимает эти относительные величины только в отдельных свойствах {font-size:2rem; line-height:2rem; font-family:'Lobster regular', sans-serif;}.

Итоги

В результате тестирования мы определили, что на сегодняшний день самым простым и очевидным вариантом задания размера текста являются пиксели. Они чаще всего задаются в макетах дизайна, ими проще оперировать. Из относительных величин можно использовать ‘rem’, потому что они вычисляются браузером относительно главного корневого элемента, однако для поддержки в IE не стоит использовать собирательное свойство font.