Text Styling — line-height, letter-spacing, text-align, text-decoration, text-transform

Lesson 03 covered what the text looks like (typeface, size, weight, style). This lesson covers how the text is arranged and decorated — properties that have an enormous impact on readability and visual polish.

The analogy: these are the typesetting decisions a print designer makes after choosing a typeface — leading (line spacing), tracking (letter spacing), alignment, and case. They are the difference between text that reads comfortably and text that feels cramped or amateurish.

line-height

line-height controls the vertical space allocated to each line of text — effectively the spacing between lines. A unitless value is strongly preferred:

body {
  line-height: 1.6;
}

A unitless value like 1.6 means 1.6 times the element’s font size. If the font size is 16px, line height is 25.6px. The benefit of unitless values: child elements calculate their own line height relative to their own font size, not the parent’s. Using px or em for line height on a parent element can cause misaligned line spacing in children with different font sizes.

Use case	Recommended line-height
Body text	1.5–1.7
Headings	1.1–1.3
Navigation	1 or auto

Reading long body text with line-height: 1 is fatiguing. line-height: 1.6 is a comfortable baseline for most sans-serif body fonts.

letter-spacing

letter-spacing adds (or removes) space between each character. Values are typically in em or px:

/* Headings: slightly tighter tracking */
h1 {
  letter-spacing: -0.02em;
}

/* Navigation labels: slightly wider for legibility */
.site-nav a {
  letter-spacing: 0.05em;
}

/* All-caps labels: wider spacing is required for readability */
.tour-badge {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

When text is set in uppercase, letter spacing must be increased — capital letters spaced at normal tracking look cramped. A value of 0.05em to 0.15em is typical for uppercase labels.

Negative letter spacing is used sparingly on large display headings to give them a denser, more monumental quality.

word-spacing

word-spacing adds space between words (not characters). It is rarely used in body text but can be effective for display headings or logo lockups:

.logo-text {
  word-spacing: 0.2em;
}

text-align

text-align controls the horizontal alignment of text within its container:

body { text-align: left; }        /* default in left-to-right languages */
.hero-heading { text-align: center; }
.price-label { text-align: right; }
.pull-quote  { text-align: justify; }

justify makes each line of text stretch to fill the full width, with spaces distributed between words. It can produce uneven gaps (“rivers of white space”) and is generally problematic on small screens or narrow columns. Avoid it for body text in responsive designs.

Center alignment is best used for short headings and single-line elements. Long paragraphs of centered text are harder to read because the eye has to find a new starting point at each line.

text-decoration

text-decoration controls underlines, overlines, and strikethroughs:

/* Remove underlines from nav links */
.site-nav a {
  text-decoration: none;
}

/* Standard underline */
a { text-decoration: underline; }

/* Strikethrough */
.sale-price del {
  text-decoration: line-through;
  color: #888;
}

/* Custom underline color */
a {
  text-decoration: underline;
  text-decoration-color: #2c4a1e;
}

text-decoration is shorthand for three sub-properties:

• text-decoration-line — underline, overline, line-through, none
• text-decoration-color — any color value
• text-decoration-style — solid, dashed, dotted, wavy, double

/* Wavy green underline — a common modern link style */
a:hover {
  text-decoration: underline wavy #2c4a1e;
}

Removing the underline from links with text-decoration: none is common for navigation, but ensure links in body text remain distinguishable — color alone is insufficient for accessibility.

text-transform

text-transform changes the capitalization of text without modifying the HTML:

.site-nav a { text-transform: uppercase; }
.tour-badge  { text-transform: uppercase; letter-spacing: 0.08em; }
.legal-note  { text-transform: lowercase; }
.author-name { text-transform: capitalize; } /* Capitalizes first letter of each word */

Value	Effect
uppercase	ALL CAPS
lowercase	all lowercase
capitalize	First Letter Capitalized
none	No transformation (default)

text-transform: uppercase is commonly used for nav labels, badges, and section labels. Always pair it with increased letter-spacing for readability.

text-indent

text-indent indents the first line of a block element — used in print-style typesetting:

.article-body p {
  text-indent: 2em;
  margin-top: 0;
}

In web typography, text-indent is rarely used. Paragraph spacing (via margin-top or margin-bottom) is the standard approach.

Exercise

Apply text styling across the STO site:

1. Body and paragraph readability:

body {
  line-height: 1.6;
}

p {
  margin-bottom: 1em;
}

2. Navigation labels:

.site-nav a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
}

3. Tour card category badges:

.tour-badge {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

4. Heading tracking:

h1 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  line-height: 1.2;
}

Open the browser and compare the STO site before and after these changes. The differences in readability and visual refinement are significant even though no colors or fonts changed.

Recap

• line-height with a unitless value (1.5–1.6) is the standard for readable body text; 1.1–1.3 for headings.
• letter-spacing in em adds or removes inter-character space; uppercase text always needs increased letter spacing.
• text-align: left is the default and best for body text; center for short headings; avoid justify in responsive layouts.
• text-decoration: none removes link underlines; use sub-properties (text-decoration-color, text-decoration-style) for custom underlines.
• text-transform: uppercase is useful for nav labels and badges; always pair with letter-spacing.

Lesson 05 takes typography further: loading and applying custom web fonts from Google Fonts.