Typography

All in one: every typography property, side by side

What this example compares

The font stack: a list of names vs a missing font vs a list with no generic family at the end
Quotes: "Segoe UI" vs Segoe UI vs Verdana, and "Asha Font 2" vs Asha Font 2
Generic families: serif vs sans-serif vs monospace vs cursive vs fantasy, and system-ui
Font size: rem vs px (0.75rem, 0.875rem, 1rem, 16px, 1.15rem, 1.25rem, 2rem)
Font weight: 100 to 900, normal = 400, bold = 700
Look vs meaning: font-weight: 700 vs <b> vs <strong>
Font style: normal vs italic vs oblique
Line height: 1 vs 1.2 vs 1.5 vs 1.7 vs 1.8 vs 2.5
Unitless vs px: line-height: 1.7 vs 27px (and 1.6 vs 26px) inherited by a big heading
Spacing: letter-spacing vs word-spacing vs text-transform: uppercase, and the .eyebrow label
Shorthand: font: italic 700 1.25rem/1.6 Georgia, serif; vs the long form, the silent reset and the missing family
Web fonts: <link> + a fallback vs no fallback vs @font-face
Comfortable to read: size, line height, contrast and max-width: 65ch, each wrong card next to its right one
The project: two families vs four (a "ransom note")

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fourteen panels; the font names below are what Windows shows. Panel 1 shows its sentences in Segoe UI, Georgia, a code font, handwriting-like cursive and, in the last card, the plain default letters. In panel 2 cards 1 to 4 change font but card 5 stays default, because its unquoted name broke the whole line. Panel 3 shows the five generic families and system-ui; only in the monospace card are iiiii and MMMMM equally long. Panel 4 shows "Asha" from 12px up to 32px, with the 1rem and 16px cards identical. Panel 5 shows about five different thicknesses across ten cards. The first three cards of panel 6 look the same and the fourth is not bold. In panel 7 cards 2 and 3 are the same italic, while card 4 is the upright letters tilted. Panel 8 runs from cramped to loose. In panel 9 the big heading's lines, and the orange bands behind them, overlap only in the 27px and 26px cards. Panel 10 spreads, squeezes and capitalises one sentence, and ends with the amber "UNIT 3 · CHAPTER 26" label above "Typography". In panel 11 cards 1 and 2 match, card 4 is not italic and card 5 is plain. Panel 12 shows a clean fallback font, the default letters, and Georgia under a new name. Panel 13 pairs each wrong setting with its fix, and panel 14 shows Asha's profile calm in two families and noisy in four. There is no JavaScript, so the Console stays empty.

Quick check: in panel 9, both line-height: 1.7 and line-height: 27px give the small 16px text about the same spacing. Why does only the 27px card break?

Because a unitless number is passed down as a number, so the 32px heading works out its own 1.7 × 32 = 54.4px lines. A px value is passed down as a fixed 27px, which is less than the heading's 32px letters, so its lines overlap. That is why line-height is written with no unit.