Раздвигаем буквы на CSS: свойство letter-spacing

Свойство letter-spacing — одно из базовых средств CSS-типографики, которое управляет расстоянием между буквами текста. Оно позволяет сделать текст более разреженным или, наоборот, плотным. Сегодня это свойство используется повсеместно — от стилизации логотипов до улучшения читаемости в длинных абзацах. С января 2018 года оно находится в статусе Widely Available в Baseline, а значит, поддерживается всеми современными браузерами.

Исторический контекст

Ещё в печатной типографике существовало понятие «треккинг» — равномерное изменение интервала между буквами. При наборе текста дизайнеры вручную регулировали плотность шрифта, чтобы добиться ровных колонок и гармоничного вида страницы. С появлением веба потребность в этом не исчезла: разные шрифты на экране могут казаться слишком плотными или наоборот «рассыпаться». Для решения этих задач в CSS и было добавлено свойство letter-spacing. Сегодня оно является неотъемлемой частью любой верстки, где важен визуальный ритм.

Базовое применение

.wide {
  letter-spacing: 5px; /* делаем текст более разреженным */
}

.tight {
  letter-spacing: -1px; /* немного уплотняем текст */
}

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

Стилизация заголовков

.title {
  font-size: 32px;
  letter-spacing: 8px; /* увеличиваем интервал для выразительности */
  text-transform: uppercase;
}

.subtitle {
  font-size: 20px;
  letter-spacing: 3px; /* делаем подзаголовок чуть шире */
  color: #444;
}

Интервалы между буквами особенно выразительно смотрятся в заголовках и слоганах. Разреженный текст ассоциируется с современным дизайном и минимализмом.

Пример с декоративным эффектом

.decor {
  font-size: 24px;
  letter-spacing: 12px; /* превращаем текст в графический элемент */
  font-weight: bold;
  color: #2c3e50;
}

Большой letter-spacing превращает текст в графический элемент. Это часто используют в логотипах, постерах и сайтах с акцентом на визуальное оформление.

Выводы

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.