- letter-spacing
- Try it
- Syntax
- Values
- Accessibility concerns
- Internationalization concerns
- Formal definition
- letter-spacing
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- letter — spacing
- Пример
- Как понять
- Как пишется
- Ещё примеры
- CSS letter-spacing Property
- Syntax
- Example of the letter-spacing property:
- Result
- Example of the letter-spacing property with the transition property:
- Additional information
- Values
- Browser support
- Browser Support
- CSS Syntax
- Property Values
- Related Pages
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
letter-spacing
The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.
Try it
Syntax
/* Keyword value */ letter-spacing: normal; /* values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; /* Global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: revert; letter-spacing: revert-layer; letter-spacing: unset;
Values
The normal letter spacing for the current font. Unlike a value of 0 , this keyword allows the user agent to alter the space between characters in order to justify text.
Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
Accessibility concerns
A large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.
Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.
Internationalization concerns
Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | an optimum value consisting of either an absolute length or the keyword normal |
Animation type | a length |
letter-spacing
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
Синтаксис
letter-spacing: значение | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).
normal Задает интервал между символами как обычно. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
p Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства letter-spacing
Объектная модель
[window.]document.getElementById(» elementID «).style.letterSpacingБраузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
letter — spacing
letter — spacing задаёт межбуквенное расстояние — интервал между символами в тексте.
Пример
Скопировать ссылку «Пример» Скопировано
Стандартное расстояние между символами:
p letter-spacing: normal;>
p letter-spacing: normal; >
Расстояние, заданное вручную с помощью значений длины:
p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px;>
p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; >
Значение, относительно другого элемента:
p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;>
p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; >
Как понять
Скопировать ссылку «Как понять» Скопировано
С помощью letter — spacing можно сжать или растянуть текст на веб-странице. При этом расстояние между буквами и другими символами уменьшается или увеличивается, а сами символы остаются прежнего размера.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Задать межбуквенное расстояние можно в пикселях px , дюймах in , пунктах pt или других единицах, которые используются в CSS.
Значение может быть отрицательным, например, -1px . В этом случае убедитесь, что текст всё ещё можно прочесть, потому что, скорее всего, буквы «склеятся».
Вот какие значения можно задать:
- normal — стандартное межбуквенное расстояние, которое задано для шрифта (значение по умолчанию).
- конкретное значение — положительное или отрицательное значение в любых единицах величины. Значение может быть дробным. Положительное значение добавляется к стандартному расстоянию между буквами, а отрицательное — вычитается из него.
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем задать расстояние между символами разными способами:
Стандартное расстояние normal.
Чуть шире, относительно стандартного. Задаём 0.4em.
Ещё шире, относительно стандартного: 1em.
Немного сжимаем с помощью отрицательного значения -0.05em.Добавляем по 6px между символами.
p class="normal">Стандартное расстояние normal.p> p class="em-wide">Чуть шире, относительно стандартного. Задаём 0.4em.p> p class="em-wider">Ещё шире, относительно стандартного: 1em.p> p class="em-tight"> Немного сжимаем с помощью отрицательного значения -0.05em. p> p class="px-wide">Добавляем по 6px между символами.p>
.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;>
.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; >
Это не совсем то, что нужно. Но как тогда правильно перенести межбуквенное расстояние из Фотошопа в вёрстку?
Нужно использовать следующую хитрую функцию:
- z — размер шрифта ( font — size ) в пикселях.
- x — значение межбуквенного расстояния из Фотошоп.
- y — результат вычисления, нужное значение для свойства letter — spacing в пикселях.
Подставим значения с картинки выше:
Можно также вычислить межбуквенное расстояние в em . Для этого используй формулу:
Где x — значение межбуквенного расстояния из Фотошоп.
CSS letter-spacing Property
The CSS letter-spacing property allows specifying the spaces between letters/characters in a text.
Values supported by letter-spacing include parent-relative values (percentage), font-relative values (em, rem), absolute values (px) and the normal property, which resets to the font’s default.
The letter-spacing property supports negative values.
The letter-spacing is transitionable that’s why the spacing will change smoothly if a transition is defined.
Initial Value | normal |
Applies to | All elements. It also applies to ::first-letter and ::first-line. |
Inherited | Yes. |
Animatable | Yes. |
Version | CSS1 |
DOM Syntax | object.style.letterSpacing = «5px»; |
Syntax
letter-spacing: normal | length | initial | inherit;
Example of the letter-spacing property:
html> html> head> title>Title of the document title> style> p < letter-spacing: normal; > .spacing < letter-spacing: 4px; > .spacing-negative < letter-spacing: -4px; > style> head> body> h2>Letter-spacing property example h2> p>This is a paragraph. p> p class="spacing">This is a paragraph. p> p class="spacing-negative">This is a paragraph. p> body> html>
Result
In the given example the first one is a normal paragraph, for the second paragraph the letter-spacing is set to 4px, and for the third paragraph a negative value is set (-4px).
In the example below the letter-spacing is used with the transition property. You need to hover over the text to see the transition.
Example of the letter-spacing property with the transition property:
html> html> head> title>Title of the document title> style> body < background-color: #fff; color: #666; font-size: 1em; font-family: Roboto, Helvetica Sans-serif; > .example1 < background-color: #666; color: #eee; padding: 1em; letter-spacing: .5em; -webkit-transition: letter-spacing .5s ease; transition: letter-spacing .5s ease; > .example1:hover < letter-spacing: normal; > .example2 < background-color: #eee; color: #666; padding: 1em; > style> head> body> h2>Letter-spacing property example h2> div class="example1"> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil. p> div class="example2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam! div> div> body> html>
Additional information
- In almost all the browsers, if you define a value computing to less than 1px (subpixel values), the letter-spacing property will not be applied.
- Letter-spacing lowercase letters is not a good idea.
- You can animate this property using the CSS transitions.
Values
Value | Description | Play it |
---|---|---|
normal | Means that there won’t be extra spaces between characters. It is the default value of this property. | Play it » |
length | Defines an extra space between characters. Negative values are allowed. | Play it » |
initial | Makes the property use its default value. | Play it » |
inherit | Inherits the property from its parents element. |
Browser support
Set the letter spacing for , , and elements:
The letter-spacing property increases or decreases the space between characters in a text.
Default value: | normal |
---|---|
Inherited: | yes |
Animatable: | yes. Read about animatable Try it |
Version: | CSS1 |
JavaScript syntax: | object.style.letterSpacing=»3px» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
normal | Defines normal space between characters. This is default | Demo ❯ |
length | Defines a length that is used as the space between characters (negative values are also allowed). Read about length units | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.