letter-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

Свойствоletter-spacing определяет межбуквенное расстояние в тексте.

Интерактивный пример

letter-spacing: normal;

letter-spacing: 0.2rem;

letter-spacing: 1px;

letter-spacing: -1px;

<section>  <p>    As much mud in the streets as if the waters had but newly retired from the    face of the earth, and it would not be wonderful to meet a Megalosaurus,    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.  </p></section>

@font-face {  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");  font-family: Amstelvar;  font-style: normal;}section {  font-size: 1.2em;  font-family: Amstelvar;}

Синтаксис

css

/* Ключевые слова */letter-spacing: normal;/* Значения <length> */letter-spacing: 0.3em;letter-spacing: 3px;letter-spacing: 0.3px;/* Глобальные значения */letter-spacing: inherit;letter-spacing: initial;letter-spacing: unset;

Значения

normal: Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения0, это ключевое слово позволяетагенту пользователя изменить расстояние между буквами для выравнивания текста.
<length>: Определяет дополнительное расстояние между буквамидобавляющееся к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.

Формальный синтаксис

letter-spacing =
normal|
<length-percentage>

<length-percentage> =
<length>|
<percentage>

Примеры

HTML

html

<p>letter spacing</p><p>letter spacing</p><p>letter spacing</p><p>letter spacing</p><p>letter spacing</p>

CSS

css

.normal {  letter-spacing: normal;}.em-wide {  letter-spacing: 0.4em;}.em-wider {  letter-spacing: 1em;}.em-tight {  letter-spacing: -0.05em;}.px-wide {  letter-spacing: 6px;}

Большие положительные или отрицательные значения свойстваletter-spacing могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойства, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.

Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.

Спецификации

Specification
CSS Text Module Level 3 # letter-spacing-property
Scalable Vector Graphics (SVG) 2 # LetterSpacingProperty

Начальное значение	`normal`
Применяется к	все элементы. Это также применяется к`::first-letter` и`::first-line`.
Наследуется	да
Обработка значения	оптимальное значение состоит из абсолютной длины или ключевого слова`normal`
Animation type	длина