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
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 |
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.
letter-spacing
The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values ( em , rem ), absolute values ( px ) and the normal property, which resets to the font’s default. Using font-relative values is recommended, so that the letter-spacing increases or decreases appropriately when the font-size is changed, either by design or by user behavior.
The most important point to note when using letter-spacing is that the value specified does not change the default — it is added to the default spacing the browser applies (based on the font metrics). letter-spacing also supports negative values, which will tighten the appearance of text, rather than loosening it.
- Initial value: normal
- Applies to: inline boxes and text
- Inherited: yes
- Percentages: n/a
- Computed value: an absolute length
- Animation type: by computed value type
/* Keyword value */ letter-spacing: normal; /* values */ letter-spacing: 1px; letter-spacing: .25em; letter-spacing: .3rem; /* Global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: revert; letter-spacing: revert-layer; letter-spacing: unset;- Subpixel values: in most browsers, specifying a value that computes to less than 1px will result in no letter-spacing being applied.
- The letter-spacing property is animatable with CSS Transitions.
- One of the ways to fight against the space between inline block elements is setting letter-spacing: -4px; on the parent container of inline-block elements. You will then need to reset letter-spacing: normal; on the child elements.
- It is rarely if ever a good idea to letter space lower case letters.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.