UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
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.
p {
letter-spacing: 0.0625em;
}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.
Syntax
letter-spacing: normal | <length>- 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
Values
/* Keyword value */
letter-spacing: normal;
/* <length> 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;Worth noting…
- Subpixel values: in most browsers, specifying a value that computes to less than
1pxwill result in noletter-spacingbeing applied. - The
letter-spacingproperty 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 resetletter-spacing: normal;on the child elements. - It is rarely if ever a good idea to letter space lower case letters.
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 30 | 2 | 9 | 12 | 6.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 4.4 | 4.0-4.1 |
Looks like subpixel letter-spacing made it into Chrome. Idk what version it was added, but it’s working as of 30.0.1599.101. Unfortunately it’s specific to the Blink engine (not WebKit) so it still doesn’t work in Safari (at least as of 6.0.5; I’ll have to test it on 7/Mavericks when I get home).
With Chrome, IE & Firefox all supporting it, it’s pretty standardized at this point, which is great. The difference between 1px and 0.5px at small font sizes is huge.
Small Comment.
SVG support for firefox for letter-spacing and word-spacing is still not here, there’s a known bug.
https://bugzilla.mozilla.org/show_bug.cgi?id=371787
‘It is rarely if ever a good idea to letter space lower case letters.’
I’m just curious as to why you say this, can you give any good/bad examples? What about headings in lower case?
Thanks
Perhaps noteworthy: recently I’ve run into the experience where ‘letter-spacing’ is affecting the padding within the element. I was not aware that it should be doing that. This is the CSS I’m using; I hope I’m not confusing the issue with something else going on.
I’ve also got this issue. Letter-spacing appears to add a bit of space to the end of the word on the right. In box-model terms, it’s the element itself (i.e. not margin or padding) which is proving to be a bit of a problem.
Wouldn’t box-sizing: border-box; resolve the issue?
Just stumbled on a similar issue myself.
I’ve done a bit of testing and it seems that that last letter also generates the letter-space which creates the visual imbalance in the layout.
I found this simple workaround to correct things:
h2 {
font-family: ‘Oswald’, sans-serif;
font-size: 1.25em;
text-transform: uppercase;
color: #dca013;
font-weight: 300;
letter-spacing: 1em;
padding: 0 0 0 1em; /* compensates for the extra spacing */
}
(although my instinct suggests it should be .5em)
Got here from a google search of letter-spacing. Chris’ hack seems to work nicely!
Chris’ solution didn’t work for me since I had a border around my text (a button) as well – so I added a “text indent” instead using this bit of css: text-indent: 15px; Obviously replace the 15px with whatever value your letter spacing is. Works great.
Remember to test (especially negative) letter-spacing in different browsers. Firefox and Chrome render spaced text quite differently : (
I’m not sure that parent-relative values work for letter spacing. I’m trying to figure out how to make a line of text’s letter spacing responsive to the width of its container and a percentage isn’t working. Any tips? (I may have to go with some javascript to resolve it.)
Maybe a combo of text-align: justify and letter spacing?
Well, the problem with that if letter spacing is static, it loses the ability for it to be truly responsive to the width of the container. I ended up wrapping each letter in a and defining a width of 4% on each character. (There’s 25 characters = 100% width). Seems to work out just fine. Although, I do lose the SEO benefit for that string of words. I suppose I can use javascript to wrap each character with a on page load to regain the benefit.
Oops seems like the word “span” encased with “less than” and “greater than” symbols got stripped in my last comment. That’s what I get for not previewing before posting. Anyway, I wrapped each of the characters with a “span”.
With DirectWrite enabled for everybody since chrome 37, chrome now also supports sub-pixel values for letter spacing and font-size. However, at the moment end-users can disable direct write in chrome://flags if they desire.
“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”
Nitpicking, but I think a better way to say this would be “does not replace the default” rather than “does not change the default”.
Does anyone know what 100 A/V or 200 A/V equivalent in indesign is in css or in wordpress? I’m trying to communicate with my programmer and she says she doesn’t understand 100 or 200 A/V, I need to give her the numbers in wordpress language.
Anyone?
Thank you!!!
Thank you for the help.