Основы типографики для начинающих веб-дизайнеров

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

Для начала познакомимся с основными терминами типографики:

Глиф - графическое представление отдельного символа или знака в шрифте (буква, цифра, иероглиф и т.д.).

Шрифт — конкретный набор символов, который мы используем для печати.

Гарнитура - семейство или набор разных стилей и размеров одного шрифта или, другими словами, шрифт со всеми возможными начертаниями (Regular, Bold, Italic, Bold Italic и др.).

Контрастность - соотношение толщины соединительных штрихов к толщине основных штрихов знаков.

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

Насыщенность - визуальная плотность и толщина глифов (отдельных символов) в шрифте (Regular, Bold, Italic, Bold Italic и др.).

Интерлиньяж — расстояние между строками текста.

Трекинг — увеличение или уменьшение промежутка между всеми символами в тексте, которое осуществляется равномерно по всей строке или абзацу.

Кернинг — коррекция интервала между двумя конкретными символами (буквами или другими знаками) в тексте для создания оптимального визуального интервала между ними.

Комплектность шрифта - количество стилей и вариантов в нем, включая разные комбинации больших и малых символов.

Основные характеристики шрифтов можно поделить на следующие группы:

1) Засечки

- с засечками (Times New Roman, Garamond, Georgia);

- без засечек (Arial, Montserrat, Verdana).

2) Контрастность. Чем больше разница в штрихах букв, тем контрастнее шрифт.

3) Насыщенность

- сверхсветлые (Ultra Light, Extra Light, Thin);

- светлые (Light);

- нормальные (Book, Regular, Roman);

- полужирные (Medium, Demi Bold, Semibold);

- жирные (Bold, Heavy);

- сверхжирные (Extra Bold, Black, Ultra Bold).

4) Апертура - «открытость» знака, проще всего её оценить по букве С. Параметр показывает, насколько удобнее читать текст. Чем апертура больше, тем комфортнее.

Существуют пять основных видов шрифтов:

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

Брусковые. Эти шрифты напоминают антикву, но они не имеют яркого контраста между штрихами. Вместо аккуратных засечек грубые и тяжёлые.

Гротески (рубленые) - неконтрастные шрифты без засечек. Изначально их создали в противовес антикве и использовали как декоративные, чтобы привлечь внимание в рекламных объявлениях. Со временем они стали самостоятельными и теперь используются повсеместно.

Рукописные - имитирующие надпись, сделанную от руки.

Акцидентные - яркие, бросающиеся в глаза шрифты с необычными элементами.

Где же искать подходящие ресурсы для проектов? Их достаточно много, в статье я привожу в пример только небольшое количество :)

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

Soroka - плагин Figma, который автоматически может подобрать шрифтовые пары.

Сайты с подборками шрифтов:

- Abstract Fonts

- FontSpace

- Font Squirrel

- DaFont

- 1001 Fonts

- Urban Fonts

и др.

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

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

Вдохновляйтесь, изучайте и практикуйте, тогда все обязательно получится :)

Автор - Полина Колмыкова

Источники: