letter-spacing

letter-spacing задаёт межбуквенное расстояние — интервал между символами в тексте.

Стандартное расстояние между символами:

        
          
          p {  letter-spacing: normal;}
          p {
  letter-spacing: normal;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Расстояние, заданное вручную с помощью значений длины:

        
          
          p {  letter-spacing: 0.3em;  letter-spacing: 3px;  letter-spacing: 0.3px;}
          p {
  letter-spacing: 0.3em;
  letter-spacing: 3px;
  letter-spacing: 0.3px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значение, относительно другого элемента:

        
          
          p {  letter-spacing: inherit;  letter-spacing: initial;  letter-spacing: unset;}
          p {
  letter-spacing: inherit;
  letter-spacing: initial;
  letter-spacing: unset;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Задать межбуквенное расстояние можно в пикселях px, дюймах in, пунктах pt или других единицах, которые используются в CSS.

Значение может быть отрицательным, например, -1px. В этом случае убедитесь, что текст всё ещё можно прочесть, потому что, скорее всего, буквы «склеятся».

Вот какие значения можно задать:

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

Попробуем задать расстояние между символами разными способами:

        
          
          <p class="normal">Стандартное расстояние normal.</p><p class="em-wide">Чуть шире, относительно стандартного. Задаём 0.4em.</p><p class="em-wider">Ещё шире, относительно стандартного: 1em.</p><p class="em-tight">  Немного сжимаем с помощью отрицательного значения -0.05em.</p><p class="px-wide">Добавляем по 6px между символами.</p>
          <p class="normal">Стандартное расстояние normal.</p>
<p class="em-wide">Чуть шире, относительно стандартного. Задаём 0.4em.</p>
<p class="em-wider">Ещё шире, относительно стандартного: 1em.</p>
<p class="em-tight">
  Немного сжимаем с помощью отрицательного значения -0.05em.
</p>
<p class="px-wide">Добавляем по 6px между символами.</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .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;}
          .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: 20px, то получишь следующий результат.

Это не совсем то, что нужно. Но как тогда правильно перенести межбуквенное расстояние из Фотошопа в вёрстку?

Нужно использовать следующую хитрую функцию:

x * z / 1000 = y

• z — размер шрифта (font-size) в пикселях.
• x — значение межбуквенного расстояния из Фотошоп.
• y — результат вычисления, нужное значение для свойства letter-spacing в пикселях.

Подставим значения с картинки выше:

20 * 18 / 1000 = 0.36px

Можно также вычислить межбуквенное расстояние в em. Для этого используй формулу:

x / 1000 = y

Где x — значение межбуквенного расстояния из Фотошоп.

+ Развернуть