Розробка кастомної типографіки сайту
Типографіка — не вибір гарного шрифта. Це система: шрифт, розмірна шкала, міжстрочне розташування, трекінг (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 на текстових блоках — хорошa практика.
Трекінг (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, специфікація для розробки.