Чому кастомна типографіка роз’їжджається на реальному контенті
Дизайн-макет типографіки майже завжди перевіряють на коротких рядках: «Заголовок», два-три рядки тексту. Щойно в блок потрапляє реальне наповнення — довгі складені терміни, абзаци на кілька сотень знаків, — типографіка сайту перестає тримати сітку. Розбираємо конкретні поломки, які видно вже на першому прогоні з бойовим текстом.
Перенос рядків ламається першим: заголовок без коректних точок переносу вилазить за колонку або рветься посеред слова, а виключка за обома краями дає «ріки» з пробілів і різну щільність сусідніх рядків.
Переповнення блоку проявляється не лише візуально — якщо висота картки зав’язана на вміст, один довгий рядок зсуває секцію і ламає її вирівнювання щодо сусідніх.
Шкала розмірів на дискретних кроках під кожен контрольний розмір екрана дає стрибки між розділами: заголовок одного блоку візуально важчий за такий самий за змістом в іншому.
Інтерліньяж часто заданий локально в компонентах — десь множником, десь жорстким значенням, — і під час підстановки іншого начерку рядки починають «дихати» по-різному, а вертикальний ритм секцій розсипається.
Читабельність тексту страждає останньою, але помітна найбільше. Рядок довший за 90 знаків змушує губити початок наступного, самотнє слово в останньому рядку абзацу й прийменник у кінці колонки добивають ритм.
Масштабування сторінки користувачем додає ще один шар: верстка під одну ширину на проміжних значеннях переповнюється й уводить блоки вниз.
Як це закривається — від розставляння переносів і безперервної шкали до правил інтерліньяжу для кожного компонента.
Що змінюється після переробки: швидкість, читабельність, стійкість
Єдина шкала прибирає ручний підбір кегля в кожному блоці: розміри, міжрядковий інтервал і відступи задані набором змінних, а не розмножені по стилях.
Залишається 6-8 розмірів тексту замість трьох десятків випадкових значень — це видно за кількістю унікальних правил і за вагою стилів, які віддаються браузеру.
Менше значень — менше перерахунків під час відрисовки, і текст з’являється цілком, а не добудовується в міру застосування стилів.
Читабельність перестає залежати від ширини екрана. Довжина рядка тримається в діапазоні 60-75 знаків, міжрядковий інтервал основного тексту — близько 1.5, у заголовків щільніший, щоб вони читалися разом із наступним абзацом. Контраст тексту й фону перевіряємо за порогом доступності, а не на око.
Адаптивна типографіка будується на плавній зміні розмірів між межами екранів, а не на окремому наборі правил під кожну роздільну здатність. Проміжні ширини — планшет у портретній орієнтації, великий телефон — не провалюються в дрібний або обрізаний текст. Точок перелому стає менше, а поведінка між ними — передбачуваною.
Вертикальний ритм тримає загальний крок: відступи між заголовком, абзацом, списком і врізкою кратні одному значенню, тому блоки не злипаються й не розходяться.
Разом із підмножиною глифів і скороченим набором начерків це прискорює першу відрисовку тексту й зменшує зсув верстки під час підміни шрифту.
Способи підключення шрифтів і варіанти типографської шкали
Вибір між самохостингом шрифтів і зовнішнім підключенням вирішують не смаком, а вимогами до контролю над завантаженням. Самохостинг дає володіння підмножиною набору, кешуванням і правилом font-display, але вимагає стежити за вагою файлів і ліцензіями.
Зовнішній хостинг підключається одним рядком, зате додає чужий домен у критичний шлях відрисовки першого екрана.
Типографська шкала будується або як фіксований набір ступенів, або як неперервна функція від ширини екрана. Нижче — альтернативи, між якими реально обирають на старті проєкту.
| Варіант | Коли підходить | Обмеження |
|---|---|---|
| Самохостинг шрифтів із підмножиною під потрібний алфавіт | Один-два начерки в основі, важлива передбачувана відрисовка | Потрібно оновлювати файли й стежити за ліцензією на кожен начерк |
| Варіативний шрифт одним файлом | Багато ступенів насиченості, плавні переходи ваги й курсиву | Файл важчий за статичний, для старих браузерів потрібен запасний варіант |
| Системний шрифтовий стек | Швидкість і нульова затримка важливіші за унікальність начерку | Відрисовка різниться між платформами, бренд втрачає впізнаваність |
| Модульна шкала на фіксованих ступенях | Простий інтерфейс, два-три розміри тексту | На нестандартних ширинах між ступенями з’являються розриви |
Модульна шкала з плавним перерахунком через clamp() |
Багато типів контенту, адаптив від мобільного до широкого екрана | Складніше налагоджувати: розмір не можна прочитати прямо в макеті |
Як влаштована робота над типографікою: етапи від аудиту до передачі
Кастомна типографіка перестає «пливти» лише тоді, коли описана як система: шкала розмірів, міжрядкові відстані й вертикальний ритм задані один раз і перевикористовуються.
Тому робота йде послідовно — від інвентаризації поточних стилів до документа, за яким типографіку відтворюють без нас.
- Аудит типографіки. Збираємо всі стилі з робочих сторінок і з макетів: кеглі, насиченості, міжрядкові, відступи до і після блоку. Позначаємо, де значення задані вручну й розійшлися між розділами.
- Схема шкали. Рахуємо модульну шкалу від базового розміру тексту, прив’язуємо заголовки до коефіцієнта й кроку сітки. Тут же визначаємо, як шкала змінюється на кожному переломі ширини екрана.
- Типографські стилі. Описуємо їх як іменовані сутності: розмір, інтерліньяж, трекінг, насиченість, вертикальні відступи. Компоненти посилаються на ці значення, а не на числа, — правка одного місця змінює весь інтерфейс.
- Налаштування й підключення шрифтів. Підбираємо начерки й підмножини, підключаємо з власного домену, налаштовуємо підміну й прибираємо стрибок розмітки під час завантаження.
- Перевірка на пристроях. Дивимося реальні екрани й браузери: переноси, обрізання виносних елементів, «сироти» в заголовках, поведінку при системному збільшенні тексту й у темній темі.
- Передача документації. Віддаємо таблицю стилів, правила застосування, пам’ятку для редакторів контенту й перелік місць для регресії. Нові блоки після цього збираються за цими правилами.
Комплект стилів, змінні шкали й регламент правок
Здача типографіки — це не картинка й не набір гарних заголовків, а робоча система, якою замовник користується сам. Тому в комплект входить усе, що потрібно для правок без нашої участі: від змінних шкали до правил, за якими новий співробітник збере сторінку так само, як еталонну.
- Набір типографських стилів. Заголовки всіх рівнів, лід, основний текст, підписи, цитати, списки, таблиці й виноски — кожен із прописаними міжрядковою відстанню, відступами до і після, правилами переносу й висячою пунктуацією.
- Змінні шкали. Розміри, інтерліньяж, відступи, насиченості й контрастні пари винесені у змінні, прив’язані до контрольних точок адаптиву: правка одного значення перебудовує весь сайт, а не окрему сторінку.
- Правила застосування. Де доречний кожен стиль, скільки рівнів заголовків припустимо на сторінці, як оформлювати вкладені списки й довгі підписи до зображень.
- Макет-зразок. Еталонна сторінка, де зібрані одразу всі елементи — від першого заголовка до таблиці й виноски; за нею звіряють будь-яку нову верстку.
- Регламент правок. Хто і в якому порядку змінює значення шкали, що перевіряється перед публікацією, як фіксується причина зміни, щоб через пів року було зрозуміло, звідки взялося поточне значення.
- Інструкція для редакторів. Покроковий документ зрозумілою мовою: як додати матеріал, вибрати правильний стиль, що робити із заголовком довшим за рядок і куди звертатися, якщо макет не сходиться.
- Чек-лист приймання. Контрольні точки з адаптиву й контрасту: перевірка на вузьких екранах, поведінка при збільшенні системного шрифту, читабельність тексту поверх зображень.
Усе це лежить поруч із кодом і оновлюється разом із ним, тому типографіка не розходиться сторінками з часом. Опишіть задачу — повернемося з оцінкою й планом робіт.
Кейс: портал з різнорідним контентом і ламаною сіткою
Портал збирали різні команди: у новинного розділу своя верстка, у каталогу — своя, у довідкових сторінок — третя. Контент різнорідний: довгі тексти з врізками, таблиці порівняння, картки з довгими назвами.
Заголовки вилазили з контейнерів, таблиці розтягували сторінку, а сітку лагодили в кожному розділі окремо.
На старті порахували, скільки сторінок реально ламається: у 38% шаблонів текст переповнював контейнер хоча б на одній контрольній роздільній здатності. Правка макета займала в середньому 90 хвилин — значення підбирали заново, спільної шкали не було.
Що змінили
Зібрали єдину шкалу й закріпили її у змінних: кегль, інтерліньяж, міжлітерна відстань і вертикальні відступи стали спільними для всіх розділів. Шкала інтерполюється між контрольними роздільними здатностями — розміри рахуються від ширини екрана, а не перемикаються ступенями.
Основою взяли Inter у варіативній версії: одна гарнітура на весь портал, різні начерки замість другого шрифту.
Переповнення закрили правилами, а не заборонами: мінімальний розмір за нижньою межею діапазону, обмеження довжини рядка, перенос довгих слів і артикулів, а таблиці прокручуються всередині своєї області й не розтягують сторінку. Правила лежать у спільному шарі, тому новий розділ успадковує поведінку.
Що вийшло
Частка сторінок із переповненням упала з 38% до 2%. Правка макета скоротилася з 90 до 25 хвилин: змінюється токен, а не значення по розділах. Шість розділів із різною сіткою звели до однієї — колонки, відступи й ритм заголовків збігаються.
Чим кастомна типографіка відрізняється від готового шрифтового набору?
Готовий шрифтовий набір — гарнітура зі зібраними начерками й зрозумілою ліцензією. Його вистачає, коли в сайту один шаблон сторінки й стандартна сітка: підключаємо два-три начерки, задаємо базовий розмір і коефіцієнт шкали — типографіка поводиться передбачувано на всіх екранах.
Обмеження проявляються на обсязі. Чужі метрики не збігаються з вашою сіткою, великі заголовки вимагають ручної правки трекінгу, а зайві мовні розділи тягнуть вагу збірки. Готовий набір на кшталт Inter закриває інтерфейс, але не вирішує завдання айдентики й багатомовної верстки.
Кастомна типографіка починається там, де шкалу проєктують під контент.
Інженер задає модульну шкалу — коефіцієнт 1.2–1.333 для інтерфейсів і близько 1.5 для текстових сторінок, — окремі правила інтерліньяжу й трекінгу для великих і дрібних кеглів, плавні переходи між екранами замість ступінчастих стрибків.
У шрифт додають відсутні глифи й локальні начерки, а в стилі — метрики підміни, щоб верстка не стрибала, поки файл завантажується.
Терміни переробки різняться на порядок. Готовий набір упроваджуємо за кілька днів: підключення, шкала, перевірка переносів і контрасту. Власна система — тижні: аудит поточних стилів, проєктування шкали й правил, доопрацювання глифів, еталонна сторінка з усіма станами.
Критерій простий: якщо типів контенту менше п’яти й бренд не сперечається зі стандартною гарнітурою — вистачить готового набору. Якщо сторінок десятки й мов кілька, точніше працює власна система.
Технічні питання, які ставлять перед стартом
Ці сумніви спливають майже на кожному проєкті, і майже всі вони вирішуються на етапі проєктування шкали — пізніше переробка зачіпає верстку, компоненти й збірку. Нижче — чотири питання, які найчастіше гальмують погодження, з відповідями наших інженерів.
Ми не гадаємо: ліцензію читаємо до верстки, поведінку шрифту перевіряємо на реальних текстах — довгих заголовках, вузьких колонках, таблицях, а не на демо-абзаці з макета.
Які ліцензії на шрифти потрібно враховувати?
Розрізняємо вільні й комерційні: у других рахуються начерки, домени й обсяг показів, а не сам факт купівлі файлу.
Перевіряємо це до верстки — фіксуємо, які начерки реально потрібні шкалі, збираємо підмножину за використовуваними глифами й розміщуємо файли на своєму домені, щоб не залежати від чужої роздачі.
Як налаштувати переноси слів, щоб текст не «рвався»?
Автоматичний перенос вимагає коректного атрибута мови документа й словників для неї — без них браузер або не переносить, або рве слова невдало.
Для вузьких колонок додаємо аварійний перенос довгих слів, для заголовків — балансування рядків, а терміни без словника розмічаємо м’якими переносами вручну.
Що змінюється в темній темі?
Темна тема — не інверсія кольорів. Тонкі начерки на темному фоні здаються жирнішими й «запливають», тому для неї підбираємо вагу на ступінь нижче й окремі значення міжрядкової відстані.
Плюс перевіряємо контраст за вимогами доступності й віддаємо перемикач, що враховує системне налаштування.
Як типографіка поводиться під час друку сторінок?
Друк — окремий режим: темну тему вимикаємо, інакше сторінка йде у витрату фарби й нечитабельні суцільні блоки.
Задаємо розміри в типографських одиницях, показуємо адреси посилань, забороняємо розриви всередині заголовків і карток, а для довгих документів вмикаємо шрифт із засічками.
Що надіслати для старту й як ми повернемося з оцінкою
Щоб оцінка спиралася на факти, а не на здогадки, для старту достатньо кількох вихідних даних. Чим повніша картина зі шрифтів, сітки й контенту, тим точніший план робіт і менше правок на етапі верстки.
- адреса поточного сайту або тестового стенда й перелік сторінок, де типографіка вже викликає питання;
- файли шрифтів із ліцензіями й списком доменів, де дозволено використання;
- макети з текстовими стилями або вивантаження з розмірами, відступами й міжрядковими;
- брендбук або правила набору: гарнітури, начерки, кеглі, переноси, поведінка заголовків;
- статистику роздільних здатностей екрана й типів пристроїв за останні місяці;
- опис платформи й поточного підходу до стилів: тема, збірка, змінні оформлення;
- вимоги щодо доступності й локалізації, якщо мов на сайті більше однієї.
Після цього ми розбираємо матеріали й повертаємося з планом робіт: який набір шкал і начерків потрібен, як вони підключаються, у якому порядку викладаємо по сторінках.
На розбір іде один-два робочі дні, оцінка приходить разом із планом — етапами, строками й тим, що потрібно від вас на кожному кроці. Якщо частина вихідних даних відсутня, зберемо те, чого бракує, самі й окремо зазначимо в плані, які рішення ухвалено з нашої ініціативи.
