Lesson 06 · Styling basics

Typography

Typography is how text looks. Write two small rules and watch the browser pick a font from a font stack (Inter is not installed, so Arial is used), pass the font, size and line height from body down to the heading and the paragraph, work out the heading's 2em as 36px, space the lines 1.5 apart and centre only the heading. Then see where each of the heading's values came from.

9 min8 steps5 questionsBeginner

Fig 6 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01With font-family: Inter, Arial, sans-serif; and no Inter installed, which font does the browser use?

The browser tries the font stack in order and uses the first font it has. Inter is missing, Arial is installed, so Arial wins; sans-serif is only the last resort.

02Why end a font stack with a generic family such as sans-serif?

No named font is guaranteed to be installed. A generic family always works, so the text keeps the right kind of letters even on a computer without your fonts.

03The CSS sets font-family only on body. Why does the p inside body change font too?

font-family, font-size, line-height and text-align are inherited properties. p has no value of its own, so it takes body's.

04body has font-size: 18px. The browser's own style gives h1 font-size: 2em. How big is the h1?

For font-size, 1em is the parent's font size. The parent, body, is 18px, so 2em = 2 × 18 = 36px.

05body has line-height: 1.5; and the p inside it is 18px. How tall is each line of the paragraph?

A unitless line-height multiplies the element's own font size: 1.5 × 18 = 27px. The h1, at 36px, gets 1.5 × 36 = 54px lines from the same number.

Key terms

Glossary

Typography: How text looks on the page: its font, size, spacing between lines and alignment.
Typeface (font): A design for the letters, such as Arial or Times New Roman.
Font stack: The comma-separated list of fonts in font-family. The browser uses the first one it has.
Generic family: A built-in fallback such as serif, sans-serif or monospace. It always matches a font the computer has.
Serif / sans-serif: Serif letters have small feet at the ends of their strokes (Times New Roman); sans-serif letters do not (Arial).
Inheritance: When an element has no value of its own for an inherited property, it copies its parent's value.
em: A length relative to a font size. In font-size, 1em is the parent's font size, so 2em is twice it.
line-height: How tall each line of text is. A plain number such as 1.5 means 1.5 × the element's own font size.

Fine print

Notes and sources

A real browser applies every declaration at once while it works out each element's style. The figure applies them one at a time, and shows the font switch only when it reaches the elements, so you can see what each step does.
The figure's computer has Arial, Georgia and Times New Roman and no Inter. Real computers differ, which is why a stack ends with a generic family. A page can also download a font with @font-face, a later topic.
line-height: normal is chosen by the browser from the font, roughly 1.2; the figure uses 1.15, close to Times New Roman and Arial.
The page drawing follows the browser's default spacing approximately: body has an 8px margin, h1 has 0.67em above and below, and p has 1em. The <br> keeps the paragraph on exactly two lines.
The card shows the <body>. The full index.html also has <!DOCTYPE html>, <html>, and a <head> with a <title> and <link rel="stylesheet" href="style.css">.
Save the full page as index.html and the rules as style.css in one folder, open index.html, and the text appears in Arial, 18px with 27px lines, under a centred 36px heading.

Quiz Unlocks after the last step.