Типографика в веб-дизайне — руководство

Типографика — 90% веб-дизайна. Правильно подобранные шрифты делают сайт профессиональным и удобным.

Выбор шрифтов

• Не более 2 гарнитур на сайт (заголовки + текст)
• Не более 3 начертаний (regular, medium, bold)
• Для русского текста: Inter, Golos Text, Onest, Manrope, Montserrat
• Для акцентов: Playfair Display, Cormorant, Unbounded

Иерархия

• H1: 36–48 px (mobile: 28–32 px)
• H2: 28–36 px (mobile: 24–28 px)
• H3: 22–28 px (mobile: 20–22 px)
• Body: 16–18 px (mobile: 16 px)
• Small: 14 px

Читаемость

• Межстрочный интервал: 1.5–1.7 для body
• Длина строки: 60–75 символов (max-width: 700 px)
• Контраст: минимум 4.5:1 для текста, 3:1 для крупного
• Выравнивание: по левому краю (не по центру для абзацев)

Веб-шрифты

• Формат: WOFF2 (сжатие на 30% лучше WOFF)
• Подключение: font-display: swap
• Предзагрузка: preload для критических шрифтов
• Fallback: системный стек на время загрузки

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

• Слишком мелкий текст (меньше 14 px)
• Капс в длинных абзацах
• Курсив для основного текста
• Более 3 цветов текста на странице

В наших проектах типографика закладывается на этапе UI-кита и контролируется на всех страницах.