The Complete CSS Letter Spacing Interactive Tutorial

Table of Contents

What Is CSS Letter-Spacing?

letter-spacing controls the amount of horizontal space between characters in text. Think of it as “tracking” in typography tools. It can be:

Positive (spread letters apart)
Negative (pull letters closer together)
Normal (the browser/font’s default spacing)

Important: letter-spacing affects the spacing between characters, not between words. For word gaps, use word-spacing.

Your First Letter-Spacing Experiments

Let’s start with the basics: a few simple values and how they feel. Notice how small values can already make a big difference.

.demo-title {
  letter-spacing: normal;
}

.demo-title {
  letter-spacing: 0.08em;
}

.demo-title {
  letter-spacing: -0.04em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  border: 3px solid #111;
  background: #f6f6f6;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.demo-title {
  font-size: 34px;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
}

.demo-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.note {
  font-size: 14px;
  opacity: 0.85;
}


  
    Letter spacing: Hello CSS
    
      Tiny changes can feel huge in headings. Try each snippet and compare.
    
    
      Hint: negative values can look “tight” fast, especially on bold fonts.

Normal vs 0: They Are Not Always The Same

You might wonder: “Why not just use letter-spacing: 0?” Because normal means “use the font’s default spacing,” and that default may not be exactly the same as zero. If you want to remove any custom spacing you applied earlier, prefer normal.

Units For CSS Letter-Spacing: px vs em vs rem

Letter spacing is a length value, so you can use units like px, em, or rem. Here’s how they behave:

px: absolute. A constant amount of space regardless of font size.
em: relative to the element’s font-size. If text gets bigger, spacing scales too.
rem: relative to the root (html) font size. Scales with global typography choices.

For headings and UI labels, em is often the most “typography-friendly” option because it scales with the text.

.sample {
  letter-spacing: 2px;
}

.sample {
  letter-spacing: 0.08em;
}

.sample {
  letter-spacing: 0.12rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 12px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.panel {
  border: 3px solid #111;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.row {
  display: grid;
  gap: 8px;
}

.label {
  font-size: 13px;
  opacity: 0.85;
}

.sample {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: 34px;
}

.sample.small {
  font-size: 22px;
  font-weight: 750;
}

kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.95em;
  border: 2px solid #111;
  padding: 0.1em 0.4em;
  background: #f6f6f6;
}


  
    
      Same letter-spacing value applied to two font sizes
      TRACKING TEST
      TRACKING TEST
    

    
      
        Tip: em scales with the element’s font size. px does not.

Interactive Playground: Dial Letter Spacing Up And Down

Try small values first, then go larger.

Letter spacing (em) Font size (rem)

.hero {
  font-size: 2.4rem;
  letter-spacing: 0.06em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 12px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.box {
  border: 3px solid #111;
  background: #f6f6f6;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.hero {
  margin: 0;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
}

.badge {
  justify-self: start;
  border: 2px solid #111;
  background: #fff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
}


  
    Try negative and large values
    Letter Spacing Playground
    
      Watch how the “feel” changes. Too much spacing can look dramatic, but it can also hurt readability.

Why Negative Letter-Spacing Can Look Better On Bold Headings

Big, bold headlines often “want” slightly tighter spacing because thick letterforms visually expand. A small negative value like -0.02em to -0.06em can look more balanced. But go too far and letters start colliding, especially with fonts that have tight shapes.

Inheritance: Where To Apply Letter-Spacing

letter-spacing is inherited. If you set it on a parent container, children will use it too. That can be helpful (site-wide vibe) or harmful (everything gets “tracked out,” including paragraphs).

A good beginner rule: apply letter-spacing to the specific element that needs it (like a label, button text, or heading), not to a whole wrapper, unless you truly want a consistent effect.

.card {
  letter-spacing: 0.1em;
}

.card .title {
  letter-spacing: 0.1em;
}

.card .meta {
  letter-spacing: 0.12em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  border: 3px solid #111;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.title {
  margin: 0;
  font-size: 28px;
  font-weight: 850;
  line-height: 1.1;
}

.body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
}

.meta {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.meta span {
  border: 2px solid #111;
  padding: 4px 8px;
  background: #f6f6f6;
}


  
    
      New
      CSS
      Typography
    
    Where should spacing live?
    
      Setting letter-spacing on the whole card affects everything inside, including paragraphs.
      Try each snippet and see which one feels most readable.

Common Use Cases For Letter-Spacing

Letter-Spacing For Uppercase Labels And Badges

Uppercase text often benefits from a little extra spacing because it can look crowded. This is especially common in UI: pills, tags, navigation labels, and small “meta” text.

.tag {
  letter-spacing: 0.12em;
}

.tag {
  letter-spacing: 0.2em;
}

.tag {
  letter-spacing: 0.06em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.row {
  border: 3px solid #111;
  background: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #111;
  background: #f6f6f6;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.dot {
  width: 10px;
  height: 10px;
  border: 2px solid #111;
  background: #fff;
  border-radius: 999px;
}

.text {
  margin: 0;
  font-size: 16px;
}


  
    Featured
    Beginner
    Typography
    Pick a snippet and see which spacing feels “premium” vs “too airy”.

Letter-Spacing For Buttons

Buttons are short. Short text can handle a bit more spacing without becoming annoying to read. Just don’t go overboard: the goal is “confident,” not “spelling out each letter like a robot.”

.btn {
  letter-spacing: 0em;
}

.btn {
  letter-spacing: 0.08em;
}

.btn {
  letter-spacing: 0.16em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.panel {
  border: 3px solid #111;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  border: 3px solid #111;
  background: #f6f6f6;
  padding: 12px 16px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
}

.btn.primary {
  background: #111;
  color: #fff;
}

.hint {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}


  
    
      
      
      
    
    
      Button labels can handle extra tracking because they’re short. Try each snippet.

Readability And Accessibility Warnings

Letter spacing can improve clarity in short UI labels, but it can also make long text harder to read. Here are some beginner-safe guidelines:

For paragraphs, keep letter spacing very small (often normal is best).
Avoid large positive letter spacing on body text. It slows reading and breaks word shapes.
Be careful with negative letter spacing on smaller font sizes. Letters can merge.

If you’re styling lots of content, test on mobile sizes. Spacing issues become obvious fast on smaller screens.

.article p {
  letter-spacing: normal;
}

.article p {
  letter-spacing: 0.06em;
}

.article p {
  letter-spacing: -0.03em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.article {
  border: 3px solid #111;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.article h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.2;
}

.article p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  max-width: 72ch;
}

.tip {
  font-size: 13px;
  opacity: 0.85;
}


  
    Paragraph readability test
    
      Letter spacing changes how your brain recognizes word shapes.
      For longer text, the default spacing is usually the most comfortable.
    
    
      Try each snippet and notice how quickly your reading speed changes.
    
    
      If you want a “cleaner” look for paragraphs, you’ll often get better results by adjusting
      font-size, line-height, and max-width instead.

Advanced Patterns You’ll See Everywhere

All Caps + Letter-Spacing

One classic combo is text-transform: uppercase plus a bit of letter spacing. It’s common for navigation labels, section headings, or small UI meta text.

If you’re using uppercase, start around 0.06em to 0.14em and adjust from there.

Learn more about text-transform: uppercase in the CSS Uppercase Interactive Tutorial.

.nav a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav a {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.nav a {
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.nav {
  border: 3px solid #111;
  background: #fff;
  padding: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.nav a {
  display: inline-block;
  padding: 10px 12px;
  border: 2px solid #111;
  background: #f6f6f6;
  text-decoration: none;
  color: #111;
  font-weight: 850;
  font-size: 13px;
}

.nav a.active {
  background: #111;
  color: #fff;
}

.note {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}


  
    Overview
    Docs
    Examples
    About
  
  
    Too much spacing makes labels look “detached.” Aim for confident, not floaty.

Letter-Spacing And Font-Weight Interactions

As font weight increases, letters visually “grow” and can feel crowded. That’s why you’ll often see:

Bold headings with slightly negative spacing
Uppercase labels with slightly positive spacing

Learn more about font-weight in the CSS Bold Text Interactive Tutorial.

.headline {
  font-weight: 900;
  letter-spacing: -0.04em;
}

.headline {
  font-weight: 900;
  letter-spacing: 0em;
}

.headline {
  font-weight: 900;
  letter-spacing: 0.06em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.block {
  border: 3px solid #111;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 10px;
}

.headline {
  margin: 0;
  font-size: 42px;
  line-height: 1.05;
}

.caption {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
  max-width: 80ch;
}


  
    Bold Headline Balance
    
      With heavy fonts, a little negative tracking can look more “designed”.
      Try each snippet and see which one feels most balanced.

Debugging: Why Letter-Spacing “Does Nothing”

If you changed letter spacing and nothing happened, it’s usually one of these:

You’re styling the wrong element (the text is inside a child element).
Another rule is overriding yours (specificity or source order).
You’re looking at a font size so small that tiny spacing changes are hard to notice.
You used an invalid value (for example, forgetting the unit: letter-spacing: 2 is invalid).

A quick test: temporarily set something dramatic like letter-spacing: 0.4em. If that still doesn’t change anything, you’re almost certainly not targeting the right element or you’re being overridden.

.container {
  letter-spacing: 0.25em;
}

.title {
  letter-spacing: 0.25em;
}

.container .title {
  letter-spacing: 0.25em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.container {
  border: 3px solid #111;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 10px;
}

.title {
  margin: 0;
  font-size: 30px;
  font-weight: 850;
  line-height: 1.1;
}

.small {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 70ch;
}

.small strong {
  font-weight: 850;
}


  
    Target the right element
    
      If you apply spacing to .container, it affects everything inside (because it inherits).
      If you apply it to .title, it affects only the heading.

Practical Mini Patterns You Can Steal

Pattern: Section “Kicker” Label

A “kicker” is that small label above a heading, often uppercase with spacing.

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.section {
  border: 3px solid #111;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 10px;
}

.kicker {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.85;
}

.title {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
}

.body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  max-width: 70ch;
}


  
    Chapter 3
    Typography that feels intentional
    
      Kicker labels are short, so they can handle extra spacing. Pick a snippet that feels crisp without drifting apart.

Pattern: Tighten A Big Product Title

For big, bold titles, try slightly negative letter spacing. It often makes the title feel more “professional.”

.product-title {
  letter-spacing: -0.05em;
}

.product-title {
  letter-spacing: -0.02em;
}

.product-title {
  letter-spacing: 0em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  border: 3px solid #111;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.product-title {
  margin: 0;
  font-size: 44px;
  font-weight: 950;
  line-height: 1.02;
}

.meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.meta span {
  border: 2px solid #111;
  background: #f6f6f6;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  max-width: 72ch;
  opacity: 0.95;
}


  
    
      New
      Limited
      Drop
    
    Supernova Sneakers
    
      Try each snippet. Tight tracking can make bold titles feel more “locked in,” but too much looks cramped.

CSS Letter Spacing Summary

Use letter-spacing to control the space between characters (tracking).
Prefer em for typography-friendly scaling, especially on headings and labels.
Keep paragraph spacing at the default. Big tracking on long text hurts readability.
Remember it inherits, so apply it carefully (often to the exact element you want).

Leave the first comment (Cancel Reply)

You must be logged in to post a comment.