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

Якісна типографіка покращує читабельність і візуальну структуру. У цьому розділі розглядаються властивості, що керують відступами та тонкими візуальними ефектами для тексту: 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 — відносне значення, подібне до multiplier (1.4em = font-size × 1.4);
percent — працює як multiplier (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-властивість регулює відстань між словами в тексті?

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

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

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

Запитати АІ

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

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

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

line-height

line-height: multiplier | value in px | value in em | percent

multiplier — безрозмірне значення, наприклад, 1.5 множить font-size;
value in px — конкретна висота, наприклад, 24px;
value in em — відносне значення, подібне до multiplier (1.4em = font-size × 1.4);
percent — працює як multiplier (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. Розділ 7