Типографика: выбор шрифтов и построение иерархии

Анатомия шрифта: части букв, которые нужно видеть

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

Основные части буквы

Кегль (size) – размер шрифта в пунктах. Это высота буквы от верхней до нижней линии. 12pt, 16pt, 24pt – цифры, которые вы видели миллион раз.

Строчная высота (x-height) – высота маленькой буквы без хвостов (х, н, о). Это реальная высота текста, который вы читаете. Шрифты с большой x-height кажутся крупнее, хотя имеют одинаковый кегль.

Засечки (serifs) – маленькие линии на концах букв. Times New Roman есть. Arial нет. Засечки делают текст традиционнее и выглядит формальнее. Без засечек – более современно.

Апертура (aperture) – отверстие в букве. У букв 'а, б, в' апертура – это круглое отверстие. Большая апертура делает шрифт более читаемым, особенно в малых размерах.

Счётчик (counter) – пустое пространство внутри букв 'О, Д, е'. Узкие счётчики делают буквы более тяжелыми, широкие – воздушнее.

Что это значит в практике

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

Апертура и счётчики важны для читаемости малых размеров. Если вы делаете текст 10–12pt – выбирайте шрифт с хорошей апертурой. Для крупных размеров это менее критично.

Пары шрифтов: как выбирать два, которые работают вместе

Правило: два шрифта разные, но гармоничные. Не противоречивые, но с достаточным контрастом, чтобы их отличить.

Классическая пара: Serif + Sans-serif

Это самая надежная комбинация. Serif – традиционный, авторитетный, часто для основного текста. Sans-serif – современный, чистый, часто для заголовков. Пример: Georgia (serif) для текста, Helvetica (sans-serif) для заголовков. Они контрастируют, но не конфликтуют.

Как проверить, работает ли пара

1. Откройте Figma (или любой редактор). Напишите несколько строк одним шрифтом, несколько другим. Слушайте свой глаз: приятно ли это видеть?
2. Проверьте контраст. Если оба шрифта похожи (оба sans-serif, оба тонкие), это не пара. Пара – это когда они явно разные, но работают вместе.
3. Смотрите на округлость. Если первый шрифт округлый (с плавными кривыми), второй может быть геометричным (с острыми углами). Это работает.

Частые удачные комбинации

Garamond (классический serif) + Montserrat (современный sans-serif) – классика + современность.

Playfair Display (элегантный serif с контрастом) + Lato (простой sans-serif) – роскошь + доступность.

Cormorant (классический serif) + Open Sans (дружелюбный sans-serif) – консервативность + открытость.

Иерархия текста: как разные размеры и веса создают порядок

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

Размеры текста (типографическая шкала)

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

Пример шкалы: 12pt, 14pt, 16pt, 18pt, 24pt, 32pt, 48pt. Каждый размер больше предыдущего примерно на одно число. Это создаёт ритм. Когда вы используете эту шкалу, типографика выглядит гармоничной.

Вес шрифта (boldness)

Regular, Medium, Semibold, Bold – это не просто толщина. Это инструмент управления вниманием. Заголовок – Bold. Подзаголовок – Semibold. Основной текст – Regular. Это даёт контраст без необходимости менять размер.

Не используйте более двух весов в одном макете. Если вы используете Regular для текста, используйте Bold для акцентов. Не добавляйте Medium и Light – это шум.

Интерлиньяж (line-height)

Это расстояние между строками. Для текста – обычно 1.5–1.6 от размера шрифта. Для 16pt текста – интерлиньяж 24–26pt. Это делает текст читаемым.

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

Мера строки (line length)

Это количество символов в строке. Идеально 60–70 символов. Если строка длиннее 80 символов – текст тяжело читать, глаз теряется. Если короче 40 – глаз прыгает туда-сюда, тоже неудобно.

На мобильных обычно 40–50 символов в ширину. На рабочем столе можно 70–80. Когда вы размещаете текст в колонке, думайте о количестве символов, а не только о размере шрифта.

Технические параметры, которые меняют всё

Это детали, которые новички часто пропускают. Но они меняют качество типографики на 50%.

Кернинг (kerning)

Это расстояние между отдельными парами букв. Некоторые буквы от природы создают визуальный разрыв: 'T' и 'o', 'В' и 'a'. Кернинг это исправляет.

В modern шрифтах встроен автоматический кернинг. В Figma/Photoshop ищите опцию 'Optical' или 'Metrics'. Она автоматически подберёт расстояния. Для дополнительной полировки вы можете подрегулировать вручную.

Трекинг (tracking)

Это расстояние между всеми буквами одновременно. Если базовое расстояние (из шрифта) не то – вы добавляете трекинг.

Для крупных заголовков часто добавляют положительный трекинг (+20–50), чтобы они выглядели просторнее. Для мелкого текста иногда уменьшают (-10–20), чтобы он был компактнее. Но осторожно: если переборщить, текст развалится.

Интерлиньяж (line-height) – вторая глава

Помимо визуального комфорта, интерлиньяж влияет на читаемость. Для основного текста 12–14pt нужен интерлиньяж минимум 1.5 (то есть 18–21pt). Для 16pt и выше – 1.4–1.5 достаточно.

В вёрстке заголовков интерлиньяж часто делают меньше (1.1–1.2), потому что заголовки крупные и менее чувствительны к тесноте. Но если две строки заголовка – смотрите, чтобы было комфортно.

Выравнивание и избежать всех ошибок сразу

Выравнивание по левому краю (align left) – наиболее читаемо. Выравнивание по центру (center) – используйте редко, только для акцентов. Выравнивание по правому краю (align right) – почти никогда. Выравнивание по ширине (justify) – опасно: может создать большие пробелы между словами.

Типографический микс: полный контроль

Теперь собираем всё вместе.

Сценарий: статья в журнале

Заголовок: Playfair Display, 48pt, Bold, интерлиньяж 1.2, трекинг +10. Подзаголовок: тот же шрифт, 24pt, Regular, интерлиньяж 1.3. Основной текст: Lato, 16pt, Regular, интерлиньяж 1.6. Мера строки около 70 символов. Сноска: 12pt, 1.4 интерлиньяж.

Визуально: крупный Playfair создаёт ощущение элегантности, Lato для текста легко читается. Контраст между serif заголовком и sans-serif текстом явный, но не конфликтующий.

Сценарий: веб-приложение (минимализм)

Заголовок: Inter, 32pt, Semibold. Подзаголовок: Inter, 18pt, Regular. Основной текст: Inter, 14pt, Regular, интерлиньяж 1.5. Всё в одной гарнитуре, но разные размеры и веса создают иерархию.

Просто? Да. Эффективно? Да. Современно? Да. Это работает, потому что Inter разработан специально для экранов и имеет отличную читаемость при любом размере.

Вывод: типографика как мастерство

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

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

И помните: лучший шрифт – это не самый красивый. Лучший шрифт – это тот, который служит тексту, не отвлекает читателя и помогает ему понять сообщение.