CSS Text Styling

Why Text Styling Matters

Text styling affects how quickly people can read, scan, and understand a page.

Good typography creates hierarchy, supports the tone of the site, and keeps content accessible across screen sizes and devices.

Typography System Starter

A typography system gives your site consistent defaults for body text, headings, links, and small labels.

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.1;
}

h2 {
  font-size: 1.75rem;
}

a {
  color: #0b55b7;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

Text Styling Property Groups

Text properties are easier to learn when you group them by purpose.

Font Styles

Font styles affect the appearance of text within your HTML elements. Start with readable defaults, then adjust headings, links, and special labels.

color

color updates the foreground color of the text. It also affects the color of associated underlines included with text-decoration.

Choose colors with enough contrast against the background. Text color is not just decoration; it directly affects readability.

p {
  color: #1f2937;
}

MDN Link

font-family

font-family sets the font for your text. Use readable fonts and always end the font stack with a generic family.

The font stack is a list of fonts, from left to right, that the browser will try to load.

Common generic families include sans-serif, serif, and monospace.

body {
  font-family: Arial, Helvetica, sans-serif;
}

MDN Link

font-size

font-size sets the size of text. For most project typography, rem is a flexible default because it responds to the root text size.

Avoid setting body text too small. A common starting point is 1rem for paragraphs.

• px: Fixed size. Useful for small details, but less flexible for type systems.
• em: Relative to the parent element.
• rem: Relative to the root element. Usually a good choice for font sizing.

h1 {
  font-size: 2rem;
}

MDN Link

font-style

font-style is often used to toggle italics for emphasis or citations.

em {
  font-style: italic;
}

MDN Link

font-weight

font-weight controls the boldness of text using keywords or numeric values from 100 to 900.

Use a small set of weights consistently. Too many weights can make a page feel noisy.

strong {
  font-weight: 700;
}

MDN Link

Heading Hierarchy Example

Use size, weight, and line height to make headings feel related but clearly ranked.

h1 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
}

h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

p {
  font-size: 1rem;
  line-height: 1.6;
}

text-transform

text-transform applies casing transformations to text.

It works well for short labels, eyebrows, or buttons. Avoid using all caps for long paragraphs because it becomes harder to read.

.eyebrow {
  text-transform: uppercase;
}

MDN Link

text-decoration

text-decoration controls underlines and other text lines. It is often used to style link underlines.

Links should remain visually identifiable. If you remove an underline, replace it with another strong cue such as color, weight, or a clear hover/focus style.

a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

MDN Link

text-shadow

text-shadow applies shadow to text with horizontal offset, vertical offset, blur, and color.

Use text shadows sparingly. Heavy shadows can make text harder to read.

h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

MDN Link

Text Layout

These properties affect spacing and alignment of text:

text-align

text-align aligns text left, right, center, or justify.

Centered text can work for short headings, but long centered paragraphs are harder to read.

p {
  text-align: center;
}

MDN Link

line-height

line-height controls spacing between lines. Use unitless values like 1.5 or 1.6 for better scalability.

Comfortable line height is one of the quickest ways to make paragraphs easier to read.

p {
  line-height: 1.5;
}

MDN Link

letter-spacing

letter-spacing controls spacing between letters.

It is useful for short uppercase labels, but too much spacing in paragraphs can harm readability.

.label {
  letter-spacing: 0.08em;
}

MDN Link

word-spacing

word-spacing controls spacing between words.

It is rarely needed in everyday typography. Use it carefully and test readability.

p {
  word-spacing: 0.1em;
}

MDN Link

Good vs. Risky Text Styling

Common Mistakes