Шрифт — один из ключевых элементов типографики. Это не просто «красивые буквы». От его выбора зависит удобство чтения, восприятие информации и общее впечатление от макета. Одни шрифты подходят для длинных текстов, другие лучше использовать в заголовках, а третьи — только для декоративных задач.

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

Что такое шрифт и начертание

Шрифт — это уникальный способ написания букв, цифр и символов, объединённых общей формой, пропорциями и расстоянием между элементами.

Проще говоря: шрифт — это внешний вид текста. Когда говорят «выбрать шрифт», имеют в виду именно выбор конкретного визуального стиля для текста.

Самые известные и стандартные шрифты, которые есть практически на любом компьютере:

• Times New Roman;
• Arial;
• Calibri;
• Verdana;
• Tahoma;
• Georgia.

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

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

Начертание, или насыщенность, — это определённая толщина и наклон букв и символов.

Основные виды начертаний:

• Thin — очень тонкий;
• Light — тонкий;
• Regular — обычный;
• Medium — средний;
• Bold — толстый;
• Black — очень толстый;
• Italic — наклонный (курсив);
• Bold Italic — наклонный толстый.

Также к начертанию относят декорирование:

• Underline— подчёркнутый текст;
• Strikethrough— зачёркнутый текст.

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

Классификация шрифтов

На основе внешнего вида (стиля) выделяют четыре основные категории шрифтов.

Антиквенные шрифты или антиквы (Serif)

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

Примеры антиквенных шрифтов:

• Times New Roman
• Georgia
• Garamond
• Merriweather
• PT Serif

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

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

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

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

Гротескные шрифты или гротески (Sans-serif)

Это шрифты без засечек.

Примеры гротескных шрифтов:

• Roboto;
• Inter;
• Manrope;
• Montserrat;
• Open Sans.

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

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

Декоративные (акцидентные) шрифты (Display, Decorative)

Интересные, узорчатые, тематические, «необычные» шрифты.

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

Рукописные шрифты (Handwriting, Script)

Шрифты, которые имитируют письмо от руки, работу кистью или пером.

Для них характерны плавные линии, различная толщина штрихов, большое количество декоративных элементов.

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

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

Основные характеристики шрифтов

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

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

Например, при работе в текстовом редакторе MS Word для большинства документов обычно выбирают 12 или 14 кегль.

Межстрочный интервал (line height) — расстояние между соседними строками текста. В Figma и большинстве других программ измеряется в процентах или в пикселях.

Правильно подобранный межстрочный интервал делает текст более комфортным для чтения и восприятия.

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

Межбуквенный интервал, или трекинг (letter spacing) — расстояние между буквами в строке. В Figma измеряется в процентах.

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

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

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

Кернинг — это расстояние между конкретными парами букв (символов). В отличие от трекинга, который меняет расстояние между всеми буквами в строке равномерно, кернинг работает точечно.

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

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

Где искать шрифты

Шрифты обычно ищут в специальных библиотеках шрифтов. Есть библиотеки с бесплатными шрифтами, которые можно использовать почти в любых своих проектах (обычно при этом нужно указывать автора шрифта), и платными, которые требуют покупки лицензии. Условия использования платных шрифтов различаются в зависимости от типа проекта.

Примеры библиотек с бесплатными шрифтами:

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

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

Fonts Uprock — ещё одна хорошая библиотека с большим количеством русскоязычных шрифтов и несколькими вариантами фильтрации. Плюс, здесь можно сразу посмотреть, как будет выглядеть ваш текст. Шрифты отсюда тоже нужно скачивать и устанавливать.

Много хороших сайтов для поиска шрифтов я собрал в отдельной статье — «Лучше сайты с бесплатными шрифтами».

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

Поддержка языков

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

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

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

Заключение

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

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

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