Typography & Text

Typography is often the single biggest lever for how polished a page feels - font choice, sizing, and spacing all work together to make text readable and pleasant.

Font Stacks & Fallbacks

font-family accepts a comma-separated list of fonts, tried in order until one is available. Always end the stack with a generic family (sans-serif, serif, monospace) as a final fallback, in case none of the named fonts load.

Try it yourself

<p>This text uses the font stack, falling back to sans-serif if nothing else loads.</p>

Output

Sizing & Weight

font-size sets how large text renders, commonly in rem for consistent, scalable sizing. font-weight controls boldness, from 100 (thin) to 900 (black), with 400 as normal and 700 as bold.

Try it yourself

<p class="small">Small, normal weight</p>
<p class="large">Large, bold</p>

Output

Line Height, Alignment & Spacing

line-height sets the vertical space a line of text occupies. A unitless value like 1.5 scales with the element's own font-size (recommended, since it stays consistent if font-size changes); a fixed px value doesn't scale and can cause cramped or excessive spacing after resizing.

text-align positions text within its container (left/center/right/justify), text-transform changes casing (uppercase/lowercase/capitalize) without altering the underlying text, and letter-spacing adds or removes space between characters - handy for small uppercase labels.

Try it yourself

<p>A paragraph with generous line-height reads more comfortably across longer lines of text.</p>
<p class="label">small label</p>

Output

Custom Web Fonts

@font-face lets you load your own font file and give it a name to use in font-family. Alternatively, a service like Google Fonts provides a ready-made <link> tag (or @import) that loads a hosted font without you needing to manage the font files yourself.

Try it yourself

Loading a self-hosted font with @font-face

<p>Falls back to sans-serif until MyFont finishes loading (or if it fails).</p>

Output

Coding challenge

Style a paragraph with a font stack ending in sans-serif, a line-height of 1.6, and centered, uppercase text.

<p>Style this text</p>

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. Why should a font-family stack always end with a generic family like sans-serif?

2. What is the advantage of a unitless line-height value like 1.5?

3. Which property changes text casing without altering the underlying characters?

4. What does @font-face let you do?