Типографика в дизайне: основы
Девять из десяти проблем с читаемостью макета решаются не сменой шрифта, а настройкой того, как он выведен на экран: размер, межстрочный интервал, длина строки. Типографика — это работа не только с выбором гарнитуры, но и с системой размеров, интервалов и сочетаний, которая делает текст удобным для чтения и понятным по структуре с первого взгляда. Ниже — конкретные ориентиры по типографской иерархии, шрифтовым парам, интерлиньяжу и трекингу, которые можно сразу переносить в свой макет, плюс разбор того, чем чтение с экрана отличается от чтения на бумаге.
Типографская иерархия: сколько уровней текста нужно на самом деле
В большинстве интерфейсов достаточно 4-5 уровней: H1, H2, основной текст, подпись/мета-текст и текст на кнопке. Для веба рабочий ориентир — заголовок H1 32-48px, H2 24-32px, основной текст 16-18px, подписи 12-14px. Разница между соседними уровнями должна быть заметна без сравнения линейкой: если H2 отличается от текста всего на 2px, читатель не считает это иерархией и воспринимает страницу как один сплошной блок. Часто иерархию задают не только размером, но и начертанием — например, текст 16px обычным начертанием и подзаголовок 16px полужирным того же кегля уже создают достаточный контраст без раздувания сетки размеров.
Возьмём страницу статьи в блоге: заголовок H1 задаёт тему, вводный абзац часто увеличивают до 18-20px и делают чуть светлее по цвету — это сигнализирует «это ещё не основной текст, это анонс», подзаголовки H2 внутри текста визуально ближе к телу статьи, чем к заголовку страницы, чтобы не спорить с ним за внимание. Если все уровни свести к одной паре «жирный/обычный» без разницы в размере, читатель не сможет на бегу отсканировать структуру и понять, стоит ли читать раздел целиком — а именно так большинство людей и решает, читать материал дальше или закрыть вкладку.
Сочетание шрифтов: одна пара работает лучше трёх шрифтов
Правило «не больше двух-трёх шрифтов» справедливо, но важнее не количество, а контраст ролей. Рабочая связка — гротеск (без засечек) для заголовков и текстовый шрифт с засечками для длинных абзацев, либо один шрифт с широким набором начертаний (Inter, Golos, Manrope), где иерархия строится через насыщенность — Regular, Medium, SemiBold, Bold — без подключения второй гарнитуры вообще. Такой подход снижает риск конфликта пар и упрощает поддержку макета: не нужно синхронизировать метрики двух разных шрифтов при обновлении дизайн-системы. Если всё же берёте пару, проверяйте контраст форм: два похожих гротеска рядом (например, Inter и Roboto) выглядят как ошибка, а не как осознанный выбор, потому что глаз считывает их как один шрифт с багом рендеринга.
Интерлиньяж и межбуквенное расстояние: цифры, которые стоит запомнить
Интерлиньяж (line-height) для основного текста абзацами — 140-160% от размера кегля: для текста 16px это 22-26px межстрочного расстояния. Для заголовков интерлиньяж, наоборот, сжимают до 110-120%, потому что короткие строки не нуждаются в таком же «воздухе», а слишком большой межстрочный интервал в заголовке визуально разваливает его на отдельные строки. Межбуквенное расстояние (letter-spacing, трекинг) у крупных заголовков часто немного сжимают (-1…-2%), а у капса и мелких подписей, наоборот, увеличивают (+2…+5%) — заглавные буквы без разрядки визуально слипаются и хуже читаются в мелком кегле.
Экран и печать — разные требования к одному и тому же шрифту
На экране текст читается с расстояния 40-60 см при разрешении, которое сильно варьируется между устройствами, поэтому предпочтительны шрифты с открытым внутрибуквенным пространством и простой формой — так называемые гуманистические гротески (Inter, Golos Text, SF Pro). В печати, где разрешение фиксировано и высоко, работают более тонкие засечки и мелкие детали формы, которые на низком pixel density экрана превращаются в кашу — отсюда общее правило: шрифт, который отлично смотрится на обложке книги, не обязательно подойдёт для интерфейса, и наоборот. Второе отличие — длина строки: в печати комфортны 60-75 символов на строку, на экране из-за более широких колонок эту величину стоит держать под контролем через max-width текстового блока, иначе строки растягиваются на 120+ символов и глазу тяжело возвращаться к началу следующей строки.
Частые ошибки в шрифтовой работе
Самая распространённая ошибка — использовать капс (все заглавные) для длинных заголовков: заглавные буквы одинаковой высоты убирают силуэт слова, по которому мы обычно узнаём его быстро, поэтому чтение замедляется на 10-15%. Вторая — заниженный интерлиньяж в абзацах ради экономии места по вертикали: текст визуально слипается в сплошное пятно, и читатель теряет строку при переходе к следующей. Третья — смешение шрифтов без общей логики размеров: если у двух гарнитур разная высота строчных букв (x-height) при одинаковом кегле, пара будет выглядеть неровной, даже если сами шрифты по отдельности хорошие. Типографика редко работает в отрыве от общей структуры страницы — она опирается на ту же сетку и те же принципы иерархии, что и вся композиция в дизайне, поэтому имеет смысл разбирать их вместе, а не по отдельности.
Как быстро прокачаться в типографике
Типографику проще осваивать не по одной статье, а через последовательный курс с практикой на реальных макетах — иначе термины вроде «трекинг» и «x-height» быстро забываются без применения. LearnMe строит такой план под конкретный запрос: укажите «типографика» или «основы UI-дизайна», и вы получите уроки и тесты на 10-15 минут в день с постепенным усложнением, от базовой иерархии до подбора шрифтовых пар. Заодно стоит закрепить и цветовую сторону дизайна — подбор палитры тоже входит в подобные курсы. Начните обучение на LearnMe и переведите правила интерлиньяжа и иерархии из шпаргалки в рабочую привычку.