Presets

Default browser text spacing

Target Element

Selector: p

Letter Spacing

↔ Normal

Word Spacing

Line Height

Comfortable

Text Indent

White Space

Collapses whitespace, wraps text

Preview Width

500px

Live Preview

Letter: 0emWord: 0emLine: 1.5

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking).

Before & After Comparison

Default Spacing

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Your Settings

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Spacing Examples

Tight (-0.02em)

Typography spacing affects readability.

Normal (0)

Typography spacing affects readability.

Loose (0.05em)

Typography spacing affects readability.

All Caps (0.1em)

Typography matters

Generated CSS

Minimal CSS
p {
}
Full CSS with Comments
/* Text Spacing - Normal */
p {
  /* Letter Spacing: Space between characters */
  letter-spacing: 0;

  /* Word Spacing: Space between words */
  word-spacing: 0;

  /* Line Height: Space between lines */
  line-height: 1.5;

  /* Text Indent: First line indentation */
  text-indent: 0;

  /* White Space: Whitespace handling */
  white-space: normal;

  /* Text Wrap: Line wrapping behavior */
  text-wrap: wrap;

  /* Tab Size: Tab character width */
  tab-size: 4;
  -moz-tab-size: 4;

  /* Hanging Punctuation: Punctuation outside text box */
  hanging-punctuation: none;
}
Copied to clipboard!

Code Examples

Headlines with Tight Tracking

h1, h2, h3 {
  letter-spacing: -0.03em;
  line-height: 1.1;
  word-spacing: normal;
}

/* Larger headlines can be even tighter */
.display-heading {
  letter-spacing: -0.05em;
  line-height: 0.95;
}

Body Text Optimization

body {
  letter-spacing: 0.01em;
  word-spacing: 0.02em;
  line-height: 1.6;
}

/* First paragraph indent */
article p + p {
  text-indent: 1.5em;
}

/* No indent after headings */
article h2 + p {
  text-indent: 0;
}

All Caps Text

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  word-spacing: 0.15em;
  font-weight: 500;
}

/* Small caps variation */
.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

Responsive Typography

/* Mobile: tighter spacing */
.content {
  letter-spacing: normal;
  word-spacing: normal;
  line-height: 1.5;
}

/* Desktop: slightly looser */
@media (min-width: 768px) {
  .content {
    letter-spacing: 0.01em;
    word-spacing: 0.03em;
    line-height: 1.7;
  }
}

Text Wrap Balance (Modern CSS)

/* Balance headlines for even line lengths */
h1, h2 {
  text-wrap: balance;
  max-width: 25ch;
}

/* Pretty wrap avoids orphans */
p {
  text-wrap: pretty;
}

/* Fallback for unsupported browsers */
@supports not (text-wrap: balance) {
  h1, h2 {
    max-width: 20ch;
  }
}

Code Block Formatting

pre, code {
  font-family: 'Fira Code', monospace;
  tab-size: 2;
  -moz-tab-size: 2;
  white-space: pre;
  letter-spacing: 0;
  line-height: 1.6;
}

/* Inline code */
:not(pre) > code {
  letter-spacing: -0.02em;
  padding: 0.1em 0.3em;
}

CSS Properties Reference

Text Spacing Properties

PropertyValuesDescription
letter-spacingnormal | lengthSpace between characters
word-spacingnormal | lengthSpace between words
line-heightnormal | number | length | %Space between lines
text-indentlength | % | hanging | each-lineFirst line indentation
white-spacenormal | nowrap | pre | pre-wrap | pre-lineWhitespace handling
text-wrapwrap | nowrap | balance | prettyLine wrapping behavior
tab-sizeinteger | lengthTab character width
hanging-punctuationnone | first | last | allow-end | force-endPunctuation outside text box

Browser Support

PropertyChromeFirefoxSafariEdge
letter-spacing1+1+1+12+
word-spacing1+1+1+12+
line-height1+1+1+12+
text-indent1+1+1+12+
white-space1+1+1+12+
text-wrap: balance114+121+17.5+114+
text-wrap: pretty117+Not yetNot yet117+
tab-size21+4+6.1+79+
hanging-punctuationNot yetNot yet10+Not yet

Recommended Spacing Values

Use CaseLetter SpacingWord SpacingLine Height
Headlines-0.02em to -0.05emnormal1.0 - 1.2
Body Textnormal to 0.02emnormal to 0.05em1.5 - 1.7
All Caps0.08em to 0.15em0.1em to 0.2em1.3 - 1.5
Small Text0.02em to 0.05em0.03em to 0.08em1.6 - 1.8
Navigation0.03em to 0.08emnormal1.2 - 1.4
Codenormalnormal1.5 - 1.7

Best Practices

  • Use relative units: Prefer em for letter-spacing and word-spacing so spacing scales with font size
  • Tighten headlines: Large display text benefits from negative letter-spacing to reduce visual gaps
  • Widen all caps: Uppercase text needs extra tracking (0.08-0.15em) to improve legibility
  • Unitless line-height: Use unitless values (like 1.5) for line-height to scale properly with font size
  • Balance wrapping: Use text-wrap: balance for headings to create even line lengths
  • Consider reading context: Longer text blocks need more line-height; shorter text can be tighter
  • Test at multiple sizes: Spacing that looks good at one size may not work at others
  • Don't over-space: Excessive letter-spacing can hurt readability as much as too little

Accessibility Considerations

  • Minimum line-height: Use at least 1.5 for body text (WCAG 1.4.12)
  • Avoid justification: Full justification can create uneven word spacing, hindering readability
  • Allow user override: Don't use !important on text spacing properties
  • Test with zoom: Ensure spacing still works at 200% zoom
  • Paragraph spacing: Consider using margin-bottom: 1em or more between paragraphs
  • Word spacing: WCAG recommends allowing word-spacing of at least 0.16em

Rate this tool