Skip to content

Type Specimen

The three-font system, rendered at every scale step.

The Three Fonts

Display — Newsreader — Page titles, hero headings, article titles

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body — Inter — Body text, UI labels, navigation, buttons

The quick brown fox jumps over the lazy dog. Typography is the visual medium of language — not decoration applied to language. A well-set page communicates competence, intention, and care before a single word is read.

Mono — JetBrains Mono — Metadata, code, labels, timestamps, technical accents

2026-04-11 · 8 min read · typography design craft 

--font-display: "Newsreader", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;

Type Scale

--text-display
clamp(2.75rem, 5.5vw, 5rem)

Display

--text-title
clamp(1.875rem, 3.5vw, 3rem)

Title heading

--text-section
clamp(1.375rem, 2.25vw, 2rem)

Section heading

--text-body-lg
1.1875rem (19px)

Lead paragraph text for opening lines

--text-body
1.0625rem (17px)

Body text — the minimum size, non-negotiable. This is the workhorse.

--text-meta
0.8125rem (13px)

Metadata, labels, captions, timestamps

--text-micro
0.75rem (12px)

Timestamps, fine print only

In Context

All three fonts in their designated roles, rendered at their specified sizes.

The Value of Restraint

4 min read design

Good design is as little design as possible. This principle, articulated by Dieter Rams, applies with particular force to typography. The best typographic decisions are the ones you don't notice — the comfortable line length, the breathing room between paragraphs, the hierarchy that guides without shouting.

Consider the difference between a page set at 14px with 1.4 line height and one set at 17px with 1.75. The numbers are close. The experience is worlds apart. The first feels cramped and anxious. The second feels calm and authoritative.

Line Heights

--leading-display 1.05
--leading-title 1.15
--leading-section 1.2
--leading-body 1.75 — this is what makes prose readable
--leading-meta 1.4