Разработка кастомной типографики сайта
Типографика — не выбор красивого шрифта. Это система: шрифт, размерная шкала, межстрочное расстояние, трекинг (letter-spacing), ограничение ширины строки. Плохая типографика не делает текст «некрасивым» — она делает его трудночитаемым, и пользователи уходят, не отдавая себе отчёт в причине.
Выбор шрифта
Системные шрифты (-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) — самый быстрый вариант: нет загрузки, нет FOUT (Flash of Unstyled Text). Подходит для продуктового UI, где шрифт не является частью бренда.
Google Fonts — бесплатно, большой выбор, CDN. Минус: DNS-запрос к внешнему домену. Решение: self-hosting через @fontsource (npm-пакеты для каждого шрифта) или скачать шрифт и подключить через @font-face.
Коммерческие шрифты (Klim Type, Hoefler & Co, FontShop) — платно, уникально, часто лицензия на веб — отдельный тип. Проверять webfont лицензию обязательно: desktop-лицензия для шрифта не означает право использования на веб.
Для выбора шрифта UI:
- Гротески (sans-serif): Inter, Geist, IBM Plex Sans, Manrope, Plus Jakarta Sans
- Серифные: Georgia (системный), Playfair Display (Google), Lora, Source Serif 4
- Monospace для кода: JetBrains Mono, Fira Code, IBM Plex Mono
Один-два шрифта на проект — правило. Три и более — только с чётким разграничением ролей.
Размерная шкала (Type Scale)
Размеры не произвольные числа, а пропорциональная шкала. Популярные базы:
Modular Scale с ratio 1.25 (Major Third): 12 → 15 → 19 → 24 → 30 → 38 → 48 → 60px
Tailwind CSS (по умолчанию):
xs:12, sm:14, base:16, lg:18, xl:20, 2xl:24, 3xl:30, 4xl:36, 5xl:48, 6xl:60
Для большинства проектов достаточно 6–8 ступеней. Важнее не количество размеров, а последовательное применение: один размер — одна роль.
Межстрочное расстояние (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-элементы (кнопки, badge): 1.0–1.25
Строка шире 70–75 символов читается хуже: взгляд теряет начало следующей строки. max-width: 65ch на текстовых блоках — хорошая практика.
Трекинг (Letter Spacing)
Основной текст: 0 или −0.01em (чуть сжать Inter и похожие шрифты — они оптимизированы под крупные размеры). Заголовки крупные: от −0.02em до −0.04em — крупный текст «разваливается» без отрицательного трекинга. All-caps labels: +0.05em–+0.1em — капитель без трекинга читается плохо.
Адаптивная типографика
На мобильных устройствах заголовки уменьшают. Варианты реализации:
Fluid typography (CSS clamp):
font-size: clamp(2rem, 5vw + 1rem, 4rem);
Размер плавно изменяется между минимальным и максимальным значением.
Breakpoint-based — проще, предсказуемо:
- Mobile: H1 = 32px, H2 = 24px
- Desktop: H1 = 56px, H2 = 40px
В Figma — два компонента Typography Scale или использование Variables для font-size.
Сроки
Разработка типографической системы (выбор и подключение шрифта, size scale, line-height, letter-spacing, адаптив, Figma Text Styles) — 2–3 дня: исследование и утверждение шрифта, построение шкалы, создание Text Styles в Figma, спецификация для разработки.