Практичний посібник із читабельної типографіки в сучасному вебі

Чому більшість сайтів читати складніше, ніж мало б бути

Середній сайт у 2026 році зазвичай має кастомну гарнітуру, ретельно підібрані фірмові кольори й дизайн-систему, що задає відступи аж до пікселя. Водночас основний текст — те, заради чого більшість відвідувачів фактично прийшла читати, — часто має 14px, низькоконтрастний сірий колір і набраний шрифтом, оптимізованим для заголовків, а не для абзаців.

Це не нарікання на дизайнерів. Це нагадування, що читабельність — окрема дисципліна, відмінна від візуального дизайну, і вони не завжди збігаються. Шрифт, який виглядає гостро в hero-секції, може виснажувати на довжині абзацу. Колірна палітра, яка добре виглядає на зображеннях, може не проходити перевірки контрастності. Макет, що працює на 27-дюймовому моніторі, може розвалитися у вузьку колонку на мобільному.

Добра новина: читабельна типографіка не вимагає диплома з типографіки. Вона вимагає уваги до кількох змінних, які мають непропорційно великий вплив.

Розмір шрифту: більший, ніж ви думаєте

Найпоширеніша помилка читабельності в вебі — надто малий основний текст. Дизайнери часто задають основний текст на рівні 14px або 15px, бо на десктопі він «виглядає чисто», а потім забувають, що значна частина читачів користується телефонами, часто за неідеального освітлення.

Практична базова лінія для основного тексту у 2026 році:

• Desktop: мінімум 18px, бажано 20px
• Mobile: мінімум 16px, бажано 18px

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

Якщо ваша дизайн-система вимагає меншого тексту, протестуйте його на телефоні при сонячному світлі. Якщо ви мружитеся — він замалий.

Міжрядковий інтервал: дайте тексту простір для дихання

Міжрядковий інтервал (leading) — це вертикальний простір між рядками тексту. Якщо він надто тісний, рядки зливаються. Якщо надто широкий — око втрачає зв’язок між рядками.

Для основного тексту міжрядковий інтервал 1.5–1.7 працює для більшості гарнітур. Заголовки можуть бути щільнішими (1.1–1.3), але основному тексту потрібен простір.

CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Це один із найпростіших способів швидко покращити читабельність. Якщо ваш основний текст зараз має line-height: 1.2 або використовує фіксоване значення в пікселях, змініть це сьогодні.

Довжина рядка: коротша, ніж ви думаєте

Оптимальна довжина рядка для основного тексту — 45–75 символів на рядок, приблизно 8–12 слів. Рядки довші за 90 символів ускладнюють повернення ока до початку наступного рядка. Рядки коротші за 40 символів створюють уривчастий, фрагментований досвід читання.

Більшість сайтів помиляються, дозволяючи тексту розтягуватися на всю ширину viewport, особливо на десктопі. Монітор шириною 1920px може вмістити понад 150 символів у рядку, і це виснажує під час читання.

Виправлення — max-width для текстового контейнера:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

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

Контраст: не все так просто, як чорний на білому

WCAG 2.1 визначає мінімальне співвідношення контрастності 4.5:1 для основного тексту (рівень AA) і 7:1 для підвищеної доступності (рівень AAA). Більшість сайтів формально проходять цю перевірку, але на практиці зазнають невдачі, бо використовують світло-сірий текст на білому тлі.

Типові порушники:

• #666666 на #FFFFFF (4.54:1, ледь проходить)
• #777777 на #FFFFFF (4.47:1, не проходить)
• Будь-який відтінок світліший за #767676 на білому (не проходить)

Якщо ваша дизайн-система визначає «text-secondary» як світло-сірий, протестуйте його. WebAIM contrast checker — найшвидший спосіб перевірити.

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

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Вибір гарнітури: стандартні шрифти кращі, ніж ви думаєте

Кастомні вебшрифти всюдисущі, але вони мають компроміси. Вони додають затримку, збільшують вагу сторінки й можуть блокувати рендеринг, якщо їх не завантажувати обережно. Для основного тексту системні шрифти часто є кращим вибором.

Надійний стек системних шрифтів у 2026 році:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Це дає вам San Francisco на macOS/iOS, Segoe UI на Windows і Roboto на Android — усі ці гарнітури дуже читабельні, професійно спроєктовані й завантажуються миттєво.

Якщо ви все ж використовуєте кастомний шрифт для основного тексту, обирайте той, що спроєктований для довгого читання, а не для display-застосування. Уникайте:

• Надтонких або наджирних накреслень для основного тексту
• Вузьких або розширених варіантів
• Шрифтів із низькою x-height (висотою малих літер)

Перевірте обрану гарнітуру на довжині абзацу, перш ніж остаточно її затвердити.

Адаптивна типографіка: плавні шкали шрифту

Фіксовані розміри шрифту погано масштабуються між пристроями. Основний шрифт 20px, комфортний на десктопі, може здаватися завеликим на мобільному.

Плавна типографіка використовує clamp(), щоб розмір шрифту плавно змінювався між мінімумом і максимумом:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Це масштабує текст від 16px на малих екранах до 20px на великих, із плавною інтерполяцією між ними. Такий підхід витонченіший за breakpoint-и в media query і адаптується до будь-якої ширини viewport.

Для повної типографічної шкали (заголовки, основний текст, дрібний текст) інструменти на кшталт Utopia генерують плавні шкали на основі ваших обмежень.

Відступи між абзацами й вирівнювання тексту

Дві невеликі деталі, які мають значення:

1. Відступи між абзацами: Додавайте простір між абзацами (margin-block-end: 1em) або використовуйте абзацний відступ першого рядка (text-indent: 1.5em), але не обидва варіанти одночасно. Більшість вебконтенту використовує відступи.

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

Перевірка читабельності на практиці

Читабельність не є суто об’єктивною, але її можна перевіряти:

• Читайте власний контент на телефоні за різних умов освітлення
• Запустіть Lighthouse accessibility audit, щоб виявити проблеми з контрастністю та розміром шрифту (див. як читати Lighthouse report без паніки для підказок)
• Попросіть людину старшу за 50 років прочитати сторінку без зміни налаштувань
• Перевірте аналітику щодо bounce rate на сторінках із великою кількістю тексту — якщо люди швидко йдуть, читабельність може бути одним із чинників

Якщо ваш контент важко читати, люди не читатимуть його. Усе настільки просто.

Як це виглядає на практиці

Читабельний стиль основного тексту у 2026 році може виглядати так:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Це охоплює розмір шрифту, міжрядковий інтервал, довжину рядка, контрастність і адаптивне масштабування приблизно в дюжині рядків CSS. Це не захопливо, але працює.

Коли порушувати правила

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

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