Пошук уроків, статей та іншого контенту
Керуйте горизонтальною відстанню між символами за допомогою letter-spacing і створюйте потрібний вигляд написів.
letter-spacingВластивість CSS letter-spacing керує горизонтальною відстанню між символами тексту.
selector {
letter-spacing: value;
}Наприклад:
.title {
letter-spacing: 4px;
}У цьому прикладі відстань між символами елемента з класом title збільшується на 4px.
letter-spacingДодатне значення збільшує відстань між символами:
.wide-text {
letter-spacing: 6px;
}Текст із таким стилем буде виглядати більш розрідженим:
<p class="wide-text">ЗАГОЛОВОК</p>Від’ємне значення зменшує відстань між символами:
.compact-text {
letter-spacing: -1px;
}Так можна зробити текст компактнішим.
normalЗначення normal використовує стандартну відстань між символами:
.text {
letter-spacing: normal;
}Це значення також використовується за замовчуванням, якщо letter-spacing не задано.
Для letter-spacing часто використовують:
px — фіксована відстань у пікселях;
em — значення залежить від розміру шрифту;
rem — значення залежить від розміру шрифту кореневого елемента.
Для адаптивного тексту зручно використовувати em:
.subtitle {
letter-spacing: 0.1em;
}Якщо розмір шрифту зміниться, відстань між символами також зміниться пропорційно.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Відстань між символами</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
letter-spacing: 3px;
}
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 0.2em;
}
.compact {
letter-spacing: -1px;
}
</style>
</head>
<body>
<h1>Назва сайту</h1>
<p class="normal">Звичайна відстань</p>
<p class="wide">Збільшена відстань</p>
<p class="compact">Зменшена відстань</p>
</body>
</html>У результаті:
заголовок матиме збільшену відстань між символами;
текст із класом normal матиме стандартний вигляд;
текст із класом wide буде розрідженим;
текст із класом compact буде щільнішим.
letter-spacingletter-spacing часто застосовують для:
коротких заголовків;
написів на кнопках;
логотипів;
тексту у верхньому регістрі;
декоративного оформлення написів.
Наприклад:
.button {
letter-spacing: 0.05em;
text-transform: uppercase;
}Такий стиль може зробити напис на кнопці виразнішим.
Для великих абзаців не варто без потреби сильно збільшувати або зменшувати відстань між символами. Це може погіршити читабельність тексту.
letter-spacing і word-spacingletter-spacing змінює відстань між символами:
.text {
letter-spacing: 2px;
}word-spacing змінює відстань між словами:
.text {
word-spacing: 10px;
}Це різні властивості.
Велике додатне значення може зробити текст важким для читання:
.title {
letter-spacing: 20px;
}Використовуйте такі значення лише для спеціального декоративного ефекту.
Якщо відстань надто зменшити, символи можуть накладатися один на одного:
.title {
letter-spacing: -10px;
}Перевіряйте результат у браузері та обирайте помірні значення.
Для числового значення потрібно вказати одиницю:
.title {
letter-spacing: 3px;
}Запис без одиниці зазвичай є помилковим:
.title {
letter-spacing: 3;
}Винятком є спеціальне значення normal.
letter-spacing керує горизонтальною відстанню між символами.
Додатні значення збільшують відстань.
Від’ємні значення зменшують відстань.
normal повертає стандартну відстань між символами.
Для властивості можна використовувати px, em та інші одиниці довжини.
letter-spacing змінює відстань між символами, а word-spacing — між словами.
Надто великі або від’ємні значення можуть погіршити читабельність.