CSS-свойство letter-spacing
Узнайте, как использовать CSS-свойство letter-spacing для управления межбуквенным расстоянием. Значения и примеры.
CSS-свойство letter-spacing управляет горизонтальным интервалом (известным как трекинг) между символами текста. Оно добавляет пространство в дополнение к стандартному межсимвольному интервалу, который уже задаёт шрифт, а не заменяет его.
Это особенно полезно для тонкой настройки заголовков, подписей в верхнем регистре и логотипного текста, где трекинг по умолчанию выглядит слишком плотным или слишком разреженным. Для длинных абзацев основного текста оставьте значение normal — даже небольшие корректировки ухудшают читаемость.
letter-spacing принимает значение <length> (px, em, rem и т. д.) или ключевое слово normal. Значения длины могут быть отрицательными, что сближает символы друг с другом. Поскольку значение является длиной (а не коэффициентом), использование em удобно: интервал тогда масштабируется вместе с размером шрифта элемента.
Свойство является анимируемым, поэтому при определении перехода интервал изменяется плавно.
Скорость перехода задаётся свойством animation-timing-function.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Да. |
| Версия | CSS1 |
| DOM Синтаксис | object.style.letterSpacing = "5px"; |
Синтаксис
Синтаксис CSS-свойства letter-spacing
letter-spacing: normal | length | initial | inherit;Пример свойства letter-spacing:
Пример CSS-свойства letter-spacing с нормальными и отрицательными значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
letter-spacing: normal;
}
.spacing {
letter-spacing: 4px;
}
.spacing-negative {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<p>This is a paragraph.</p>
<p class="spacing">This is a paragraph.</p>
<p class="spacing-negative">This is a paragraph.</p>
</body>
</html>Результат
В приведённом выше примере первый абзац использует стандартный интервал normal, второй устанавливает letter-spacing: 4px (символы раздвигаются), а третий задаёт отрицательное значение -4px (символы сближаются, вплоть до наложения).
В следующем примере letter-spacing используется совместно со свойством transition. Наведите курсор на текст, чтобы увидеть анимацию интервала.
Пример свойства letter-spacing совместно со свойством transition:
Пример CSS-свойства letter-spacing с нормальными и em-значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #666;
font-size: 1em;
font-family: Roboto, Helvetica Sans-serif;
}
.example1 {
background-color: #666;
color: #eee;
padding: 1em;
letter-spacing: .5em;
-webkit-transition: letter-spacing .5s ease;
transition: letter-spacing .5s ease;
}
.example1:hover {
letter-spacing: normal;
}
.example2 {
background-color: #eee;
color: #666;
padding: 1em;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<div class="example1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
</p>
<div class="example2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
</div>
</div>
</body>
</html>Когда использовать letter-spacing
- Заголовки и подписи в верхнем регистре. Большинство шрифтов набирает текст в верхнем регистре плотно; добавление
0.05em–0.1emинтервала улучшает читаемость и придаёт аккуратный, «дизайнерский» вид. - Капитель и аббревиатуры. Небольшой дополнительный трекинг разделяет плотные заглавные символы.
- Эффекты при наведении и фокусе. Поскольку свойство анимируется, переход интервала создаёт тонкий эффект раскрытия на ссылках и кнопках.
- Не используйте для основного текста. Разреживание длинных абзацев замедляет чтение. Оставьте многострочный текст при значении
normal.
Дополнительная информация
- Современные браузеры полностью поддерживают субпиксельные (дробные) значения, например
0.5px. - Отрицательные значения уменьшают интервал и могут приводить к наложению символов — это удобно для плотных логотипных заголовков, но требует тщательного тестирования.
- Использование
emпозволяет масштабировать интервал вместе сfont-sizeэлемента; использованиеpxфиксирует его независимо от размера шрифта. letter-spacingнаследуется, поэтому дочерние элементы подхватывают значение, если явно не сбросить его доnormal.- Это свойство управляет интервалом между отдельными символами; чтобы задать интервал между целыми словами, используйте word-spacing.
Значения
| Значение | Описание | Пример |
|---|---|---|
| normal | Означает, что между символами не будет дополнительного пространства. Это значение по умолчанию. | Play it » |
| length | Задаёт дополнительное пространство между символами. Допускаются отрицательные значения. | Play it » |
| initial | Устанавливает значение свойства по умолчанию. | Play it » |
| inherit | Наследует значение свойства от родительского элемента. |