Как увеличить расстояние между буквами в css

Межсимвольный, межстрочный интервал CSS. Расстояние между словами

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.

Межсимвольный интервал CSS: letter-spacing

Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).

Пример записи межсимвольного интервала:

Интервал между словами: word-spacing

Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:

Межстрочный интервал: line-height

С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .

Ниже – пример, как сделать межстрочный интервал CSS:

На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Итоги

Устанавливая интервал между словами, символами или строками, в первую очередь следите за тем, чтобы текст в итоге был легко читаем. С подобными свойствами необходимо обращаться аккуратно и всегда использовать их в меру, без фанатизма, иначе все текстовое содержимое грозит превратиться в неразборчивый набор букв.

letter-spacing

Свойство letter-spacing определяет межбуквенное расстояние в тексте.

Интерактивный пример

Синтаксис

/* Значения - ключевые слова */ letter-spacing: normal; /* Значения */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; /* Глобальные значения */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; 

Значения

Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения 0 , это ключевое слово позволяет агенту пользователя изменить расстояние между буквами для выравнивания текста.

Определяет дополнительное расстояние между буквами добавляющееся к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.

Формальный синтаксис

Примеры

HTML

p class="normal">letter spacingp> p class="em-wide">letter spacingp> p class="em-wider">letter spacingp> p class="em-tight">letter spacingp> p class="px-wide">letter spacingp> 

CSS

.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 могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойства, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.

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

• MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
• Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

Спецификации

Specification
CSS Text Module Level 3 # letter-spacing-property

Начальное значение	normal
Применяется к	все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется	да
Обработка значения	оптимальное значение состоит из абсолютной длины или ключевого слова normal
Animation type	длина

Браузерная совместимость

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Межбуквенный интервал CSS

normal на усмотрение браузера: при выравнивании текста по ширине дополнительное расстояние может быть отличным от нуля initial normal inherit наследует значение родителя unset наследует значение родителя

Свойство letter-spacing наследуется, применяется ко всем элементам, изменяет текст

  
Свойство letter-spacing наследуется, применяется ко всем элементам, изменяет текст

Что такое letter-spacing

Для каждого шрифта характерен свой промежуток между символами. Положительное значение свойства letter‑spacing добавляет к каждому символу дополнительное расстояние справа, тем самым увеличивая интервал между буквами. В том числе к символам без ширины, например, ⁠ (неразрывный пробел без ширины).

з
заказ
заказ⁠

 div 
з
заказ
заказ⁠

Отрицательное значение, наоборот, уменьшает отступ до следующего символа.

з
заказ
заказ⁠

 div 
з
заказ
заказ⁠

Как выровнять текст по центру или по правому краю с letter-spacing

Данный пункт будет бесполезен, когда браузеры будут выполнять эту рекомендацию w3.org: Letter-spacing must not be applied at the beginning or at the end of a line .

 div 
заказ

 div 
заказ

  
заказ

• font-kerning : межбуквенное расстояние каждой пары букв
• word-spacing : расстояние между словами
• text-indent : красная строка CSS
• line-height : расстояние между строк
• margin и padding : внешний и внутренний отступ до содержимого элемента

Промежуток между словами

Между словами используется символ пробела. Положительное значение свойства word-spacing задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.

Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела.

Отступы между inline или inline-block элементами

Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово про слово» в исходном коде выглядит так:

«слово в слово про слово»

Изменить это поведение можно с помощью свойства white-space . У тега по умолчанию white-space имеет значение pre и моноширинный шрифт.

Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent .

Те же правила и свойства CSS распространяются и на inline и inline-block элементы [подробнее]. Например, « слово в слово про слово » .

 span «слово в слово про слово»

Как убрать расстояние между inline-block элементами

Вариант 1. Удалить символ пробела

Вариант 2. Задать отрицательное значение word-spacing родительскому элементу

Как настроить интервал между inline-block элементами

1. 1
2. 2
3. 3
4. 4
5. 5

1. 1
2. 2
3. 3
4. 4
5. 5

• letter-spacing : промежуток между буквами
• word-wrap : перенос слов на следующую строку