Классы шрифтов: как выбирать и сочетать гарнитуры

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

Это группы шрифтов, объединённых общими особенностями формы и визуального характера.

Это класс шрифтов с засечками на концах основных штрихов букв. В Google Fonts относится к категории Serif.

Это класс шрифтов без засечек с более простой и прямолинейной формой символов. В Google Fonts относится к категории Sans Serif.

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

Это шрифт, форма которого имитирует письмо от руки.

Это шрифт, в котором каждый символ занимает одинаковую по ширине область независимо от формы буквы.

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

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

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

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

Главный визуальный признак антиквы — небольшие засечки на концах букв. Такие гарнитуры могут создавать классическое, элегантное, редакционное или более традиционное настроение.

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

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

Гротески наиболее универсальны для интерфейсов. У символов нет засечек, поэтому форма букв остаётся достаточно простой и хорошо считывается как в крупных, так и в небольших размерах.

Такие гарнитуры можно использовать:

• в заголовках;
• в абзацах;
• в меню;
• в кнопках;
• в подписях;
• в небольшом вспомогательном тексте.

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

К распространённым вариантам относятся Montserrat, Open Sans, Roboto и другие гарнитуры категории Sans Serif.

Акцидентные гарнитуры заметно отличаются от нейтральной типографики и часто имитируют определённую эстетику: пиксельную графику, кисть, старую печать, историческое письмо, декоративные надписи и другие стилистические приёмы.

Их главная задача — создавать характер и усиливать тематику проекта. Поэтому такие шрифты лучше использовать дозированно, преимущественно в крупных заголовках.

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

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

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

Использовать рукописную гарнитуру для больших текстовых полотен не стоит. Её задача — создавать отдельный визуальный акцент.

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

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

Такой приём можно использовать для поддержки определённой стилистики, но для больших объёмов основного текста он менее удобен. Чаще моноширинные шрифты подходят для заголовков, подписей или отдельных декоративных элементов.

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

Самое простое правило: для основного текста использовать гротеск. Он должен считываться максимально быстро и не отвлекать пользователя своей формой.

Более выразительное решение можно перенести в заголовок. В результате основная схема сочетаний выглядит так:

• антиква + гротеск;
• акцидентный шрифт + гротеск;
• рукописный шрифт + гротеск;
• гротеск + гротеск.

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

Например, заголовок можно сделать Bold или Black, а основной текст — Regular.

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

Вместо выразительной композиции появляется визуальный шум: непонятно, какой шрифт является главным, а какой должен его поддерживать.

В удачной паре один участник обычно играет акцентную роль, а второй остаётся спокойным. Чем выразительнее заголовочная гарнитура, тем нейтральнее стоит делать основной текст.

Гарнитура должна соответствовать не только формальным правилам, но и смыслу проекта. Перед выбором полезно определить несколько характеристик бренда или продукта.

Например, для компании, которая занимается строительством деревянных домов, могут быть важны ассоциации:

• надёжность;
• фундаментальность;
• массивность;
• устойчивость.

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

Такие решения постепенно становятся интуитивнее: дизайнер сравнивает несколько вариантов и оценивает, какой из них точнее соответствует характеру проекта.

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

В Google Fonts можно:

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

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

Если самостоятельно подобрать пару пока сложно, можно использовать плагины для Figma. Они позволяют выбрать категорию заголовка и основного текста или закрепить одну гарнитуру, после чего подобрать к ней возможного партнёра.

Некоторые инструменты дают возможность:

• отбирать пары для кириллицы;
• сравнивать Serif и Sans Serif;
• просматривать сочетания на примере фраз;
• сохранять понравившиеся варианты;
• закреплять одну выбранную гарнитуру и генерировать вторую.

Такие сервисы полезны в начале обучения, но не являются обязательными. Основная задача — постепенно научиться самостоятельно определять характер гарнитуры, её роль и совместимость с другими решениями.

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

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

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

Перейти к следующему уроку