Свойтво letter-spacing, как уже понятно из названия, можно использовать для увеличения или уменьшения расстояния между буквами. Если вы немного знакомы с графическим дизайном, то оно напомнит вам наклон букв — только в этом случае не используется PhotoShop или другие графические программы.
На самом деле нет ничего сложного в использовании свойства letter-spacing. Свойство принимает численные значения, в единицах измерения принимается px, em и %. Можно использовать положительные или отрицательные значения, если вы желаете добавить расстояние между буквами или сократить. Обратите внимание на пример ниже.
Чтобы увеличить расстояние между буквами нужно использовать положительное значение:
p{
letter-spacing: 5px;
}
Если увеличить расстояние между буквами на 5px, можно добиться эффекта как на картинке ниже.
Даже если кажется, что 5px совсем немного, мы добиваемся значительного увеличения расстояния. Сначала проверьте результат, прежде чем запустить изменения на продакшн.
Итак, чтобы уменьшить расстояние между буквами мы используем отрицательное значение. Пример ниже:
p{
letter-spacing: -3px;
}
На этот раз мы добиваемся совсем другого эффекта.
Текст получился слишком сжатым. Если вы намеренно решились использовать это свойство в целях уменьшения расстояния между буквами, то вам нужно знать, что тем самым это может повлиять на читабельность вашего текста и вашим пользователям будет сложно читать то, что получится на выходе.
Свойство поддерживается во всех основных браузерах. Хотя оно и не так популярно, но является отличным способом достичь нужного результата
Статью перевел timurziev. Оригинал на Www.cssnewbie.com доступен по ссылке.