Типографика на сайте: шрифты, размеры, контраст

Роль типографики на сайте

Типографика — это искусство оформления текста. На сайте 95% информации передаётся через текст, поэтому правильная типографика — основа хорошего веб-дизайна. Шрифт, размер, межстрочный интервал, контраст — всё это влияет на читаемость и восприятие бренда.

Плохая типографика — мелкий текст, неподходящий шрифт, недостаточные отступы — главная причина того, что посетители покидают сайт, не дочитав до конца.

Как выбрать шрифт для сайта

Типы шрифтов

• Sans-serif (без засечек) — Inter, Open Sans, Roboto, Montserrat. Стандарт для веба: чистый, современный, хорошо читается на экране
• Serif (с засечками) — Georgia, Merriweather, PT Serif. Классический, серьёзный, подходит для длинных текстов и премиальных сайтов
• Моноширинный — JetBrains Mono, Fira Code. Только для кода и технических данных
• Декоративный — только для заголовков и акцентов, ни в коем случае для основного текста

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

Максимум 2: один для заголовков, один для основного текста. Три шрифта — уже перебор. Один шрифт с разными начертаниями (Regular, Medium, Bold) часто достаточно для всего сайта.

Веб-шрифты и производительность

Каждый шрифт — это дополнительная загрузка. Один файл шрифта весит 20–100 КБ. Четыре начертания × 2 шрифта = 8 файлов = до 800 КБ. Решения:

• Используйте формат WOFF2 (самый лёгкий)
• Загружайте только нужные начертания (Regular + Bold обычно достаточно)
• Подмножество (subset): загружайте только кириллицу, если сайт на русском
• font-display: swap — текст отображается сразу системным шрифтом, потом заменяется

Размеры и пропорции

Базовые размеры

Минимальный размер основного текста — 16px (1rem). На мобильных — тоже 16px, не меньше. Типичная шкала размеров:

• H1: 36–48px (2.25–3rem)
• H2: 28–36px (1.75–2.25rem)
• H3: 22–28px (1.375–1.75rem)
• Основной текст: 16–18px (1–1.125rem)
• Мелкий текст: 14px (0.875rem) — подписи, метаданные

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

Оптимальный line-height для основного текста — 1.5–1.7. Для заголовков — 1.1–1.3. Слишком маленький интервал сливает строки, слишком большой — разрывает текст на отдельные фрагменты.

Длина строки

Идеальная длина строки — 50–75 символов (включая пробелы). Слишком длинные строки утомляют глаза, слишком короткие — заставляют постоянно переводить взгляд. На десктопе ограничивайте ширину текстового блока через max-width: 720px.

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

Контраст — это разница яркости между текстом и фоном. Стандарт WCAG AA требует минимум 4.5:1 для обычного текста. Чёрный на белом — 21:1 (максимум). Тёмно-серый (#333) на белом — 12.6:1 (отлично). Светло-серый (#999) на белом — 2.8:1 (недопустимо).

Используйте тёмно-серый (#1a1a1a или #333333) вместо чисто чёрного (#000000) — это снижает контрастность до комфортного уровня и уменьшает нагрузку на глаза при длительном чтении. Подробнее об этом — в материале про доступность сайта.

Типографическая иерархия

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

Хорошая иерархия позволяет «сканировать» страницу — читать только заголовки и понимать суть. Это важно для конверсии: 80% посетителей не читают текст целиком, а сканируют.

Типичные ошибки в типографике

• Текст меньше 16px на мобильных — нечитаем без зума
• Белый текст на ярком фоне — слепит и утомляет
• Курсив для длинных блоков — снижает скорость чтения на 10%
• ALL CAPS для абзацев — воспринимается как крик и читается на 13% медленнее
• Выравнивание по ширине (justify) — создаёт «реки» пробелов в узких колонках

Если вам нужна помощь с типографикой и дизайном сайта — свяжитесь с нами. Мы подберём шрифты, размеры и стили, которые работают именно для вашего бизнеса.