Шрифты и типографика в веб-дизайне

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

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

Делайте то, что можете, чтобы получить хотя бы сходство с высокоуровневыми решениями по выбору гарнитуры шрифта и его размеров. Необязательно углубляться в дебри кернинга и того, что такое лигатуры, но нужно понимать, когда следует применять шрифты с засечками (serif), а когда без (sans-serif), и как насыщенность шрифта и межстрочный интервал влияют на читабельность (помните о том, как построить хорошую визуальную иерархию).

Пункты для размышления

• Почему шрифты имеют значение?
• Какая разница между шрифтами с засечками (serif) и без (sans-serif)?
• Для чего используются атрибуты font-family?
• Как в font-family определяется активный шрифт?
• Где на самом деле браузер берет свои шрифты?
• Где можно взять дополнительные шрифты и как внедрить их в свою страницу?
• Какие недостатки использования веб-шрифтов? Загрузки своих собственных?
• Какие важные свойства шрифта вы можете определить с помощью CSS?

Задание

1. Прочитайте про шрифты и типографику от Шея Хау
2. Просмотрите Руководство по использованию веб-шрифтов Google для начинающих от DesignShack, но не слишком углубляйтесь в детали.
3. Просмотрите веб-шрифты Google, возможно, какие-то из них покажутся вам интересными.
4. Верстальщику о шрифтах на русском

Дополнительные ресурсы

Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему.

• Импорт ваших собственных шрифтов
• Свой шрифт на странице от htmlbook (рус.яз.)
• 20 вопросов про веб-шрифты на Хабре (рус.яз.)