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

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

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

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

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

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

Задание

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

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

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

Поделиться уроком: