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

Якісна типографіка підвищує читабельність і покращує візуальну структуру. У цьому розділі розглядаються властивості, що керують інтервалами та тонкими візуальними ефектами для тексту: 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

styles.css

Вивід

letter-spacing

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

letter-spacing: normal | value in px | value in em

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

index.html

styles.css

Вивід

word-spacing

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

word-spacing: value | inherit | normal

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

index.html

styles.css

Вивід

text-shadow

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

text-shadow: "X set" | "Y set" | "blur radius" | "color"

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

index.html

styles.css

Вивід

Примітка

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

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

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

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

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

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

Запитати АІ

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

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

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

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

styles.css

Вивід

letter-spacing

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

letter-spacing: normal | value in px | value in em

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

index.html

styles.css

Вивід

word-spacing

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

word-spacing: value | inherit | normal

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

index.html

styles.css

Вивід

text-shadow

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

text-shadow: "X set" | "Y set" | "blur radius" | "color"

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

index.html

styles.css

Вивід

Примітка

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

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

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