Текст займає близько 90% площі типового сайту — і водночас шрифти стабільно входять у трійку причин повільного завантаження. Сценарій, який ми бачимо щомісяця: дизайнер бере красиву пару, розробник підключає шість накреслень зі стороннього CDN, і браузер тягне 400 КБ шрифтів до того, як покаже перше слово. Далі — як зібрати пару, побудувати шкалу розмірів, не влетіти на кирилицю й ліцензії і скільки насправді має важити типографіка бренду.

Що насправді вирішує шрифт

Замовники зазвичай сприймають вибір шрифту як питання смаку. Практично він визначає чотири речі, і кожна вимірюється грошима.

• Читабельність довгих текстів. Різниця між продуманим основним шрифтом і випадковим — це 10–20% часу на сторінці. Для блогу, каталогу чи документації це головний критерій, а не «краса».
• Сприйняття ціни. Антиква з високим контрастом штрихів читається як «дорого», геометричний гротеск — як «технологічно», округлий — як «дружньо». Те саме робить колір, і про це ми писали в розборі психології кольору.
• Швидкість. Кожне накреслення — окремий файл і окремий запит. Шість накреслень замість двох додають 150–250 КБ і відкладають перший осмислений рендер.
• Вартість підтримки. Шрифт із поганим покриттям символів означає, що через рік хтось вручну шукатиме заміну для української «ї», лапок-ялинок чи знака гривні.

Як зібрати пару, а не колекцію

Робоча схема майже завжди одна: один шрифт для заголовків, один для основного тексту. Третій допускається лише тоді, коли живе виключно в логотипі. Чотири комбінації, які працюють, з їхніми зворотними боками.

Шкала розмірів, після якої дизайн перестає «пливти»

Найпоширеніша проблема на сайтах малого бізнесу — не потворний шрифт, а відсутність системи: вісім розмірів тексту, з яких три відрізняються на 1 px. Ієрархія має бути помітною з відстані витягнутої руки.

1. 1

   Почніть з основного тексту, а не із заголовка

   Візьміть 17–18 px для десктопа і не менше 16 px для мобільного. Менше — і Safari масштабує поля вводу під час фокусу, а користувач збільшує сторінку пальцями.

2. 2

   Задайте крок

   Помножте базовий розмір на 1.25 або 1.333 і округліть. Виходить пʼять-шість позицій, і цього вистачає на будь-який сайт. Проміжні значення «на око» ламають ритм.

3. 3

   Привʼяжіть інтерліньяж до розміру

   Основний текст — 1.5–1.65, заголовки — 1.1–1.25. Заголовок з інтерліньяжем 1.5 виглядає розсипаним, а абзац з 1.2 читається як стіна.

4. 4

   Обмежте довжину рядка

   60–80 символів, тобто приблизно 680–760 px на широкому екрані. Текст на всю ширину монітора рідко дочитують до середини.

5. 5

   Перевірте на найгіршому пристрої

   Відкрийте макет на телефоні з екраном 5.5 дюйма при денному світлі. Якщо підзаголовок не відрізняється від тексту, беріть контраст 400 проти 700, а не 400 проти 500.

Кирилиця й ліцензії: два місця, де ламаються бюджети

Шрифт, бездоганний у макеті англійською, іноді має кирилицю, намальовану іншою людиною через пʼять років після латиниці. Це видно одразу: «д», «з» і «ю» виглядають чужими, а великі літери то ширші, то вужчі за латинські. Перевіряти треба до того, як шрифт піде в брендбук.

Шрифти з відкритою ліцензією закривають більшість комерційних задач і мають нормальну кирилицю. Платний виправданий тоді, коли впізнаваність тексту — частина позиціонування: видання, преміум-сегмент, бренди з великою кількістю друкованих носіїв. Як шрифт стикується з рештою системи, розписано в гайді з фірмового стилю.

Скільки типографіка коштує в мілісекундах

Шрифти блокують показ тексту: доки файл не завантажився, браузер або не малює нічого, або показує системний шрифт і потім перемальовує. Обидва варіанти псують метрики — але керовано.

• Хостіть шрифти у себе. Сторонній CDN — це додатковий DNS-запит і нове TLS-рукостискання, тобто 200–400 мс на мобільному ще до старту завантаження файлу.
• Тільки WOFF2. Він на 25–30% легший за WOFF і підтримується всіма живими браузерами. TTF та EOT у збірці — ознака конфігу, скопійованого зі статті 2015 року.
• Ріжте підмножину символів. Приберіть грецьку, вʼєтнамську та зайві діакритики — файл схудне на 30–50%.
• Показуйте текст одразу. Стратегія відображення зі швидкою підміною прибирає «невидимий текст» і рятує LCP; решта чинників — у розборі швидкості завантаження.
• Підвантажуйте наперед лише перший екран. Зазвичай це одне накреслення заголовка й одне основного тексту. Preload на пʼять файлів працює гірше, ніж preload на жоден.

Часті питання про шрифти для бренду

Коротко

• Дві шрифтові сімʼї й максимум три-чотири накреслення закривають майже будь-який комерційний сайт.
• Шкала будується від основного тексту (17–18 px) множенням на 1.25–1.333, а не підбором розмірів на око.
• Кирилицю й ліцензію перевіряють до затвердження шрифту, а не після того, як він потрапив у брендбук.
• Власний хостинг, WOFF2 і підмножина символів утримують типографіку в межах 60–90 КБ замість 400.
• Красивий шрифт, що зʼявляється на секунду пізніше, працює гірше за посередній, який видно одразу.