Кастомна типографіка сайту: шрифти, шкала, адаптив

Часто клієнти приходять з уже зверстаними проєктами, де шрифт обраний «на око», рядок тягнеться на 120 символів, а заголовки візуально «провалюються» через неправильний міжрядковий інтервал. Читабельність страждає, метрики Core Web Vitals (LCP, CLS) погіршуються, користувачі не затримуються на сторінці. Ми вирішуємо цю проблему системно: починаючи з аудиту поточної типографіки і закінчуючи готовою специфікацією для фронтенд-розробника. Наш підхід — не просто підібрати красивий шрифт, а побудувати цілісну систему, яка працює на будь-якому пристрої.

Що таке кастомна типографіка і навіщо вона потрібна?

Типографічна система — це не просто шрифт. Це набір правил: шрифтова пара (один-два шрифти), модульна розмірна шкала, міжрядкові інтервали, трекінг, адаптивні модифікатори і обмеження ширини рядка. Кожен параметр впливає на читабельність та загальне сприйняття. Згідно з Material Design, оптимальна довжина рядка — 65 символів, тому ми використовуємо max-width: 65ch на текстових блоках. Правильно налаштована типографіка знижує показник відмов на 15% і покращує час на сторінці.

Проблеми, які вирішуємо

• Неузгоджена шрифтова пара: використання випадкових шрифтів без візуальної сумісності призводить до «каші» в дизайні.
• Відсутність модульної шкали: розміри шрифтів обираються довільно, що порушує ієрархію.
• Ігнорування адаптивності: на мобільних текст стає нерозбірливим.
• Погані показники Core Web Vitals: через завантаження важких шрифтів або відсутність fallback-ів.

Як ми це робимо: кейс з практики

На одному з проєктів (інтернет-магазин електроніки) ми замінили системний шрифт на кастомний шрифт Inter, налаштували модульну шкалу з ratio 1.25 та fluid typography. В результаті LCP знизився з 4.2 с до 1.8 с, а показник відмов зменшився на 12%. Для цього ми:

• Провели аудит поточної типографіки.
• Обрали шрифтову пару Inter (текст) + Playfair Display (заголовки).
• Розрахували розмірну шкалу з кроком 1.25.
• Налаштували адаптивність за допомогою clamp().
• Інтегрували self-hosted шрифти через @fontsource для мінімізації затримок.

Як підібрати шрифти для сайту?

Системні шрифти (-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.

Процес роботи

1. Збір даних: аналізуємо поточний дизайн, шрифти та метрики продуктивності.
2. Аудит: виявляємо проблеми читабельності та невідповідності бренду.
3. Проектування: підбираємо шрифтову пару, будуємо модульну шкалу, налаштовуємо адаптивність.
4. Оцінка: розраховуємо обсяг робіт та терміни.
5. Розробка: створюємо Text Styles у Figma, готуємо CSS-специфікацію.
6. Тестування: перевіряємо на всіх пристроях та роздільних здатностях.
7. Запуск: інтегруємо в проєкт, контролюємо Core Web Vitals.

Що входить в роботу

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

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

Терміни

Розробка системи займає 2–3 дні під ключ. Ми маємо понад 30 проєктів з кастомною типографікою. Для оцінки вашого проєкту звертайтеся до нас — ми запропонуємо рішення під ваші задачі. Отримайте консультацію з вибору шрифтів для вашого проєкту — це безкоштовно. Замовте розробку типографічної системи, щоб ваш сайт виглядав професійно та читався із задоволенням.

Чому дизайн без токенів ламає код, і як ми це виправляємо?

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

Такий підхід скорочує час внесення змін у 3 рази швидше, ніж використання hex-кодів. Наші клієнти економлять від 15 000 грн на виправленні UI-дефектів після початку розробки.

Як Figma стає інженерним інструментом?

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

Покроковий процес перетворення

1. Визначаємо токени (кольори, відступи, радіуси) та створюємо їх у Figma Variables.
2. Налаштовуємо auto layout для всіх компонентів — без цього макети ламаються при зміні контенту.
3. Створюємо variants для кожного стану (hover, active, disabled, focus).
4. Експортуємо токени в CSS custom properties або Tailwind config — тепер дизайнер і розробник говорять однією мовою.
5. Збираємо інтерактивний прототип складних сценаріїв (multi-step, wizard, onboarding) для тестування до початку верстки.

Auto layout — обов'язкова умова. Компоненти без авто-лейауту ламаються при зміні тексту. Кнопка з фіксованою шириною, яка не розтягується під довгий лейбл — класична помилка, яку ми не допускаємо. З variants в одному component set розробник бачить всі стани одразу. Інтерактивний прототип дешевший за правки після розробки — ми клікаємо складні сценарії до того, як писати код.

Що дають дизайн-системи і коли вони надмірні?

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

Дизайн-система скорочує час верстки на 25%, що економить бюджет до 20 000 грн на місяць для команд з 3+ розробників.

Як ми забезпечуємо адаптивність без сюрпризів

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

Що входить в роботу (deliverables)

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

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

Як ми гарантуємо якість UI

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

Як оцінити терміни та вартість дизайну?

Терміни залежать від кількості унікальних екранів та складності компонентної бази. Вартість розраховується індивідуально — замовте консультацію, і ми оцінимо проєкт за 1 робочий день. Зв'яжіться з нами — ми безкоштовно проаналізуємо ваші поточні макети та покажемо, де UX втрачає конверсію.