Skip to content
Typography & EditorialPenelopepattern

Optical Pairing

Display serif against interface grotesque at intentional sizes — pairing as a ruled system, not a vibe.

Built here · no external address

Penelope: Long-running fidelity. Maintained excellence over years.

Exhibit case

Set in itself, at real size. Nothing here is a description.

Arming the exhibit…

Why it matters

Pairing fonts by taste produces a different hierarchy on every page. A scale with named steps keeps Olympus and the chambers in one voice.

Key techniques

  • Named steps: monument, statement, display, lede, body, label, meta.
  • Serif reserved for voice; grotesque for chrome; mono for data.
  • Clamp ranges published per step.

What to steal

The transferable part.

Three faces, three jobs. Never a fourth face "for fun".

What not to copy

Context-specific or costly.

Do not set UI chrome in the display serif. It fights density.

Inclusion rationale

Completes Apollo's vertical slice with a pairing law the scale alone does not state.

Technical register

Performance

Google fonts preconnect; swap display.

Mobile

Monument clamps down without overflowing; word-break on long titles.

Accessibility

Contrast holds on the void background; line-height never below 1.4 for body.