Text Effects

Smaller text properties — letter spacing, underlines, case changes, indents.

3 min read Level 1/5 #css#text#letter-spacing

What you'll learn

Tune letter and word spacing
Configure underlines properly
Use `text-transform` for case

A handful of smaller properties polish typography.

`letter-spacing` and `word-spacing`

h1 { letter-spacing: -0.02em; }   /* tighten big headings */
.small-caps { letter-spacing: 0.05em; }

In em, the spacing scales with font-size. Use negative values for tight headings, positive for caps.

`text-transform`

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;   /* First Letter Of Each Word */
text-transform: none;

CSS-only — the underlying HTML still has the original case (good for accessibility).

`text-decoration`

The shorthand for underlines, strikethroughs, etc.:

text-decoration: underline;
text-decoration: line-through;
text-decoration: none;             /* remove the default link underline */

/* Fine control */
text-decoration: underline wavy red 2px;
text-underline-offset: 4px;        /* push underline below the baseline */
text-decoration-thickness: 2px;

Modern underline tuning (offset, thickness, skip-ink) is the biggest typography upgrade in CSS in years.

`text-indent`

First-line indent for paragraphs:

.article p { text-indent: 2em; }

`text-overflow` + `white-space`

For one-line truncation:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

`word-break` and `overflow-wrap`

.long-words { overflow-wrap: anywhere; }   /* break super-long words */
.code       { word-break: break-all; }      /* break ANYTHING */

Useful for cells that might contain URLs or long unhyphenated strings.

Up Next

Backgrounds — colors, images, gradients, positioning.

Backgrounds →

letter-spacing and word-spacing

text-transform

text-decoration

text-indent

text-overflow + white-space

word-break and overflow-wrap