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 one typeface at two weights — nothing else needed. 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 black-on-gray for text hierarchy, reserving its single accent color (red) for functional signals like links.

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 (elegant serif heading) with Lora (warm serif body) — both serifs, maximum unity through shared DNA. 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 rarely benefits from tracking adjustments. At reading sizes, the type designer has already balanced letter fit for comfortable reading. Manual changes tend to introduce subtle discomfort that readers feel without identifying.

All-caps display text often benefits from additional letter-spacing, particularly in typefaces whose capitals become visually dense when set continuously. Try adding 0.05–0.1em and compare the result.

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.7 — same value, but the tight letter-spacing and heavy display font make it feel 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.

Typography across StyleShift

Every style on this site makes different typographic decisions. Here is how a few of them compare:

Swiss International — heading and body in the same sans-serif family. Weight contrast (700/400) provides hierarchy. Tight tracking, relatively generous line-height. The result is calm authority.

Bauhaus — also a single sans-serif, but with wider letter-spacing and stronger geometric character. Uppercase headings. The type feels structural, like signage.

Art Deco — geometric display face for headings, simpler sans for body. Wide tracking on headings gives them elegance. Narrow content width keeps the eye close.

Victorian — decorative serif headings at very heavy weight. Dense, commanding, unapologetic. Body serif is more readable but keeps the historical character.

Nordic Minimal — same family, restrained weight. Tight tracking, quiet color. The typography disappears behind the content. That restraint is the point.

Dark Luxury — thin heading weight (300) with extra space. The lightness feels precious, expensive. Only works when surrounded by enough air.

Switch between these styles now and compare. The content stays the same. Only the typographic voice changes.

What we learned building 18 typographic systems

Building 18 complete typographic systems taught us things that reading about typography never could. Here are a few observations from the process.

One typeface is harder than two. When a style uses one family for everything (like Swiss, Bauhaus, or Nordic), every weight and size decision matters more. There is no contrast shortcut. You earn hierarchy purely through proportion.

Display fonts reveal their limits fast. A beautiful heading face that works at 48px might look wrong at 18px. We tested every heading font at body size before committing. Several were replaced after this test.

Line-height depends on everything else. The same 1.6 value feels different at 400 weight versus 700, at tight tracking versus open, at 60ch width versus 80ch. We tuned line-height last, always.

Weight contrast is the fastest hierarchy signal. Before adjusting size, spacing, or color, try adding 200 units of weight difference. In most cases, that single change creates enough separation.

All-caps headings need more space than you think. We consistently underestimated letter-spacing for uppercase text on first pass. The final values are always wider than initial instinct suggested.

These observations came from trial, error, and comparison. They are specific to building interactive, theme-switchable interfaces where the same content must remain legible across every system.