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

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

Разбираемся с основными понятиями

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

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

Кегль — размер буквы или знака по вертикали, включающий её нижние и верхние выносные элементы. Измеряется в типографических пунктах (1 ПТ = 0.35 мм). Другими словами кегль это — расстояние от нижней части строчной буквы до верхней части заглавной буквы.


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


Трекинг —
 другими словами «межсимвольный интервал». В отличие от кернинга, регулирующего расстояние между знаками в определенных парах («AV», «TA» и пр.), трекинг применяется к группе символов (слово, строка, абзац и т. д.). Трекинг позволяет контролировать пространство в тексте равномерно.


Интерлиньяж —
 вертикальное расстояние между базовыми линиями соседних строк. Базовая линия — это невидимая линия, по которой выравнивается нижний край большинства букв.


Шрифт —
 это рисунок в графике, начертание набора букв и знаков, которые вместе представляют собой цельную систему, как в стилистическом, так и в композиционном плане. Более узкое понятие, чем гарнитура. Например, жирное или курсивное начертание гарнитуры Times New Roman является шрифтом.

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

Перейдем к последней порции теоретических знаний и рассмотрим основную классификацию гарнитур.


Антиква
(антиква, serif) группа шрифтов, имеющих засечки. Такие шрифты рекомендуется использовать для заголовков. При печати больших блоков текста данные шрифты лучше не применять, так как они признаны трудночитаемыми.


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


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


Акцидентные шрифты (декоративные)
одна из самых распространенных шрифтовых категорий. Главная их отличительная черта – они предназначены для заголовков и других небольших отрывков текста с целью привлечения и акцентирования внимания. Не годятся для набора основного текста.


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

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

“Выходя с работы, ты ненароком начинаешь обращать внимание на различные плакаты в метро, билборды на улицах или рекламные объявления в журналах, сидя в гостях ты начинаешь залипать на кружку с надписью и задумываешься… вот бы на пару пикселей сдвинуть текст влево или вправо, а почему картинка так “прилипла” к тексту? ” (с) рассказывает наш дизайнер.

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

 

1. KernType https://type.method.ac – учит кернить, попробуйте расставить буквы на свои места;

2. ShapeType https://shape.method.ac – сделай правильную букву при помощи кривы;

3. TypeConnection http://www.typeconnection.com – сочетание шрифтов;

4. FontGame http://fontgame.ilovetypography.com – определите название шрифта, которым написан текст.

Будьте осторожны это затягивает!

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