Як вибрати шрифти для сайту з урахуванням кирилиці

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

Що перевірити першим

Повнота кириличного набору. Переконайтеся, що є всі літери української абетки: «є», «і», «ї», «ґ», апостроф. Іноді шрифт підтримує російську кирилицю, але не має українських знаків або показує їх із запасного шрифту, що виглядає неакуратно.

Якість кирилиці. Деякі шрифти мають латинську частину високої якості, а кирилицю домальовано поспіхом. Перевірте на реальних словах: «Щоденні новини», «Їжа та напої».

Ліцензія. Для веб-використання потрібен дозвіл. Відкриті ліцензії (наприклад, SIL OFL) дозволяють використання на сайтах і самостійне розміщення файлів.

Читабельність

• Для основного тексту оберіть гарнітуру з простими формами та відкритими лічильниками літер.
• Розмір від 16 px, міжрядковий інтервал близько 1,5–1,7.
• Довжина рядка 45–75 символів.
• Уникайте надто тонких накреслень для дрібного тексту, особливо на білому тлі й на екранах із низькою щільністю.

Поєднання шрифтів

Правила, які рятують від хаосу:

1. Одна гарнітура з кількома накресленнями майже завжди надійніша за кількох різних.
2. Якщо поєднуєте дві, нехай вони контрастують за призначенням (заголовки й основний текст), а не лише за формою.
3. Не змішуйте дві схожі гарнітури: різниця виглядатиме як помилка.

Швидкість завантаження

Шрифти впливають на швидкість і стабільність верстки (LCP і CLS). Щоб не нашкодити:

• розміщуйте файли на власному домені або CDN, не лише на сторонніх;
• використовуйте формат WOFF2;
• підключайте лише потрібні набори символів (латиниця та кирилиця), а не всі;
• застосовуйте змінні шрифти, якщо потрібно кілька накреслень;
• задайте font-display і завантажуйте головні файли наперед, щоб текст не стрибав.

Приклад підключення

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491;
}

Типові помилки

• Вибір шрифту лише за красою латинських літер.
• Тестування на заголовку «Lorem ipsum» замість реального українського тексту.
• Занадто багато накреслень.
• Відсутність запасного шрифту у font-family.

Підсумок

Оберіть перевірену гарнітуру з повноцінною кирилицею й відкритою ліцензією, обмежтеся одним-двома шрифтами та акуратно підключайте їх. Це зробить сайт і зручнішим, і швидшим. Більше про UI і його складові читайте в нашому словнику.