letter-spacing (CSS property)

Spec
Inherited Initial Version
Yes normal CSS1, 2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

letter-spacing: { length | normal | inherit } ;

Description

This property sets the extra spacing between characters in the text content of an element.

Example

This style rule tightens the letter spacing in h1 headings by one pixel:

h1 {
  letter-spacing: -1px;
}

Value

A length value specifies extra space to be inserted between characters in addition to the default inter-character space. This space may not be adjusted by the user agent in order to justify text.

Percentage values are not applicable.

Negative length values are legal.

normal means there will be no extra space between characters. The space may be adjusted by the user agent in order to justify text.

Note that normal and 0 are not fully equivalent. If the value is normal, the user agent is allowed to adjust the letter spacing for justified text; if the value is 0, it cannot.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 exhibit an exotic bug whereby every other br element within an element whose letter-spacing is a length value will be ignored.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

User-contributed notes

ID:
#9
Contributed:
by awasson
Date:
Wed, 01 Dec 2010 18:26:32 GMT

More to the point about the webkit engine and units of measure:
At the moment webkit only appears to support pixel measurement for letter-spacing and it also appears to only consistently support whole units of measure.

There seems to be a degree of change when using decimal units but it is not consistent when evaluating against Firefox

example: p {letter-spacing:1px;}

Tested on Mac 10.6 with Safari 5.0.3 and Google Chrome 7.0.517.44

ID:
#8
Contributed:
by s427
Date:
Thu, 25 Nov 2010 09:32:21 GMT

I just ran a few tests regarding webkit: a value of -0.08em or less does not produce any visible result (while it works fine in Firefox), BUT a value of -0.09em does work. So it would seem that the problem does not lie in the notation, but rather in some limitation of the way letter-spacing is rendered by webkit... ? Meaning I suppose that webkit simply does not allow that level of fine-tuning. (But it's just a guess.)

Tested in Chrome 7.0, Safari 5.0.2 and Firefox 3.6.

ID:
#7
Contributed:
by c_t
Date:
Sun, 14 Nov 2010 17:36:41 GMT

There is also an open bug-report concerning the Webkit (i.e. Chrome/Safari) problem with decimal values. See https://bugs.webkit.org/show_bug.cgi?id=20606

Maybe the browser support for Safari and Chrome should be set to "buggy" instead until the mentioned bug is fixed? At least the W3C reference documentation does not state any lower limit to letter-spacing values that browsers should implement so I consider the Webkit behavior to be a bug. See http://www.w3.org/TR/CSS2/text.html#spacing-props

ID:
#5
Contributed:
by Paul O'B
Date:
Thu, 22 Apr 2010 15:34:23 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Regarding the last two comments Safari 4 seems to be working as expected. I will need to check older versions though.

ID:
#4
Contributed:
by stanza237
Date:
Thu, 22 Apr 2010 09:13:25 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Webkit (Safari and Chrome) doesn't support decimal values like 0.3pt

ID:
#3
Contributed:
by mattymcg
Date:
Fri, 26 Feb 2010 05:24:19 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Actually, support in Chrome and Safari is buggy — the webkit engine only support a pixel-based value for letter-spacing. Setting letter-spacing to -0.05em, for example, works fine in Firefox but not in Chrome or Safari.

ID:
#1
Contributed:
by AlexW
Date:
Thu, 07 Feb 2008 01:17:41 GMT

AFAIK Percentage values seem to have no effect when used in letter-spacing.

Related Products