CSS-свойство `letter-spacing`

CSS-свойство letter-spacing CSS задаёт расстояние между символами текста. Это значение добавляется к естественному расстоянию между символами при отображении текста. Положительные значения letter-spacing увеличивают расстояние между символами, а отрицательные значения letter-spacing сближают их.

Попробуйте

letter-spacing: normal;

letter-spacing: 0.2rem;

letter-spacing: 1px;

letter-spacing: 30%;

letter-spacing: -1px;

<section id="default-example">
  <p id="example-element">
    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.woff2");
  font-family: "Amstelvar";
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: "Amstelvar", serif;
}

Синтаксис

/* Keyword value */
letter-spacing: normal;

/* <length-percentage> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: -0.5px;
letter-spacing: 50%;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

Значения

Для этого свойства указывается одно значение из следующего списка:

normal

Обычный интервал между символами для текущего шрифта. В отличие от значения 0, это ключевое слово позволяет пользовательскому агенту изменять расстояние между символами для выравнивания текста.

<length-percentage>

Задаёт дополнительное расстояние между символами сверх расстояния по умолчанию. Значения могут быть отрицательными, но их диапазон может ограничиваться особенностями реализации. Пользовательские агенты не могут дополнительно увеличивать или уменьшать расстояние между символами для выравнивания текста.

Процентные значения вычисляются относительно ширины символа пробела в шрифте, применённом к тексту.

Примечание: Если значение letter-spacing не равно нулю, пользовательские агенты не применяют необязательные лигатуры, например функции OpenType liga (стандартные лигатуры) и clig (контекстные лигатуры), обычно управляемые свойством font-variant-ligatures. Эти функции можно явно включить с помощью свойства font-feature-settings.

Доступность

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

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

• Пояснения MDN к рекомендациям WCAG, рекомендация 1.4

• [Понимание критерия успеха 1.4.8

  Понимание WCAG 2.0 от W3C](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

Особенности интернационализации

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

<p lang="ar" dir="rtl">شسيبتنمك</p>

p {
  font-size: 3em;
  margin-inline-start: 5px;
}

Формальное определение

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

letter-spacing = 
  normal |
  <length>

Примеры

Задание `letter-spacing` с помощью значений длины

В этом примере показано несколько абзацев с разными значениями длины letter-spacing, чтобы вы могли сравнить их.

HTML

В HTML содержится несколько элементов <p> с текстом.

<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

CSS

Наш CSS задаёт каждому абзацу своё значение letting-spacing.

.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`, заданных длиной и процентами

В этом примере показано, что процентные значения letter-spacing полезны для адаптивного изменения размера текста.

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

HTML

В HTML содержится несколько элементов <p> с текстом, а также элемент <input type="checkbox">, с помощью которого мы переключаемся между значением letter-spacing, заданным длиной, и процентным значением letter-spacing.

<p class="x-small">X-small font-size (0.8em)</p>
<p class="small">Small font-size (1.3em)</p>
<p class="medium">Medium font-size (2em)</p>
<p class="large">Large font-size (3em)</p>
<p class="x-large">X-Large (3.5em)</p>

<form>
  <label for="ls-toggle">
    Toggle <code>letter-spacing</code> (off: <code>8px</code>, on:
    <code>12%</code>)
  </label>
  <input type="checkbox" id="ls-toggle" />
</form>

CSS

Сначала в CSS для каждого следующего абзаца задаётся всё большее значение font-size:

html {
  font-family: "Arial", sans-serif;
}

.x-small {
  font-size: 0.8em;
}

.small {
  font-size: 1.3em;
}

.medium {
  font-size: 2em;
}

.large {
  font-size: 3em;
}

.x-large {
  font-size: 3.5em;
}

По умолчанию для всех абзацев задано значение letter-spacing 8px. Однако при установленном флажке мы меняем значение letter-spacing на 12%:

p {
  letter-spacing: 8px;
}

p:has(~ form > input:checked) {
  letter-spacing: 12%;
}

Результат

Результат отображения выглядит так:

Обратите внимание: исходное значение межбуквенного интервала, заданное длиной, хорошо смотрится при больших размерах шрифта, но плохо — при маленьких. Теперь установите флажок и посмотрите, как процентный межбуквенный интервал подходит для всех строк, поскольку масштабируется вместе с размером шрифта.

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

Совместимость с браузерами

См. также

• font-kerning
• word-spacing
• Атрибут SVG letter-spacing