Typography

What is typography and why does it matter?

Typography is the art of arranging text. Not writing — arranging. The same words in a different typeface, at a different size, with different spacing, communicate differently. Typography is the voice that content speaks in.

On this site, switch between styles and watch the same text transform. Art Deco speaks in precise geometric capitals. Victorian speaks in heavy ornamental serifs. Bauhaus speaks in a single weight of a single sans-serif. The words don't change — but the feeling changes completely.

This is typography's power: it communicates before you read a single word.

How do serif and sans-serif fonts differ?

Serifs are the small strokes at the ends of letters. A serif font (Times, Garamond, Playfair) has them. A sans-serif font (Helvetica, Inter, Roboto) does not. This simple distinction carries enormous meaning.

Serifs reference history — the pen, the chisel, the printing press. They carry warmth, tradition, authority. Victorian and Cottagecore use serifs because they reference the handmade and the historical.

Sans-serifs reference modernity — the machine, the screen, the system. They carry clarity, neutrality, efficiency. Bauhaus, Swiss International, and Nordic Minimal use sans-serifs because they prioritize function over tradition.

Neither is better. The choice is about what you want to say before the reader reads anything.

How do you create typographic hierarchy?

Hierarchy is the system that tells the eye where to look first, second, third. In typography, you have four tools: size, weight, color, and space.

Size — Larger text reads first. A heading at 2rem draws the eye before body text at 1rem. The ratio between sizes defines how dramatic your hierarchy feels. Memphis uses extreme ratios (5:1). Nordic Minimal uses gentle ratios (1.5:1).

Weight — Bolder text reads as more important. But weight has limits: Dark Luxury uses weight 300 for headings — proving that lightness can command attention too, when surrounded by enough space.

Color — Darker or more saturated text reads first. Art Deco uses gold headings on black — the color itself signals importance. Swiss International uses only gray values — proving color isn't required.

Space — More space above a heading connects it to what follows. Less space below keeps it attached to its content. Space is invisible hierarchy — you feel it without seeing it.

What makes a good font pairing?

A font pairing is two typefaces used together — typically one for headings and one for body text. The goal is contrast with harmony: different enough to create hierarchy, similar enough to feel unified.

Rules of thumb:

One serif + one sans-serif is the classic pairing — the contrast is built-in. Art Nouveau pairs Cormorant Garamond (serif heading) with Lora (serif body) — same family, maximum unity. Art Deco pairs Poiret One (geometric display) with Raleway (geometric body) — same geometry, different roles.

Same family, different weights is the safest pairing. Bauhaus, Swiss International, and Nordic Minimal all use one typeface at two weights. This guarantees harmony — the risk is boredom, but context prevents it.

Avoid pairing two similar fonts. Two sans-serifs that are almost-but-not-quite the same create confusion, not contrast. If they're too similar, use one. If they're different, make the difference obvious.

Switch styles on this page to see each approach demonstrated in real time.

How does letter-spacing affect readability?

Letter-spacing (tracking) is the space between all characters in a line. It's subtle — but it changes everything about how text feels.

Tight tracking (-0.01em to -0.02em) on headings makes large text feel solid and confident. Swiss International and Nordic Minimal use tight heading tracking — the letters hold together as a unit.

Wide tracking (+0.05em to +0.1em) on headings makes text feel open, airy, or formal. Art Deco and Bauhaus use wide tracking — space between letters like columns in a facade.

Body text should almost never have its tracking adjusted. The type designer already optimized it for reading. Changing it introduces subtle discomfort that readers feel without identifying.

All-caps text needs wider tracking. Uppercase letters are designed to begin words (preceded by a space). When placed side by side, they crowd each other. Add 0.05–0.1em to breathe.

What is line-height and how do you choose it?

Line-height (leading) is the vertical space between lines of text. Too tight, and lines collide — the eye loses its place. Too loose, and lines disconnect — the paragraph dissolves into individual statements.

Body text: 1.5–1.8 is the comfortable range. Nordic Minimal uses 1.7 — generous, breathing, unhurried. Memphis uses 1.6 — tighter, more energetic. Art Nouveau uses 1.85 — the most spacious, reflecting its philosophy of air and organic growth.

Headings: 1.1–1.3 is typical. Large text needs less line-height because the letters themselves provide visual anchoring. A heading at 3rem with line-height 1.8 would look disconnected — too much air between massive words.

The test: If you can read a paragraph without your eye accidentally jumping to the wrong line, the line-height is correct. If reading feels effortful, increase it.

How does type weight affect the mood of a design?

Weight — the thickness of a typeface's strokes — carries emotional meaning. Heavy type (700–900) feels solid, confident, commanding. Light type (200–300) feels elegant, delicate, quiet.

Victorian uses 900 heading weight — heavy, authoritative, unapologetic. It fills space and demands attention. This is type as architecture.

Dark Luxury uses 300 heading weight — thin, whispering, precious. It needs space around it to survive. This is type as jewelry.

Swiss International uses 700 heading and 400 body — the standard, professional contrast. Noticeable but not dramatic.

The key insight: weight is relative. A 400-weight heading feels bold if the body is 300. A 700-weight heading feels moderate if surrounded by 900-weight elements. Context is everything.