На этой странице

CSS Меж буквенное расстояние


letter-spacing – Задает расстояние между символами текста.

Свойство может имеет относительные и абсолютные значения.

Ключевые слова


<letter-spacing>

<letter-spacing> Возможные значения:

[ normal | inherit | initial | unset ]

Значение по умолчанию считается normal.

Значения - <length>


letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

Значения:


<normal>

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

<length>

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

Пример:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Расстояние между символами в словах</title>
          <style>
@media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 { 
   color: blue; 
}
p {
    font-size:14pt;
} 
.text { 
     letter-spacing: normal; font-weight: normal; 
}
.text1 { 
    font-size: 14pt; color: red; letter-spacing: 5mm;
    line-height: 5mm; 
}
.normal   { 
    -spacing: normal; 
}
.em-wide  { 
    letter-spacing: 0.4em; 
}
.em-wider { 
    letter-spacing: 1em; 
}
.em-tight { 
    letter-spacing: -0.05em; 
}
.px-wide  { 
    letter-spacing: 6px; 
}
</style>
  </head>
  <body>
    <h1>Расстояние между символами в словах</h1>
    <p class="text">letter-spacing: normal; font-weight: normal</p>
    <p class="text1">font-size: 14pt; color: red; letter-spacing: 5mm</p>
    <p class="normal">-spacing: normal</p>
    <p class="em-wide">letter-spacing: 0.4em</p>
    <p class="em-wider">letter-spacing: 1em</p>
    <p class="em-tight">letter-spacing: -0.05em</p>
    <p class="px-wide">letter-spacing: 6px</p>
  </body>
</html>

Открыть пример в новом окне

Расстояние между символами в словах


Расстояние между символами в словах: font
Расстояние между символами в словах

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

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

Рекомендуемые материалы

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