Пошук уроків, статей та іншого контенту
Налаштуйте вертикальну відстань між рядками тексту за допомогою line-height для кращої читабельності.
Міжрядковий інтервал — це вертикальна відстань між рядками тексту. У CSS її налаштовують за допомогою властивості line-height.
p {
line-height: 1.6;
}Значення 1.6 означає, що висота рядка дорівнює 1.6 розміру шрифту.
Наприклад, якщо розмір шрифту становить
16pxp {
font-size: 16px;
line-height: 1.5;
}Фактична висота одного рядка буде приблизно 24px:
16px × 1.5 = 24pxline-height впливає на відстань між рядками, але не змінює розмір самих літер.
line-heightnormalp {
line-height: normal;
}normal — значення за замовчуванням. Точний інтервал залежить від браузера та шрифту.
Для звичайного тексту краще явно встановлювати line-height, щоб отримати передбачуваний результат.
p {
font-size: 16px;
line-height: 1.5;
}Це рекомендований спосіб для більшості текстових блоків.
Безрозмірне значення множиться на поточний font-size. Якщо розмір шрифту зміниться, міжрядковий інтервал також зміниться пропорційно.
p {
font-size: 16px;
line-height: 1.5;
}
.large-text {
font-size: 24px;
}У цьому прикладі:
для p висота рядка — 16 × 1.5 = 24px;
для .large-text висота рядка — 24 × 1.5 = 36px.
Можна вказати конкретну висоту рядка в пікселях:
p {
font-size: 16px;
line-height: 24px;
}Такий варіант дає точний результат, але він менш гнучкий. Якщо розмір тексту зміниться, висота рядка залишиться 24px.
Наприклад:
p {
font-size: 24px;
line-height: 24px;
}Рядки можуть стати надто щільними й навіть накладатися один на одного.
Можна використовувати відсоткове значення:
p {
font-size: 16px;
line-height: 150%;
}У цьому випадку висота рядка становить 150% від розміру шрифту, тобто 24px.
Для звичайного тексту запис без одиниць зазвичай зручніший:
line-height: 1.5;Створимо сторінку з заголовком і кількома абзацами. Для заголовка використаємо менший інтервал, а для основного тексту — більший.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Міжрядковий інтервал</title>
<style>
body {
font-family: Arial, sans-serif;
color: #222;
background-color: #f4f4f4;
}
article {
max-width: 600px;
margin: 40px auto;
padding: 24px;
background-color: white;
}
h1 {
font-size: 32px;
line-height: 1.2;
margin-top: 0;
}
p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<article>
<h1>Чому важливий міжрядковий інтервал</h1>
<p>
Правильно налаштований міжрядковий інтервал робить текст
зручнішим для читання. Очі легше переходять від одного рядка
до іншого.
</p>
<p>
Якщо рядки розташовані надто близько, текст здається щільним.
Якщо відстань надто велика, абзац втрачає цілісність.
</p>
</article>
</body>
</html>У прикладі:
h1 має line-height: 1.2, тому рядки заголовка розташовані компактно;
p має line-height: 1.6, тому довгий текст легше читати;
font-size і line-height налаштовані разом.
Універсального значення для всіх текстів немає, але можна орієнтуватися на такі приблизні правила:
для звичайного тексту: 1.4–1.7;
для заголовків: 1.1–1.3;
для коротких підписів: 1.2–1.4.
Наприклад:
body {
font-size: 16px;
line-height: 1.5;
}
h1 {
line-height: 1.2;
}
small {
line-height: 1.4;
}Це лише початкові значення. Остаточний результат потрібно перевірити в браузері, оскільки на сприйняття впливають шрифт, розмір тексту та ширина контейнера.
line-heightВластивість line-height успадковується дочірніми елементами.
body {
font-size: 16px;
line-height: 1.5;
}Якщо дочірній елемент не має власного line-height, він використовуватиме значення, успадковане від body.
Безрозмірне значення поводиться особливо зручно:
body {
line-height: 1.5;
}
h1 {
font-size: 32px;
}Для h1 висота рядка буде обчислена від його власного розміру шрифту:
32px × 1.5 = 48pxТому часто використовують такий базовий стиль:
body {
line-height: 1.5;
}А для заголовків за потреби задають окреме значення:
h1,
h2,
h3 {
line-height: 1.2;
}line-height і відступи між абзацамиline-height визначає відстань між рядками всередині абзацу. Він не замінює зовнішній відступ між різними абзацами.
Для відстані між абзацами використовуйте margin:
p {
line-height: 1.6;
margin-bottom: 16px;
}У цьому прикладі:
line-height: 1.6 задає інтервал між рядками одного абзацу;
margin-bottom: 16px додає відстань після абзацу.
p {
line-height: 1;
}Рядки будуть дуже щільними, особливо якщо абзац має кілька рядків.
p {
line-height: 2.5;
}Текст стане розтягнутим, а абзац може втратити цілісність.
p {
font-size: 18px;
line-height: 18px;
}Висота рядка дорівнює розміру шрифту, тому рядки можуть накладатися. Для звичайного тексту краще використовувати безрозмірне значення:
p {
font-size: 18px;
line-height: 1.5;
}line-height і marginp {
line-height: 1.6;
}Це збільшує відстань між рядками всередині кожного абзацу, але не обов’язково створює потрібну відстань між абзацами. Для цього додайте margin.
Під час налаштування міжрядкового інтервалу:
Встановіть розмір шрифту.
Додайте безрозмірне значення line-height.
Перевірте текст у браузері.
Зменште або збільште значення, якщо рядки здаються надто щільними чи розрідженими.
Перевірте сторінку з довшими абзацами, а не лише з одним рядком.
Використання line-height: 1 для довгого основного тексту.
Надто велике значення, через яке абзаци стають візуально розірваними.
Використання line-height замість margin для відстані між абзацами.
Застосування однакового інтервалу до заголовків і основного тексту без перевірки результату.
Використання фіксованого значення в пікселях, яке не відповідає зміненому розміру шрифту.
line-height задає вертикальну відстань між рядками тексту.
Безрозмірні значення, наприклад 1.5, множаться на font-size.
Для звичайного тексту часто підходить значення 1.4–1.7.
Для заголовків зазвичай використовують менший інтервал — приблизно 1.1–1.3.
line-height не замінює margin, який відповідає за відстань між окремими елементами.
Безрозмірний line-height гнучкіше адаптується до різних розмірів шрифту.