letter-spacing

Avatar of Sara Cope
Sara Cope on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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 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.

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

ChromeFirefoxIEEdgeSafari
3029126.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1221234.44.0-4.1