Типографика для лендинга: шрифты, размеры, ритм

Типографика — это самое дешёвое, что можно улучшить на лендинге, и одно из самых заметных. Даже если у вас средние иллюстрации, ординарный фон и обычная сетка, но текст набран хорошо — страница выглядит «дорого». И наоборот: любой макет с плохими шрифтами читается как самоделка, независимо от того, сколько денег и времени в него вложено.

В этой статье разберём типографику по шагам: как выбрать шрифт (и почему один вместо трёх), какая шкала размеров работает на лендинге, что такое ритм и межстрочный интервал, где брать вебшрифты, чтобы это было легально и быстро. Статья дополняет разговор про дизайн и UX лендинга: фокус на буквы, а не на цвета и сетку.

Сколько шрифтов нужно

Один шрифт — норма. Два — верхний предел. Три и больше — почти всегда ошибка. Логика простая: каждый шрифт добавляет визуального «шума». Одного качественного шрифта с несколькими начертаниями (regular, medium, bold) хватает на весь лендинг: заголовки Bold, подзаголовки Medium, тело Regular. Такой подход выглядит цельно и не заставляет мозг читателя переключаться.

Если очень хочется контраста, разрешите себе пару «заголовок vs тело»: экспрессивный дисплейный шрифт для H1 и H2, спокойный гротеск или антиква для основного текста. Только с чётким правилом: заголовочный шрифт больше нигде не используется, никаких «а тут вставим для акцента». Один нарушенный принцип разбивает всю систему.

Как выбрать шрифт для лендинга

Шрифт выбирают под задачу, а не по вкусу. Три вопроса, на которые надо ответить прежде, чем открывать библиотеку. Первое: продукт «серьёзный» или «дружелюбный»? Юридическая услуга — гротеск с чёткой геометрией. Курс по йоге — мягкий гротеск или гуманистический сан-сериф. Второе: сколько текста на лендинге? Много читаемого текста — только шрифт, специально нарисованный для чтения (Manrope, Inter, Roboto, PT Root).

Третье: поддерживает ли шрифт кириллицу? Красивый Poppins на скринах из Behance перестаёт работать, как только вставляете «АБВГД». Проверьте кириллические начертания заранее: у Google Fonts это отдельная вкладка «Cyrillic». Из наших любимых с честной кириллицей — Inter, Manrope, IBM Plex, Onest, Golos Text, PT Root UI, JetBrains Mono для кода. Все бесплатны и с открытой лицензией.

Шкала размеров и модульная сетка

Хаос в размерах — типичная беда сайтов, сделанных «на глаз». H1 34px, H2 22, где-то по тексту вылезет 15, а подпись 11 — визуальный ритм рвётся. Решение — модульная шкала. Задайте базовый размер (обычно 16px для десктопа и 15–16 для мобильного) и умножайте на постоянный шаг: 1.2 (умеренный контраст), 1.25 (сбалансированный) или 1.333 (яркий).

Готовые шкалы — на type-scale.com или в базовых плагинах Figma. Пример шкалы 1.25 от 16px: 16, 20, 25, 31, 39, 49, 61 — семь размеров, покрывающих весь сайт от подписи до огромного H1. Никаких «промежуточных» 17 или 23. Ограничение — свобода: дизайнер не тратит время на «а сколько тут поставить», а верстальщик получает предсказуемый набор классов.

Ритм: межстрочный интервал и отступы

Ритм — это то, что делает текст лёгким для чтения. Определяет его не размер шрифта, а межстрочный интервал (line-height) и отступы между блоками. Для основного текста лендинга берите line-height 1.4–1.6. Для заголовков — 1.1–1.25, чем крупнее размер, тем меньше нужен интервал. Для подписей 10–14px — снова 1.4, иначе строки «слипаются».

Отступы между блоками текста — не по вкусу, а по шагу 8 или 4 пикселя. Между абзацами обычно 12–20px, между списком и следующим абзацем — 24–32px, между секциями лендинга — 80–120px на десктопе и 48–64 на мобильном. Правило одно: одни и те же виды пар «текст → следующий блок» имеют одинаковый отступ по всему лендингу. Плавающие отступы — самая частая беда «сделал по-своему».

Ширина строки и колонок

Хорошо читаемая строка — 60–75 символов, включая пробелы. Если строка длиннее, глаза устают возвращаться на новую. Если короче — постоянные переносы обрывают мысль. На десктопе это обычно колонка шириной 640–720px при 16-пиксельном шрифте. На мобильном — вся ширина экрана минус боковые отступы 16–24px. Отдельная беда — центрированные абзацы по 100 символов на full-width сайтах: глаз бросает на второй строке.

Заголовки могут быть шире — они не читаются, а «сканируются», поэтому колонка H1 в 900px нормальная. Списки — уже, как абзацы. Цитаты — на 10–20% уже основного текста, чтобы визуально выделяться. Про то, как сочетать типографику с сеткой первого блока, есть отдельная разборная статья про первый экран лендинга: те же ограничения работают и там.

Цвет текста и контраст

Абсолютно чёрный #000 на белом — сильный контраст, но глаза устают за пару минут. Замените на тёмный серый #1F2430 или #2A2E36 — контраст остаётся высоким, а чтение становится комфортным. Второстепенный текст (даты, подписи, метаданные) — светло-серый в диапазоне #6B7280 – #8A93A2. Ссылки — акцентный цвет бренда, без подчёркивания только если ссылка очевидна из контекста.

Проверяйте контраст по WCAG: для основного текста нужен коэффициент ≥ 4.5:1, для крупных заголовков ≥ 3:1. Быстрая проверка — плагин Contrast в Figma или WebAIM Contrast Checker. Если ваш «дизайнерский» серый на белом не проходит порог 4.5 — вы теряете часть аудитории с плохим монитором и повышаете отскок людей 40+. Тонкий шрифт светло-серого — самая частая трата денег на дизайн.

Где брать вебшрифты и как их подключать

Google Fonts — самый простой источник, но с двумя оговорками. В 2026 году прямая загрузка с fonts.googleapis.com у части российских пользователей идёт медленно или через капчу. Решение — скачать WOFF2-файлы шрифта и раздавать со своего домена. Второе: не подключайте пять начертаний «на всякий случай». Каждое лишнее — это 30–80 КБ трафика. Правило: чем меньше на лендинге текста, тем меньше начертаний вам нужно.

Для платных шрифтов — Type.Today, Brownfox, Contrast Foundry (много кириллицы), Adobe Fonts. Для открытых — Google Fonts, Beda Fonts, Open Foundry. Обязательно проверяйте лицензию: не все «бесплатные» шрифты можно использовать в коммерции, а нарушение может обернуться претензией от правообладателя. Для крупных проектов проще купить лицензию за 3–10 тысяч рублей, чем потом объясняться.

Мобильная типографика: чем отличается

Основной размер тела на мобильном — не 14, а 15–16px. Ниже 15 у Google и Apple триггерятся собственные «читаемые режимы» и текст принудительно масштабируется, что ломает вёрстку. Заголовки на мобильном меньше десктопных: H1 обычно 28–36px, H2 22–28. Иначе строки лезут на две-три, а «крупный красивый заголовок» превращается в кашу.

Отдельная штука — fluid typography, плавные размеры. Через CSS clamp(): базовый размер, минимум, максимум. Пример: font-size: clamp(28px, 5vw, 44px) — на маленьком экране 28px, на большом 44, между ними плавно. Так один блок кода закрывает и десктоп, и планшет, и мобильный, без десяти медиа-запросов. Это сильно упрощает вёрстку и делает лендинг адаптивным по умолчанию.

Топ-8 ошибок типографики лендинга

1. 1Три шрифта и больше — визуальный хаос, страница выглядит любительской.
2. 2Слишком мелкий основной текст (12–14px) — читатели с плохим зрением уходят.
3. 3Тесный межстрочный интервал 1.0–1.2 в теле — строки «слипаются».
4. 4Слишком широкая колонка 100+ символов — глаз теряется на новой строке.
5. 5Заголовок H1 такого же размера, как H2 — иерархия сломана.
6. 6Светло-серый текст #A0A0A0 на белом — не проходит WCAG, читается с усилием.
7. 7Разные отступы между секциями — ритм рвётся, страница «шатается».
8. 8Отсутствие кириллицы у выбранного шрифта — «АБВГД» отваливается на PT Sans.

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

Пример шкалы для лендинга на Inter

Возьмём боевую шкалу под лендинг услуги. Шрифт: Inter, начертания 400 и 700. Базовый размер тела: 16px, шаг 1.25. Получается: подпись 13, тело 16, лид 20, H4 25, H3 31, H2 39, H1 49 на десктопе. На мобильном — H1 32, H2 26, H3 22, тело 16, подпись 13. Line-height: тело 1.55, заголовки 1.15. Основной цвет текста #1F2430, второстепенный #6B7280.

Отступы: между абзацами 16px, между разделами 96px на десктопе и 56px на мобильном, между заголовком и следующим абзацем 12px. Ссылки — акцентный цвет бренда, hover c нижним подчёркиванием. Ширина основной колонки 680px, максимум 720. Такая шкала укладывается в один CSS-файл на 40 строк и покрывает 90% нужд типичного лендинга под услугу или продукт. Её можно взять как стартовую и адаптировать под свой бренд.

Микроправила, которые редко соблюдают

Есть набор мелких вещей, которые никак не заметны на скринах, но заметно улучшают ощущение от текста. Первое — неразрывные пробелы перед короткими словами: «на», «в», «и», «но», «а», чтобы они не улетали в конец строки. В HTML это  , в редакторах — сочетание Alt+пробел. Второе — правильные кавычки: «ёлочки» на кириллице и “curly” на латинице, никаких прямых "кавычек" из клавиатуры.

Третье — длинное тире вместо дефиса. В русском между словами ставится «—», а не «-». Четвёртое — разрядка цифр: не 12000, а 12 000 или 12.000 в зависимости от локали. Пятое — правильные знаки процента и параграфа: «10%» без пробела в русском (пробел допустим, но не обязателен), «§» с пробелом перед числом. Всё это делают плагины Typograf для VS Code, Figma и WordPress — час установки, годы аккуратного текста.

Доступность типографики

Типографика — это не только эстетика, но и вопрос доступности. Часть пользователей меняет системный размер шрифта в браузере до 125% или 150%. Если у вас размеры зашиты в px без rem или em — вёрстка сломается. Правильный подход: базовый размер тела через rem, все производные — тоже. Тогда пользователь с любым системным зумом получит нормально масштабированную страницу без разъехавшихся блоков.

Скринридеры и голосовые ассистенты читают текст в порядке DOM, а не в порядке визуального макета. Поэтому не используйте «декоративные» переносы через <br> вместо нормальной вёрстки: они порвут смысл. Явно ставьте семантические теги: h1 для одного заголовка страницы, h2 для секций, p для абзацев, ul/ol для списков. Это одновременно и SEO-плюс: поисковые роботы ориентируются на ту же семантику. Про то, как это сочетать с SEO для лендинга, у нас есть отдельная статья.

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

Сколько шрифтов должно быть на лендинге?

Один — норма, два — верхний предел (заголовок + тело). Три и больше — визуальный шум и ощущение «самодельщины». Одного качественного шрифта с 3 начертаниями хватает на весь сайт.

Какой минимальный размер основного текста на лендинге?

16px на десктопе, 15–16px на мобильном. Ниже 15px мобильные системы включают собственный масштаб и ломают вёрстку. 12–14px — читается с усилием и снижает время на странице.

Как задать шкалу размеров?

Через модульную сетку: базовый 16px и постоянный шаг 1.2, 1.25 или 1.333. Готовые шкалы — на type-scale.com. Всё, что «на глаз», рано или поздно приводит к хаосу и сломанной иерархии.

Какой межстрочный интервал использовать?

Для основного текста line-height 1.4–1.6. Для заголовков — 1.1–1.25 (чем крупнее размер, тем меньше интервал). Для подписей 10–14px — снова 1.4, иначе строки «слипаются».

Где взять хороший вебшрифт с кириллицей бесплатно?

Google Fonts (Inter, Manrope, IBM Plex, Roboto), Open Foundry, Beda Fonts. Скачивайте WOFF2 и раздавайте со своего домена — быстрее и стабильнее прямой подгрузки с fonts.googleapis.com.