Module 3 · Typography · Lesson 1 of 3

CSS Text Styling

Beginner ⏱ 20 min2 sections · 1 exercise · 4-question quiz

Most of the web is text, and half of "good design" is just text set well: size, line height, spacing, alignment, decoration. These are the properties you'll reach for on literally every project.

1. The everyday toolkit

CSS — a well-set paragraph

p {
  font-size: 1rem;
  line-height: 1.6;          /* unitless = scales with size */
  letter-spacing: 0.01em;
  text-align: left;
}
h1 {
  text-transform: uppercase;
  letter-spacing: 0.08em;    /* caps need extra tracking */
}

line-height is the highest-impact property here: 1.5–1.7 for body copy, tighter (1.1–1.3) for large headings. Keep it unitless so it multiplies each element's own font size. And uppercase text almost always needs positive letter-spacing to stay legible.

2. Decoration and overflow

CSS — links and truncation

a { text-decoration: underline; text-underline-offset: 3px; }

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* the … */
}

The three-property ellipsis recipe truncates a single line with the classic "…" — memorize it, every UI needs it eventually. For glowing or lifted headlines, text-shadow awaits in the Shadows lesson.

3. Try it yourself

Fix the wall of text: give the paragraph line-height: 1.6, and make the card title truncate with an ellipsis using the three-property recipe.

exercise.html — editable

4. Quiz — check your understanding

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →

CSS Text Styling

1. The everyday toolkit

2. Decoration and overflow

3. Try it yourself

4. Quiz — check your understanding

CSS Text Styling Quiz

Practice with these generators