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

Гарнитура и шрифт — в чем разница?

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

В современной типографике распространены три основные категории гарнитур: с засечками, без засечек, а также декоративные (или дисплейные) гарнитуры. Далее расскажем о них более подробно:

  • Гарнитуры с засечками. Засечки — это короткие штрихи на концах букв, начинающие и завершающие основные штрихи. Шрифты с засечками выглядят традиционно и формально, их часто используют в печати. Самый известный шрифт с засечками — Times New Roman.
  • Гарнитуры без засечек. Имеют более современный вид и идеально подходят для заголовков, объявлений и прочих кратких текстов. Одним из самых популярных шрифтов без засечек является Arial — копия Helvetica.
  • Декоративные (дисплейные) гарнитуры. Чаще всего применяются для заголовков и хедлайнов, плохо подходят для основного текста, особенно длинных фрагментов. Включают ряд подкатегорий: пластинчатые засечки, рукописные, черные, моноширинные и т.д.

Элементы типографики

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

Интерлиньяж

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

Трекинг

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

Кернинг

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

Выравнивание

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

Иерархия

Иерархия является одним из важнейших аспектов типографики и дизайна в целом. Она делает дизайн сайта или любого другого продукта гармоничным и привлекательным в глазах целевой аудитории. Одинаковый размер всех шрифтов на странице негативно влияет на читабельность текста и не позволяет выделить главное. Для правильного построения иерархии придерживайтесь трех правил:

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

Как правильно выбрать шрифты?

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

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

На Фроме настройки типографики можно задать для всего шаблона сайта и для каждого блока отдельно. К общим настройкам относятся: выбор шрифта, базового размера, насыщенности и варианта текстовой схемы. Отдельно для каждого блока можно установить размер заголовка и тип выравнивания.

Для успешного применения типографики в веб-дизайне нужно постоянно практиковаться. Не стесняйтесь “играть со шрифтами”, пробуйте разные комбинации настроек, чтобы придать сайту более насыщенный и выразительный дизайн.