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

Рабочая типография для лендинга - это один-два шрифта, основной текст от 16 пикселей на мобильном, межстрочный интервал 1,5-1,7 и контраст с фоном не ниже 4,5:1. Заголовки крупнее соседнего уровня минимум на 30%, длина строки держится в 45-75 символов. Эти пять параметров дают читаемый лендинг без отдельного дизайнера-типографа.

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

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

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

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

Сколько шрифтов использовать на лендинге?

Оптимум - 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. Смещение вёрстки из-за поздней подгрузки шрифта входит в метрику CLS, разбор которой есть в документации web.dev.

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

Этот стек работает для 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). Тяжёлый вес.

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

Частые вопросы

Можно ли оставить Google Fonts, если сайт не только для России?

Можно. Проблема нестабильной загрузки актуальна для аудитории в РФ, где домены Google периодически недоступны. Если основной трафик из других стран, Google Fonts работают штатно. Для смешанной аудитории надёжнее self-host: он одинаково быстрый везде.

Какой шрифт лучше подходит для русскоязычного текста?

Смотрите на поддержку кириллицы у конкретного начертания, не только у семейства целиком. Inter, Manrope и Golos покрывают кириллицу полностью во всех начертаниях. У части модных шрифтов кириллица есть только в Regular, и жирный текст переключается на системный шрифт.

Что если дизайнер настаивает на трёх и более шрифтах?

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

Как быстро понять, что шрифт слишком мелкий?

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

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

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

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

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