letter-spacing: расстояние между знаками
letter-spacing регулирует дополнительное расстояние между знаками и помогает оформить короткие метки или заголовки.
Назначение
letter-spacing регулирует дополнительное расстояние между знаками и помогает оформить короткие метки или заголовки.
Как это работает
Значение em масштабируется относительно размера шрифта. Положительная величина раздвигает знаки, отрицательная сближает; значение normal оставляет обычную обработку шрифта.
Пример
<style>
.eyebrow{letter-spacing:.08em;text-transform:uppercase}.body{letter-spacing:normal}
</style>
<p class="eyebrow">Практика CSS</p><p class="body">Абзац оставлен с обычным интервалом.</p>Что должно получиться
Короткая метка выглядит более разреженной, а основной текст сохраняет привычный ритм. Ширина строки при увеличении интервала возрастает, что может изменить переносы.
Граница применения и частая ошибка
Сильное отрицательное расстояние создаёт наложение букв и ухудшает чтение. Настройки, подходящие крупному заголовку, редко подходят мелкому основному тексту.
Самостоятельная проверка
Сравните 0, .08em и -.03em на русской строке. Увеличьте размер текста в браузере и проверьте, что буквы не перекрываются и не обрезаются контейнером.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.