Типография для лендинга: шрифты, размеры, межстрочный интервал

Почему шрифт не просто буквы

Шрифт на лендинге это инструмент коммуникации. Неправильный шрифт режет конверсию тихо: пользователь не пишет “у вас плохой шрифт, ухожу”, он просто быстрее устаёт и закрывает вкладку.

Правильная типография делает лендинг читаемым с первой секунды. Неправильная создаёт микро-трение: мелкие буквы, слишком плотные строки, излишне декоративный шрифт. Пользователь прочитает в таком виде меньше, значит меньше точек касания с оффером, значит хуже конверсия.

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

Сколько шрифтов использовать

Оптимум — 1 или 2 шрифта на весь лендинг. Три — редко оправдано. Больше — практически всегда ошибка.

Один шрифт

Один шрифт с разными начертаниями (Regular, Medium, Bold) работает для 70% лендингов. Пример: Inter. Можно собрать всю иерархию заголовков и текста из одного семейства.

Плюсы:

• Максимальная консистентность.
• Быстрее загружается (меньше файлов).
• Сложнее ошибиться в сочетаниях.

Минусы:

• Менее выразительный дизайн.
• Не подойдёт для премиум-ниш, где нужны контрасты.

Два шрифта

Классическая пара: serif для заголовков + sans-serif для текста. Или наоборот. Даёт контраст и подчёркивает иерархию.

Примеры пар:

• Playfair Display (заголовки) + Inter (текст).
• Merriweather (заголовки) + Lato (текст).
• Montserrat (заголовки) + Open Sans (текст).

Плюсы:

• Выразительный дизайн.
• Чёткая иерархия заголовков и текста.

Минусы:

• Две загрузки вместо одной.
• Сложнее подобрать гармоничную пару.

Какие шрифты использовать в 2026 году

Рабочие гротески (sans-serif)

• Inter — стандарт для веба, читаемый, многочисленные начертания.
• Geist — новинка от Vercel, очень чистый.
• Manrope — универсальный, хорошо смотрится в заголовках и тексте.
• Golos — от Яндекса, хорошо для русскоязычных проектов.

Рабочие антиквы (serif)

• Merriweather — читаемый serif, хорош для текста и заголовков.
• Playfair Display — выразительный, для заголовков в премиум.
• Source Serif — нейтральный serif для текста.

Для акцентов и заголовков

• Unbounded — геометрический, хорош для очень крупных заголовков.
• Space Grotesk — с характером, подходит для стартапов.

Чего избегать в 2026 году

• Comic Sans для серьёзных проектов.
• Papyrus, Impact для чего угодно, кроме мемов.
• Слишком тонкие шрифты (Thin, ExtraLight) в основном тексте — плохо читаются на слабых экранах.
• Рукописные шрифты для всей страницы — утомляют глаз.

Размеры шрифтов

Мобильный экран

• Основной текст: 16–18 пикселей.
• Заголовки второго уровня (h2): 24–32 пикселей.
• Заголовок первого экрана (h1): 32–48 пикселей.
• Кнопки: 16–18 пикселей.
• Мелкий текст (сноски, подписи): 14 пикселей минимум.

Десктопный экран

• Основной текст: 17–20 пикселей (больше чем на мобильном, потому что расстояние до глаз больше).
• Заголовки второго уровня: 32–40 пикселей.
• Заголовок первого экрана: 48–72 пикселя.
• Кнопки: 16–18 пикселей.
• Мелкий текст: 14–15 пикселей.

Правило иерархии

Разница между соседними уровнями должна быть заметной: минимум 30% по размеру.

Пример плохой иерархии: h1 = 32px, h2 = 28px, h3 = 26px. Уровни сливаются. Пример хорошей: h1 = 48px, h2 = 32px, h3 = 22px. Ясная иерархия.

Межстрочный интервал (line-height)

Межстрочный интервал определяет, насколько плотно прижаты строки. Слишком плотно — трудно читать. Слишком свободно — разваливается структура.

Рабочие значения

• Основной текст: 1,5–1,7 (150–170% от размера шрифта).
• Короткие заголовки: 1,1–1,3.
• Длинные заголовки (более 1 строки): 1,2–1,4.
• Кнопки: 1,0–1,2.

Меньше 1,3 для текста — плохо читается. Больше 1,8 — текст “плавает”, сложно следить за строкой.

Длина строки

Читаемая длина строки — 45–75 символов. Короче — глаз слишком часто прыгает. Длиннее — трудно найти начало следующей строки.

На десктопе это ширина около 600–800 пикселей для текстовых блоков. Если ваш блок шире, лучше разбить на колонки или уменьшить размер шрифта.

На мобильном длина строки обычно фиксирована шириной экрана.

Контраст текста с фоном

Минимальное соотношение контраста (WCAG AA): 4,5:1 для основного текста, 3:1 для крупных заголовков. Проверяется через WebAIM Contrast Checker.

Типовые ошибки

• Светло-серый текст (#999) на белом. Контраст 2,8:1 — не читается.
• Светло-синий на голубом. Контраст 2,1:1 — не читается на солнце.
• Белый текст на жёлтом фоне. Контраст около 1,2:1 — не читается.

Рабочие пары

• Чёрный текст (#222) на белом (#fff). Контраст 15:1 — отлично.
• Тёмно-серый (#333) на светло-сером (#f5f5f5). Контраст 12:1.
• Белый (#fff) на глубоком синем (#1a4dff). Контраст около 8:1.

Self-host шрифтов в РФ

В 2024–2025 годах Google Fonts начали работать нестабильно для российских пользователей. Шрифты подгружаются медленно, иногда не загружаются вовсе. Для РФ-проектов рекомендуется self-host.

Как сделать

1. Скачать шрифт с Fontsource, Google Fonts (экспорт), Manrope, Inter с их официальных источников.
2. Положить файлы в папку проекта (например, /fonts).
3. Подключить через @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

4. Использовать font-display: swap — текст показывается системным шрифтом до загрузки кастомного.
5. Грузить только нужные начертания и подмножества (latin + cyrillic).

Self-host экономит 300–500 мс загрузки и убирает зависимость от внешних CDN.

Таблица: типовой стек типографии

Этот стек работает для 80% проектов без дополнительной настройки.

Чек-лист: проверка типографии

1. Не больше 2 шрифтов на лендинге.
2. Шрифты self-host (не Google Fonts).
3. Основной текст 16+ пикселей на мобильном.
4. Заголовок первого экрана 32+ пикселей на мобильном.
5. Контрастность текста 4,5:1 или выше.
6. Межстрочный интервал основного текста 1,5+.
7. Иерархия заголовков чёткая (разница 30%+ по размеру).
8. Длина строки основного текста 45–75 символов.
9. font-display: swap включён.
10. Проверено в dark mode (если поддерживается).

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

• Используют 4–5 шрифтов “для разнообразия”. Лендинг превращается в цирк.
• Берут модный, но нечитаемый шрифт для основного текста.
• Делают основной текст 14 пикселей на мобильном. Слишком мелко.
• Делают межстрочный интервал 1,2 для длинного текста. Слишком плотно.
• Ставят светло-серый текст на белом для “минимализма”. Не читается.
• Забывают про кириллицу. Выбирают шрифт, который поддерживает только латиницу.
• Грузят все начертания шрифта (Thin, Light, Regular, Medium, Semibold, Bold, ExtraBold). Тяжёлый вес.

Хорошая типография незаметна. Пользователь просто читает и усваивает информацию. Плохая типография заметна сразу: “что это написано, как читать”. Если пользователь задумывается о шрифте — это плохо.

Короткий итог

Типография — основа читаемости лендинга. Неправильная типография тихо режет конверсию через накопительное утомление пользователя.

Базовый рецепт: один или два self-hosted шрифта, размер основного текста 16+ пикселей, межстрочный интервал 1,5, контрастность 4,5:1 минимум, чёткая иерархия заголовков.

Если лендинг долго не читается или выглядит “не очень”, часто проблема именно в типографии. Поменяйте шрифт на Inter, размеры по таблице выше, и в 80% случаев лендинг станет смотреться намного лучше.