Читабельна стаття: рядок, ритм і контраст

Перед початком

Візьміть справжню довгу статтю з таблицею, списком і картинкою. Короткий заголовок-заглушка не виявить проблем реального змісту.

Обмежте колонку, наприклад почніть із 65ch. Налаштуйте розмір і міжрядковий інтервал, потім перевірте справжні українські, російські й англійські рядки.
Організуйте зміст за завданнями. Заголовки описують відповіді, списки — послідовність або вибір. Посилання мають відрізнятися без наведення миші.
Перевірте 360 px, широкий екран і збільшення до 200%. Збережіть заголовки таблиць і зручне читання на вузькому екрані, не зменшуючи весь текст до мікроскопічного.

Приклад коду

.prose { max-width: 65ch; font-size: 1.125rem; line-height: 1.7; }
.prose a { text-decoration: underline; text-underline-offset: .2em; }

Колонка 65ch не гарантує рівно 65 літер у рядку: одиниця залежить від метрики символу 0 шрифту. Це орієнтир для перевірки, а не універсальна норма.

Слова не обрізані, літери не накладаються, фокус видимий. Перевірте контраст основного тексту, посилань і підписів.

Блідий підпис може існувати на сторінці й залишатися практично нечитабельним. Перевіряйте обчислені кольори та їхнє співвідношення контрасту.

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