Калькулятор міжрядкового інтервалу для ідеальної типографіки

Чому міжрядковий інтервал важливий

Міжрядковий інтервал (line-height) — один із найважливіших параметрів типографіки. Занадто малий — текст виглядає стисненим і важко читається. Занадто великий — погано для довгих текстів, бо очу складно відстежувати рядки. Оптимальний інтервал залежить від розміру шрифту, ширини колонки та насиченості тексту.

Загальні рекомендації

Для основного тексту оптимальний line-height — 1.4–1.6 відносно розміру шрифту. Для заголовків — 1.1–1.3 (щільніше, оскільки рядків менше). Чим ширша колонка — тим більший потрібен інтервал для зручного переходу на новий рядок. Для мобільних пристроїв та невеликого шрифту збільшуйте до 1.6–1.8.

line-height у CSS

Безрозмірне значення (наприклад, line-height: 1.5) — рекомендований підхід: успадковується коректно. В пікселях (24px) або em (1.5em) може давати несподівані результати при успадкуванні. Нормальне значення (normal) залежить від шрифту — зазвичай 1.2, що занадто мало для тексту.

Вертикальний ритм

Вертикальний ритм — принцип, коли висоти елементів кратні базовому відстанню. Якщо base line-height = 24px, то відступи між блоками — 24px, 48px, 72px тощо. Це створює відчуття порядку і музичного ритму в тексті. Реалізується через систему 8px-сітки або через CSS-змінні.