Контакт

Типографическая шкала: как выбрать размеры шрифта для сайта

Что такое типографическая шкала, восемь классических коэффициентов, одна страница в трёх шкалах, плавные размеры через clamp(), длина строки и интервал — с живыми примерами.

Дизайн-системы Обновлено

Коротко

Типографическая шкала — короткий набор размеров шрифта, построенный по одному правилу: каждый следующий размер равен предыдущему, умноженному на один и тот же коэффициент, например на 1,25. Вместо десятков случайных кеглей у проекта появляется семь-восемь ступеней: подпись, основной текст, вводный абзац, заголовки нескольких уровней. Заголовки перестают спорить друг с другом, страница получает ритм, а дизайнер и разработчик говорят на одном языке — «ступень 4», а не «где-то 38 пикселей». Коэффициент задаёт характер: маленький — спокойный и подходит интерфейсам с большим количеством текста, большой — драматичный и подходит лендингам и брендам. С clamp() ступени плавно растут вместе с экраном.

Шкала 1,25: восемь ступеней от подписи до первого экрана

Каждая ступень показана в настоящем размере. Основа — 16 px; каждая ступень вверх умножается на 1,25, вниз — делится.

  1. 661,04 px · 3,815 rem
    первый экран     Шкала держит ритм
  2. 548,83 px · 3,052 rem
    заголовок страницы     Шкала держит ритм
  3. 439,06 px · 2,441 rem
    раздел     Шкала держит ритм
  4. 331,25 px · 1,953 rem
    подраздел     Шкала держит ритм
  5. 225 px · 1,563 rem
    заголовок карточки     Шкала держит ритм
  6. 120 px · 1,25 rem
    вводный абзац     Шкала держит ритм
  7. 016 px · 1 rem
    текст     Шкала держит ритм
  8. −112,8 px · 0,8 rem
    подпись     Шкала держит ритм

Восьми ступеней хватает на целый сайт. Ступени 0–1 — для чтения, 2–3 — для заголовков карточек и подразделов, 4–6 — для разделов, страниц и первого экрана. Если макету нужен размер между двумя ступенями, это повод пересмотреть макет, а не добавлять ступень.

Восемь классических коэффициентов и их характер

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

КоэффициентНазваниеХарактерПодходит
1.067 Minor second почти ровный плотных таблиц с данными
1.125 Major second тихий админок, документации
1.2 Minor third мягкий приложений, блогов
1.25 Major third сбалансированный большинства сайтов
1.333 Perfect fourth уверенный корпоративных сайтов, медиа
1.414 Augmented fourth выразительный лендингов
1.5 Perfect fifth драматичный брендов, афиш, портфолио
1.618 Golden ratio очень контрастный одного главного заголовка

Одна страница в трёх шкалах

Один и тот же фрагмент с коэффициентами 1,125, 1,25 и 1,333: текст не меняется, меняется характер.

1,125 · Major second

Кухни на заказ

Как мы работаем

Замер, проект и сборка — одна команда отвечает за всё от первой встречи до последнего шурупа.

Срок — от трёх недель

1,25 · Major third

Кухни на заказ

Как мы работаем

Замер, проект и сборка — одна команда отвечает за всё от первой встречи до последнего шурупа.

Срок — от трёх недель

1,333 · Perfect fourth

Кухни на заказ

Как мы работаем

Замер, проект и сборка — одна команда отвечает за всё от первой встречи до последнего шурупа.

Срок — от трёх недель

Заголовок = 16 × коэффициент⁴, подзаголовок = 16 × коэффициент², подпись = 16 ÷ коэффициент.

Плавные размеры: шкала, которая растёт с экраном

Подвигайте ползунок: заголовок растёт вместе с шириной «экрана» и останавливается на пределах — без скачков между точками перелома.

Ширина экрана 760px Кегль —

clamp(1.5rem, 0.9rem + 4cqi, 3.25rem)

Кухни, которые служат десятилетиями

Заголовок растёт вместе с экраном и останавливается на заданных пределах — без скачков между медиазапросами.

На телефоне крупные ступени сжимаются: заголовок в 61 px не помещается на экран шириной 375 px. clamp() задаёт минимум, скорость роста и максимум, поэтому иерархия сохраняется, а на маленьких экранах просто мягче становится контраст между ступенями.

Шкала в коде: 2 примера

Ступени как CSS-переменные — одни и те же имена в макете и в коде.

Ступени шкалы

Размеры в rem уважают кегль, который человек выставил в браузере.

type-scale.css 
/* Шкала 1,25 от 16px: любой размер в проекте — одна из этих ступеней */
:root {
  --step--1: 0.8rem;     /* 12.8px — подписи */
  --step-0: 1rem;        /* 16px — основной текст */
  --step-1: 1.25rem;     /* 20px — вводный абзац */
  --step-2: 1.5625rem;   /* 25px — заголовок карточки */
  --step-3: 1.953rem;    /* 31.25px — подраздел */
  --step-4: 2.441rem;    /* 39px — раздел */
  --step-5: 3.052rem;    /* 48.8px — заголовок страницы */
}

body  { font-size: var(--step-0); line-height: 1.55; }
h1    { font-size: var(--step-5); line-height: 1.05; }
h2    { font-size: var(--step-4); line-height: 1.1; }
h3    { font-size: var(--step-2); line-height: 1.2; }
small { font-size: var(--step--1); }

Плавные ступени

Крупные ступени растут вместе с экраном, внутри компонента — вместе с его контейнером.

fluid.css 
/* Плавные ступени: размер растёт с экраном между двумя пределами */
:root {
  --step-4: clamp(1.75rem, 1.35rem + 1.8vw, 2.441rem);
  --step-5: clamp(2rem, 1.4rem + 2.8vw, 3.052rem);
}

/* Внутри компонента — от ширины его контейнера, а не экрана */
.card { container-type: inline-size; }
.card__title { font-size: clamp(1.25rem, 0.9rem + 4cqi, 1.953rem); }

Длина строки и межстрочный интервал

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

28 знаков — текст рвётся

Хорошая длина строки — около 65 знаков. Глаз легко находит начало следующей строки, а текст не рвётся на короткие обрывки. Когда строка слишком короткая, чтение становится прыжками; когда слишком длинная, глаз теряется на обратном пути.

≈ 65 знаков — в самый раз

Хорошая длина строки — около 65 знаков. Глаз легко находит начало следующей строки, а текст не рвётся на короткие обрывки. Когда строка слишком короткая, чтение становится прыжками; когда слишком длинная, глаз теряется на обратном пути.

100 знаков — глаз теряет строку

Хорошая длина строки — около 65 знаков. Глаз легко находит начало следующей строки, а текст не рвётся на короткие обрывки. Когда строка слишком короткая, чтение становится прыжками; когда слишком длинная, глаз теряется на обратном пути.

1,1 · тесно

Интервал между строками решает, будет ли абзац читаться как текст или как плотный кирпич. Для основного текста работает 1,5–1,6, для крупных заголовков — 1,0–1,2.

1,55 · в самый раз

Интервал между строками решает, будет ли абзац читаться как текст или как плотный кирпич. Для основного текста работает 1,5–1,6, для крупных заголовков — 1,0–1,2.

2,1 · рассыпается

Интервал между строками решает, будет ли абзац читаться как текст или как плотный кирпич. Для основного текста работает 1,5–1,6, для крупных заголовков — 1,0–1,2.

На глаз или по шкале

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

На глаз: 15, 17, 22, 23, 26 px

Мастерская

Мебель из массива под ваши размеры

Собственное производство

Проектируем, изготавливаем и собираем за один заказ — без посредников и переделок.

Рассчитать проект
Шкала 1,25: 12,8 · 16 · 20 · 39 px

Мастерская

Мебель из массива под ваши размеры

Собственное производство

Проектируем, изготавливаем и собираем за один заказ — без посредников и переделок.

Рассчитать проект

Как построить шкалу для своего проекта: 6 шагов

  1. 01

    Выбрать основу

    Размер основного текста — обычно 16–18 px для сайтов, 14–16 для плотных интерфейсов.

  2. 02

    Выбрать коэффициент

    По характеру продукта: спокойный для сервисов, контрастный для брендов.

  3. 03

    Посчитать ступени

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

  4. 04

    Дать ступеням роли

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

  5. 05

    Задать интервал для каждой ступени

    Чем крупнее кегль, тем меньше line-height: 1,55 для текста, около 1,05 для крупных заголовков.

  6. 06

    Сделать крупные ступени плавными

    clamp() для заголовков, фиксированные размеры для текста и подписей.

Частые ошибки с типографической шкалой

  1. Двадцать кеглей на одном сайте

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

  2. Соседние размеры слишком близко

    22 и 23 px выглядят как ошибка, а не как два уровня.

  3. Один интервал на всё

    1,5 разваливает крупные заголовки на отдельные строки.

  4. Десктопная шкала на телефоне

    Заголовок в 61 px превращается в столбик из отдельных слов.

  5. Размеры только в пикселях

    Сайт игнорирует людей, которые увеличили шрифт в браузере.

  6. Жирность вместо размера

    Пять насыщенностей на одном экране создают шум; хватает шкалы и двух насыщенностей.

Вопросы о типографической шкале

Что такое типографическая шкала?

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

Какой коэффициент выбрать?

1,2–1,25 для большинства сайтов и приложений; 1,333–1,5 для брендов и лендингов с крупными заголовками.

Сколько размеров нужно сайту?

Обычно семь-восемь ступеней; больше — и иерархия перестаёт читаться.

px, rem или em?

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

Меняется ли шкала на телефоне?

Крупные ступени становятся меньше через clamp(); основной текст обычно остаётся прежним.

Какая длина строки лучше всего?

Около 45–75 знаков; в CSS её удобно задать через max-width: 65ch.

Форма

Система
для продукта

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

Или пишите на [email protected]