Типографика: с чего начать
Разбираем, как подобрать шрифтовую пару и собрать читаемый текстовый блок: размер, интерлиньяж, длина строки.
О чём эта статья
Большая часть любого сайта — текст. Пользователь может не заметить цвет кнопки, но сразу почувствует, что читать неудобно: строки слишком длинные, буквы мелкие, абзацы слипаются. Хорошая типографика незаметна, плохая выгоняет со страницы.
Чтобы собрать читаемый текстовый блок, достаточно четырёх решений: какие шрифты, какого размера, с каким интерлиньяжем и какой ширины колонка. Разберём их по очереди.
Шрифтовая пара
Начинать проще всего с двух гарнитур: одна для заголовков, другая для текста и интерфейса. Самый надёжный вариант — пара из одной суперсемьи, где антиква и гротеск нарисованы вместе и заранее согласованы по пропорциям. Для кириллицы хороший бесплатный пример — PT Serif и PT Sans.
Если хочется пару из разных семей, ищите сходство в скелете букв и контраст в характере. Похожая высота строчных и близкая ширина знаков делают пару цельной, а разница между засечками и их отсутствием даёт иерархию.
Размер и иерархия
Основной текст на экране — от 16 до 18 пикселей. Меньше читается с напряжением, особенно на телефоне. От этого размера строится шкала: подписи чуть меньше, заголовки заметно крупнее. Разница между соседними уровнями должна быть видна с первого взгляда, иначе иерархия не работает.
Заголовок стоит отличать от текста хотя бы двумя признаками: размером и насыщенностью или размером и гарнитурой. Один признак легко потерять, два читаются надёжно.
Интерлиньяж
Интерлиньяж — расстояние между строками. Для основного текста хороший ориентир — от 1,4 до 1,7 от размера шрифта. Шрифтам с засечками и длинным строкам нужно больше воздуха, крупным заголовкам — меньше: при 1,5 строки заголовка разваливаются на отдельные полосы.
Длина строки
Если строка слишком длинная, глаз теряет начало следующей. Если слишком короткая, текст рвётся на обрывки и читается рывками. Удобная длина — от 45 до 75 знаков вместе с пробелами. В CSS её удобно задавать в единицах ch: ширина колонки в 68ch держит строку в этих пределах при любом размере шрифта.
Эти четыре решения связаны. Увеличили размер — пересчитайте ширину колонки. Сделали строку длиннее — добавьте интерлиньяжа. Типографика собирается не по одному правилу, а балансом между ними.
Практика
Займёт около часа. Понадобятся Figma и любой текст на 3–4 абзаца.
Что сделать
- Возьмите длинный текст: статью, пост или описание товара.
- Сверстайте его в Figma в колонку шириной с экран телефона и в колонку для десктопа.
- Сделайте два варианта: с парой PT Serif и PT Sans и с парой, которую подберёте сами.
- Для каждого задайте размер текста, интерлиньяж и ширину колонки по правилам из статьи.
- Положите варианты рядом и запишите в двух предложениях, какой читается легче и почему.