Разработка кастомной типографики сайта: шрифты, шкала, адаптив

Разработка кастомной типографики сайта

Часто клиенты приходят с уже свёрстанными проектами, где шрифт выбран «на глаз», строка тянется на 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

Один-два шрифта на проект — правило. Три — только с чётким разделением ролей (заголовки, текст, акценты).

Как строится размерная шкала?

Размеры — не случайные числа, а пропорциональная шкала. Модульная шкала с ratio 1.25 (Major Third) даёт ступени: 12 → 15 → 19 → 24 → 30 → 38 → 48 → 60px. Tailwind CSS использует более дробную шкалу. Для большинства проектов достаточно 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-элементы: 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);

Шаги реализации:

1. Определяем минимальный и максимальный viewport.
2. Выбираем минимальный и максимальный font-size.
3. Рассчитываем slope и intercept.
4. Записываем clamp().

Breakpoint-based — проще: на мобильном H1=32px, на десктопе 56px.

В Figma создаём Text Styles для каждого уровня, используем Variables для font-size.

Что входит в работу

Наша кастомная разработка типографики включает:

• Аудит текущих шрифтов и читаемости.
• Подбор шрифтовой пары под бренд.
• Построение модульной шкалы с адаптацией.
• Настройка межстрочных интервалов и трекинга.
• Создание Text Styles в Figma.
• Подготовка спецификации для вёрстки (CSS или CSS-переменные).
• Интеграция в проект, тестирование в мобильных и десктопных разрешениях.

Сроки и результат

Разработка системы занимает 2–3 дня под ключ. Мы имеем 5 лет опыта и более 30 проектов с кастомной типографикой. Свяжитесь с нами, чтобы оценить ваш проект — мы предложим решение под ваши задачи. Получите консультацию по выбору шрифтов для вашего проекта — это бесплатно. Закажите разработку типографической системы, чтобы ваш сайт выглядел профессионально и читался с удовольствием.

Почему дизайн без токенов ломает код, и как мы это чиним

Мы перестраиваем процесс UX/UI так, чтобы дизайн и код не расходились. Наш опыт — 5 лет на рынке, 120+ реализованных проектов в вебе и мобильных приложениях. Работаем по договору с фиксированной гарантией сроков. Часто к нам приходят с макетами, которые разработчики получают за два дня до спринта: 80 фреймов, половина без мобильных состояний, кнопки не компоненты, цвета захардкожены hex-значениями. Вёрстка превращается в угадайку, а поддержка UI через три месяца требует полного рефакторинга. Дизайн, который работает в продакшене, строится на системе токенов и компонентов — и мы это внедряем с первого спринта.

Как Figma превращается в инженерный инструмент

Figma — не просто «место, где рисуют». Это среда, из которой разработчик получает точные значения без звонков дизайнеру. Мы используем Design Tokens — единые переменные для цветов, отступов, радиусов. Они экспортируются напрямую в CSS custom properties или Tailwind config. Например, color/primary/500, spacing/md, radius/button. Без токенов дизайн и код расходятся уже через месяц.

Auto layout — обязательное условие. Компоненты без авто-лейаута ломаются при изменении текста. Кнопка с фиксированной шириной, которая не растягивается под длинный лейбл — классическая ошибка, которую мы не допускаем. С variants в одном component set разработчик видит все состояния (hover, disabled, pressed) сразу, а не переспрашивает перед каждым блоком. Интерактивный прототип дешевле правок после разработки — мы кликаем сложные сценарии (multi-step, wizard, onboarding) до того, как писать код.

Что дают дизайн-системы и когда они избыточны

Design system оправдана, когда над проектом работают 2+ дизайнера или есть несколько связанных продуктов (веб + мобильное приложение + админка). Для сайта-визитки мы ограничиваемся UI kit с базовыми компонентами. Если проект на React, строим систему поверх Radix UI (headless) с Tailwind CSS — как в Shadcn/ui. Компоненты полностью контролируемы, нет lock-in на стороннюю библиотеку. Wikipedia называет такой подход стратегически правильным для масштабирования.

Как мы обеспечиваем адаптивность без сюрпризов

По данным аналитики, планшеты дают 8–12% трафика в зависимости от ниши — игнорировать их нельзя. Но мы не делаем «десктоп + мобильный» с тремя брейкпоинтами. Проектируем под систему значений, совместимую с кодом: если фронтенд на Tailwind CSS, то sm:640, md:768, lg:1024, xl:1280, 2xl:1536. Дизайнер работает с теми же числами в Figma. Fluid typography и spacing через clamp() убирают скачки на нестандартных разрешениях — лендинги и публичные сайты получают плавное поведение без дополнительных усилий.

Что входит в работу (deliverables)

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

Дополнительно: обучение команды работе с дизайн-системой (1–2 часа), доступ к Figma на весь период разработки, поддержка при внедрении.

Как мы гарантируем качество UI

Каждый макет проверяется инженером на реализуемость: нет ли конфликтов между auto layout, корректно ли работают состояния на мобильных, доступен ли контраст (WCAG AA). Мы используем Clarity для анализа текущего юзабилити, и на основе данных переделываем формы, которые теряют конверсию. Типичный результат — inline-валидация вместо submit-and-scroll-to-top увеличивает завершение регистрации на 15–20%. Skeleton screens вместо спиннеров снижают субъективное время загрузки.

Ориентиры по срокам и стоимости

Сроки зависят от количества уникальных экранов и сложности компонентной базы. Стоимость рассчитывается индивидуально — пишите, и мы оценим проект за 1 рабочий день. Получите консультацию по вашему сценарию — расскажем, на каких страницах UX теряет конверсию и как это исправить.