Содержание · 8
Как построить типографическую шкалу, какие значения line-height работают, зачем нужен clamp и почему на мобильном нельзя просто уменьшить всё пропорционально.
Шкала вместо случайных чисел
Типографическая шкала — это набор размеров, связанных общим коэффициентом. Она избавляет от вопроса «а этот заголовок какой сделать» и делает иерархию очевидной.
Распространённые коэффициенты: 1,25 (мажорная терция) для интерфейсов, 1,333 (кварта) для контентных сайтов, 1,5 и выше — для редакционных проектов с большим контрастом.
Интерлиньяж зависит от кегля
Общее правило: чем крупнее кегль, тем меньше относительный интерлиньяж. Для основного текста комфортно 1,6–1,75; для заголовков — 1,0–1,2; для дисплейных размеров — 0,84–0,95.
Единый line-height на весь сайт — типичная ошибка: заголовок с интерлиньяжем 1,5 выглядит развалившимся на строки.
- Тело текста: 1,6–1,75.
- Лид и вводка: 1,4–1,5.
- H2–H3: 1,1–1,2.
- H1 и дисплей: 0,85–1,0.
- Метаданные и подписи: 1,2–1,45.
Трекинг
Крупный кегль требует отрицательного трекинга: на 64 пикселях межбуквенные пробелы, рассчитанные для 16, выглядят разреженными. Ориентир: −0,02em на уровне H2 и до −0,045em на дисплейных размерах.
Обратная ситуация — прописные буквы и мелкие метки: там трекинг положительный, от +0,06em до +0,12em, иначе капс читается как сплошная стена.
Адаптив через clamp
Функция clamp позволяет задать минимум, предпочтительный размер в vw и максимум одной строкой — без медиазапросов. Это стало стандартом для заголовков.
Важная деталь: минимум обязателен. Размер, заданный только в vw, на маленьком экране становится нечитаемо мелким, а на большом — гигантским.
Шкала важнее отдельных значений: размеры, выведенные из одного шага, складываются в систему, набранные на глаз — в набор исключений.
Кириллица в вебе
Для русского языка есть дополнительные требования: неразрывные пробелы после предлогов и союзов, правильные кавычки-ёлочки, тире вместо дефиса, отсутствие висячих однобуквенных слов в конце строки.
Всё это заметно влияет на восприятие качества текста, но почти никогда не делается автоматически — приходится закладывать обработку на этапе рендера.
Как считается типографическая шкала
Шкала — это не список размеров, а один шаг, из которого они получаются. Берётся базовый кегль (обычно 16–18 пикселей для основного текста) и множитель: 1,2 даёт плотную шкалу для интерфейсов, 1,25 — универсальную, 1,333 и выше — контрастную, пригодную для журнальной вёрстки. Каждый следующий размер получается умножением предыдущего, и в результате между уровнями появляется одинаковое отношение, а не случайная разница.
Практическая польза от этого не эстетическая, а рабочая: любой новый размер выводится из шага, а не подбирается на глаз, и вёрстка не обрастает исключениями. Значения округляют до целых пикселей только на самых мелких ступенях — на крупных дробная часть незаметна и мешает меньше, чем сбитое отношение.
Интерлиньяж, мера и clamp
- Межстрочное расстояние задаётся числом без единиц: тогда оно наследуется пропорционально, а не абсолютной величиной родителя.
- Для основного текста рабочий диапазон — 1,5–1,7; для крупных заголовков — 1,05–1,2: чем крупнее кегль, тем меньше нужен разгон.
- Мера строки задаётся в
chилиrem, а не процентами от окна: 60–75 знаков для латиницы, 55–70 для кириллицы. clamp()заменяет три медиазапроса одной строкой и даёт непрерывный рост, а не ступеньки в точках перелома.- У
clamp()обязательно должен быть верхний предел: без него заголовок на широком экране вырастает до нечитаемого.
Что в итоге
Веб-типографика держится на трёх решениях: шкала с единым коэффициентом, интерлиньяж, зависящий от кегля, и адаптив через clamp.
Для кириллицы добавьте микротипографику — неразрывные пробелы и правильные знаки. Это дешевле любого редизайна и заметно сразу.
Коротко
- Сколько шрифтовых файлов допустимо грузить?
- Обычно два-три начертания: каждое — отдельный файл в несколько десятков килобайт. Вариативный шрифт закрывает весь диапазон одним файлом и часто оказывается легче трёх статических.
- Как избежать скачка текста при загрузке?
- Задать
font-display: swapи подобрать запасной системный шрифт с близкими метриками. Тогда текст виден сразу, а подмена не сдвигает вёрстку на пол-экрана.
Скорость и дизайн
Core Web Vitals ломаются не в коде, а в макете. Разбираем, какие дизайнерские решения дороже всего обходятся по производительности и чем их заменить.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…