Основные принципы выбора размера

1. Иерархия размеров

Заголовки делают в $1,2–2$ раза больше основного текста. Распространённый вариант — множитель $1,5$:

если основной текст — $16\text{px}$, заголовок — $24\text{px}$;

если основной текст — $18\text{px}$, заголовок — $27\text{px}$.

2. Контраст и читаемость

Крупный шрифт должен:

чётко выделяться на фоне;

сохранять читаемость даже при сложных фонах (если фон яркий или с рисунком, увеличьте размер ещё на $10–20\%$);

иметь достаточный контраст цвета (минимум $4,5:1$ для обычного текста и $3:1$ для крупного).

3. Длина строки

Оптимальная длина строки для крупного текста — $45–75$ символов (включая пробелы). Если строка длиннее, увеличьте межстрочный интервал или уменьшите кегль.

4. Межстрочный интервал (интерлиньяж)

Для крупного текста интервал должен быть $120–150\%$ от размера шрифта:

при размере $36\text{px}$ интервал — $43–54\text{px}$;

при размере $72\text{px}$ интервал — $86–108\text{px}$.

Конкретные рекомендации по размерам

Для веб‑дизайна (экраны):

крупные заголовки на лендингах: $48–96\text{px}$;

подзаголовки: $32–48\text{px}$;

акцентные фразы/цитаты: $36–60\text{px}$;

текст на кнопках: минимум $14–16\text{px}$.

Для печатных материалов:

плакаты и билборды (видны издалека): $72–200+\text{pt}$ для заголовков;

брошюры и буклеты: $24–36\text{pt}$ для главных заголовков;

обложки книг/журналов: $36–72\text{pt}$.

Для презентаций:

заголовки слайдов: $32–48\text{pt}$;

ключевые тезисы: $24–36\text{pt}$.

Для мобильных интерфейсов:

главные заголовки: $26–34\text{sp}$;

подзаголовки экранов: $20–24\text{sp}$.

Учёт контекста и носителя

1. Расстояние до зрителя

Чем дальше зритель, тем крупнее должен быть текст:

для билборда на трассе: минимум $72\text{pt}$, часто $100–200\text{pt}$;

для постера в комнате: $36–48\text{pt}$;

для экрана компьютера: $24–48\text{px}$;

для смартфона: $20–36\text{sp}$.

2. Тип шрифта

Разные шрифты одного кегля визуально отличаются:

шрифты с высокой x‑height (высота строчных букв) выглядят крупнее;

акцидентные шрифты (декоративные) часто сбалансированы для крупных размеров;

шрифты с засечками могут требовать чуть большего размера для читаемости.

3. Аудитория

Учитывайте особенности целевой группы:

для детей и пожилых людей увеличивайте размер на $10–20\%$;

для людей с ослабленным зрением соблюдайте минимальные стандарты WCAG.

Практические шаги для выбора размера

1. Определите цель текста. 

2. Что важнее: эмоция или читаемость? На лендингах и афишах можно делать очень крупные заголовки ($96–120\text{px}$), в статьях важнее баланс.

3. Выберите базовый размер. 

4. Начните с основного текста (например, $16–18\text{px}$ для веба), затем рассчитайте заголовки через множитель.

5. Проверьте длину строки. 

6. Если строка содержит больше $75$ символов, увеличьте кегль или сократите текст.

7. Настройте интерлиньяж. 

8. Установите интервал $120–150\%$ от размера шрифта.

9. Протестируйте на реальных устройствах.

10.  Проверьте, как текст выглядит:
11. на десктопе;на планшете;на смартфоне; при печати (если применимо).

12. Получите обратную связь.

13.  Покажите макет нескольким людям и спросите, легко ли читать текст, не теряется ли смысл.

14. Скорректируйте при необходимости.

15.  Возможно, придётся:увеличить размер на $5–10\%$, если текст плохо читается; уменьшить, если он «давит» на дизайн; изменить интерлиньяж или кернинг.

Частые ошибки

Слишком мелкий текст даже для крупной типографики (меньше $24\text{px}$ на вебе редко работает как «крупный»).

Чрезмерно большой текст, который занимает больше $50\%$ площади экрана/страницы.

Игнорирование интерлиньяжа — плотный крупный текст трудно читать.

Плохой контраст — светлый текст на светлом фоне или тёмный на тёмном.

Отсутствие иерархии — когда подзаголовки почти такого же размера, как заголовки.