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

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

2026-04-114 min readdesign

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.

Prose Vocabulary

Every Markdown element .remarque-prose styles beyond headings, blockquotes, lists, and code.

A fourth-level heading

Tables, definition lists, and inline marks round out the vocabulary. A key like Ctrl+K opens the command palette. Text can carry a quiet highlight without reaching for a callout box. The W3C abbreviation gets a dotted underline on hover. Footnote markers¹ and chemical formulas like H₂O sit without disturbing the line.

A fifth-level heading

See the table below for the type scale, reproduced as data.

Type scale reference
Token	Role	Size (px)
--text-display	Hero headings	44–80
--text-title	Page titles	30–48
--text-body	Body copy	17
--text-meta	Metadata	14

A sixth-level heading

Newsreader: The display face — page titles, hero headings, article titles. Optical sizing tuned for 2rem and up.
Inter: The body face — the workhorse for running copy, UI labels, and navigation.

A collapsible aside

Content revealed on demand — quiet by default, no default browser marker.

Syntax Highlighting

The 9 --color-syntax-* slots, wired into Shiki via createCssVariablesTheme (REMARQUE.md "Syntax Highlighting").

// --color-syntax-* wired straight into Shiki — REMARQUE.md "Syntax Highlighting"
import { createCssVariablesTheme } from 'shiki';

interface TokenSlot {
  name: string;
  contrast: number; // ratio against --color-code-bg
}

const MIN_CONTRAST = 4.5;

function passesAudit(slot: TokenSlot): boolean {
  return slot.contrast >= MIN_CONTRAST; // both themes, no exceptions
}

Line Heights

--leading-display1.05

--leading-title1.15

--leading-section1.2

--leading-body1.75 — this is what makes prose readable

--leading-meta1.4