CSS provides powerful properties for styling text beyond basic font selection. Text transform, decoration, and spacing properties give you precise control over how text appears, enabling everything from subtle refinements to dramatic typographic effects.

Text Transform

The text-transform property changes the capitalization of text without modifying the source content. This is useful for maintaining consistent styling regardless of how content is entered.

CSS

.uppercase {
  text-transform: uppercase;
  /* "hello world" → "HELLO WORLD" */
}

.lowercase {
  text-transform: lowercase;
  /* "HELLO World" → "hello world" */
}

.capitalize {
  text-transform: capitalize;
  /* "hello world" → "Hello World" */
}

.none {
  text-transform: none;
  /* Removes any inherited transform */
}

Practical Applications

CSS

/* Navigation links */
.nav-link {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em; /* Improves uppercase readability */
  font-weight: 600;
}

/* Button text */
.button {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Form labels */
label {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
}

/* Headings that should always be capitalized */
.section-title {
  text-transform: capitalize;
}

Accessibility Note

When using text-transform: uppercase, screen readers still read the original text. However, all-caps text is harder to read because words lose their distinctive shapes. Use uppercase sparingly and pair with increased letter-spacing.

Text Decoration

The text-decoration property adds visual decorations to text, most commonly used for links and emphasis.

CSS

/* Individual properties */
.decorated {
  text-decoration-line: underline;
  text-decoration-color: #3b82f6;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}

/* Shorthand */
.decorated {
  text-decoration: underline #3b82f6 solid 2px;
}

Decoration Line Values

CSS

.underline {
  text-decoration-line: underline;
}

.overline {
  text-decoration-line: overline;
}

.line-through {
  text-decoration-line: line-through;
}

/* Multiple decorations */
.multiple {
  text-decoration-line: underline overline;
}

/* Remove decoration */
.none {
  text-decoration-line: none;
}

Decoration Styles

CSS

.solid {
  text-decoration-style: solid;
}

.double {
  text-decoration-style: double;
}

.dotted {
  text-decoration-style: dotted;
}

.dashed {
  text-decoration-style: dashed;
}

.wavy {
  text-decoration-style: wavy;
}

Styling Links

CSS

/* Modern link styling */
a {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

a:hover {
  text-decoration-color: currentColor;
}

/* Skip underline for navigation */
.nav a {
  text-decoration: none;
}

/* Animated underline effect */
.fancy-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}

.fancy-link:hover {
  background-size: 100% 2px;
}

Text Underline Offset

The text-underline-offset property controls the distance between text and its underline.

CSS

a {
  text-decoration: underline;
  text-underline-offset: 2px; /* Slight gap */
}

.more-offset {
  text-underline-offset: 0.2em; /* Relative to font size */
}

/* Adjust for different contexts */
h1 a {
  text-underline-offset: 4px; /* More space for larger text */
}

Letter Spacing

Letter-spacing (tracking) adjusts the space between characters. It's essential for improving readability, especially with uppercase text and headings.

CSS

/* Positive spacing - spreads letters apart */
.tracked {
  letter-spacing: 0.05em;
}

/* Negative spacing - brings letters closer */
.tight {
  letter-spacing: -0.02em;
}

/* Common use cases */
.uppercase-text {
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Essential for uppercase readability */
}

.display-heading {
  font-size: 4rem;
  letter-spacing: -0.03em; /* Tighten large headings */
}

.body-text {
  letter-spacing: normal; /* Usually best for body */
}

Letter Spacing Scale

CSS

:root {
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

.tight-heading {
  letter-spacing: var(--tracking-tight);
}

.uppercase-label {
  letter-spacing: var(--tracking-widest);
}

Word Spacing

Word-spacing adjusts the space between words. It's less commonly adjusted than letter-spacing but can be useful for specific effects.

CSS

.wide-words {
  word-spacing: 0.25em;
}

.tight-words {
  word-spacing: -0.1em;
}

/* Justified text may benefit from word-spacing */
.justified {
  text-align: justify;
  word-spacing: 0.05em;
}

Text Indent

Text-indent adds indentation to the first line of text, useful for traditional paragraph styling.

CSS

/* Traditional book-style paragraphs */
article p + p {
  text-indent: 1.5em;
}

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

/* Negative indent for hanging punctuation effect */
.hanging-indent {
  text-indent: -1em;
  padding-left: 1em;
}

Combining Text Properties

CSS

/* Elegant button */
.button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

/* Stylish heading */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.1;
}

/* Metadata/label style */
.meta-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.625rem;
  font-weight: 700;
  color: #6b7280;
}

/* Strikethrough for sales */
.original-price {
  text-decoration: line-through;
  text-decoration-color: #ef4444;
  color: #9ca3af;
}

Browser Considerations

CSS

/* text-decoration shorthand fallback */
a {
  /* Fallback for older browsers */
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.3);

  /* Modern browsers */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

Summary

Text transform, decoration, and spacing properties are essential tools for refined typography. Use text-transform for consistent capitalization, text-decoration for links and emphasis, and letter/word spacing to fine-tune readability. Always consider accessibility—uppercase text needs increased letter-spacing, and decorative styling shouldn't compromise content clarity. These properties, used thoughtfully, elevate your typography from functional to professional.