Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Форматування Тексту для Кращої Читабельності | Стилізація тексту для читабельності
Основи CSS

bookФорматування Тексту для Кращої Читабельності

Свайпніть щоб показати меню

Якісна типографіка підвищує читабельність і покращує візуальну структуру. У цьому розділі розглядаються властивості, що керують інтервалами та тонкими візуальними ефектами для тексту: line-height, letter-spacing, word-spacing та text-shadow.

Ці властивості допомагають зробити текст легшим для читання та візуально збалансованим.

line-height

line-height визначає вертикальний інтервал між рядками тексту. Браузери встановлюють значення за замовчуванням залежно від шрифту, але його можна налаштувати у кількох форматах:

line-height: multiplier | value in px | value in em | percent
  • multiplier — безрозмірне значення, наприклад, 1.5 множить font-size;
  • value in px — конкретна висота, наприклад, 24px;
  • value in em — відносне значення, подібне до множника (1.4em = font-size × 1.4);
  • percent — працює як множник (120% = font-size × 1.2).
index.html

index.html

styles.css

styles.css

copy

Вивід

letter-spacing

letter-spacing встановлює горизонтальний інтервал між символами.

letter-spacing: normal | value in px | value in em
  • normal: стандартний інтервал;
  • value in px: фіксований додатковий інтервал;
  • value in em: інтервал відносно font-size.
index.html

index.html

styles.css

styles.css

copy

Вивід

word-spacing

Властивість word-spacing регулює відстань між словами.

word-spacing: value | inherit | normal
  • value: власне значення відстані;
  • inherit: успадковує відстань від батьківського елемента;
  • normal: стандартна відстань.
index.html

index.html

styles.css

styles.css

copy

Вивід

text-shadow

text-shadow додає ефект тіні до тексту. Приймає чотири значення:

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set: горизонтальне зміщення;
  • Y set: вертикальне зміщення;
  • blur radius: розмитість тіні (0 = різка тінь);
  • color: будь-який допустимий колір, за замовчуванням — поточний колір тексту.
index.html

index.html

styles.css

styles.css

copy

Вивід

Note
Примітка

У форматуванні тексту не існує суворих правил щодо використання певних значень у конкретних ситуаціях. Вибір властивостей і значень для форматування тексту залежить від унікальних вимог кожного проєкту та дизайнерського бачення.

1. Яка CSS-властивість використовується для створення візуального ефекту тіні для тексту?

2. Яка CSS властивість регулює відстань між словами в тексті?

question mark

Яка CSS-властивість використовується для створення візуального ефекту тіні для тексту?

Select the correct answer

question mark

Яка CSS властивість регулює відстань між словами в тексті?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 1

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Секція 2. Розділ 1
some-alt