Разработка кастомной типографики сайта
Часто клиенты приходят с уже свёрстанными проектами, где шрифт выбран «на глаз», строка тянется на 120 символов, а заголовки визуально «проваливаются» из-за неправильного межстрочного интервала. Читаемость страдает, метрики Core Web Vitals (LCP, CLS) ухудшаются, пользователи не задерживаются на странице. Мы решаем эту проблему системно: начиная с аудита текущей типографики и заканчивая готовой спецификацией для фронтенд-разработчика. Наш подход — не просто подобрать красивый шрифт, а построить целостную систему, которая работает на любом устройстве.
Что такое кастомная типографика и зачем она нужна?
Типографическая система — это не просто шрифт. Это набор правил: шрифтовая пара (один-два шрифта), модульная размерная шкала, межстрочные интервалы, трекинг, адаптивные модификаторы и ограничение ширины строки. Каждый параметр влияет на читаемость и общее восприятие. Согласно Material Design, оптимальная длина строки — 65 символов, поэтому мы используем max-width: 65ch на текстовых блоках. Правильно настроенная типографика снижает показатель отказов на 15% и улучшает время на странице.
Как подобрать шрифты для сайта?
Системные шрифты (-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) — самый быстрый вариант: нет загрузки, нет FOUT. Подходит для утилитарных интерфейсов без брендовой типографики.
Google Fonts — бесплатный, большой выбор, но требует DNS-запроса к внешнему домену. Self-hosting через @fontsource убирает эту задержку и улучшает TTFB в 2 раза по сравнению с CDN.
Коммерческие шрифты (Klim Type, Hoefler & Co) — платно, уникально. Обязательно проверять webfont-лицензию; desktop-лицензия не даёт права на веб.
Для выбора шрифта UI мы рекомендуем:
- Гротески: Inter, Geist, IBM Plex Sans, Manrope
- Серифные: Georgia, Playfair Display, Lora
- Моноширинные для кода: JetBrains Mono, Fira Code
Один-два шрифта на проект — правило. Три — только с чётким разделением ролей (заголовки, текст, акценты).
| Источник | Скорость загрузки | Уникальность | Стоимость |
|---|---|---|---|
| Системные шрифты | Мгновенно | Низкая | Бесплатно |
| Google Fonts (CDN) | Средняя (доп. DNS) | Средняя | Бесплатно |
| Self-hosted @fontsource | Высокая | Средняя | Бесплатно |
| Коммерческие шрифты | Зависит от хостинга | Высокая | Платно |
Как строится размерная шкала?
Размеры — не случайные числа, а пропорциональная шкала. Модульная шкала с ratio 1.25 (Major Third) даёт ступени: 12 → 15 → 19 → 24 → 30 → 38 → 48 → 60px. Tailwind CSS использует более дробную шкалу. Для большинства проектов достаточно 6–8 ступеней. Важнее последовательность: один размер — одна роль.
Пример таблицы размеров для типового проекта:
| Уровень | Размер (px) | Line-height |
|---|---|---|
| H1 | 48 | 1.1 |
| H2 | 36 | 1.2 |
| H3 | 24 | 1.3 |
| Body | 16 | 1.5 |
| Small | 13 | 1.4 |
Межстрочное расстояние (Line Height)
Рекомендованные коэффициенты:
- Заголовки (40px+): 1.1–1.2
- Подзаголовки (24–36px): 1.2–1.3
- Основной текст (16–18px): 1.5–1.6
- Мелкий текст (12–14px): 1.4–1.5
- UI-элементы: 1.0–1.25
Трекинг (Letter Spacing)
Основной текст: 0 или −0.01em (чуть сжать Inter). Крупные заголовки: от −0.02em до −0.04em. All-caps labels: +0.05em–+0.1em.
Адаптивная типографика
На мобильных заголовки уменьшают. Два подхода: Fluid typography с clamp() — размер плавно изменяется между min и max. Пример:
font-size: clamp(2rem, 5vw + 1rem, 4rem); Шаги реализации:
- Определяем минимальный и максимальный viewport.
- Выбираем минимальный и максимальный font-size.
- Рассчитываем slope и intercept.
- Записываем clamp().
Breakpoint-based — проще: на мобильном H1=32px, на десктопе 56px. В Figma создаём Text Styles для каждого уровня, используем Variables для font-size.
Пример расчёта модульной шкалы
Базовый размер 16px, ratio 1.25. Получаем: 16, 20, 25, 31.25, 39.06, 48.83, 61.04px. Округляем до целых.Что входит в работу
Наша кастомная разработка типографики включает:
- Аудит текущих шрифтов и читаемости.
- Подбор шрифтовой пары под бренд.
- Построение модульной шкалы с адаптацией.
- Настройка межстрочных интервалов и трекинга.
- Создание Text Styles в Figma.
- Подготовка спецификации для вёрстки (CSS или CSS-переменные).
- Интеграция в проект, тестирование в мобильных и десктопных разрешениях.
Сроки и результат
Разработка системы занимает 2–3 дня под ключ. Мы имеем 5 лет опыта и более 30 проектов с кастомной типографикой. Свяжитесь с нами, чтобы оценить ваш проект — мы предложим решение под ваши задачи. Получите консультацию по выбору шрифтов для вашего проекта — это бесплатно. Закажите разработку типографической системы, чтобы ваш сайт выглядел профессионально и читался с удовольствием.