Как изменить межбуквенный интервал css

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

После недолгих раздумий можно решить, что подобного рода необходимость у вас не возникнет. Однако, народная мудрость гласит: «Никогда не говори никогда». Это изречение будет особенно уместно, если вы занимаетесь версткой профессионально.

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

Видеоверсия:

Свойство letter-spacing

При помощи этого параметра мы можем управлять межсимвольным интервалом. В качестве значений подходят те же единицы измерения, которые мы используем при задании размера текста. В связи с этим советую изучить урок по размеру текста, если вы этого еще не сделали. Сперва, давайте попробуем увеличить межбуквенный интервал на 2 px.

body { letter-spacing: 2px; }

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

body { letter-spacing: .1em; }

Как и в предыдущем случае, расстояние между буквами увеличилось, но еще на большую величину. Результат обеих CSS правил можно увидеть на иллюстрации ниже.

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

Уменьшение расстояния между буквами

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

body { letter-spacing: -1px; }

Вот как это выглядит на практике:

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

Наследование

Свойство letter-spacing является наследуемым. Это означает, что изменив расстояние между буквами для одного элемента, вложенные в него теги унаследуют эти же значения. Например, представим что мы изменили межсимвольное расстояние для куска текста с классом morning (<div class="morning">).

Теперь, все вложенные в него абзацы будут наследовать значение родителя. Для того, чтобы сделать стандартное межбуквенное расстояние для одного из абзацев, нужно воспользоваться все тем же свойством letter-spacing, только придав ему значение normal.

Значение normal всегда будет возвращать текст к стандартному интервалу между символами.

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

В общем, как видите, в управлении межбуквенным интервалом нет ничего сложного. Главное — не забывайте про удобство читателя.

А на этом у меня все. Смею предположить что вам все понятно, если нет — задавайте свои вопросы в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.

• hanging-punctuation
• hyphens
• letter-spacing
• line-break
• overflow-wrap
• paint-order
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
• text-size-adjust
• text-transform
• white-space
• word-break
• word-spacing

• letter-spacing
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-decoration-skip
• text-decoration-skip-ink
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-rendering
• text-shadow
• text-underline-position
• text-transform
• white-space
• word-spacing

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>letter-spacing</title>
    <style>
      em {
        letter-spacing: 2px;
      }
    </style>
  </head>
  <body>
    <p>
      Кульминация, после осторожного анализа, существенно
      перечеркивает экваториальный большой круг небесной
      сферы, как это случилось в 1994 году с кометой
      <em>Шумейкеpов-Леви 9</em>.
    </p>
  </body>
</html>