Typography

Merid sets text in Geist and code, labels and token names in Geist Mono, both bundled as variable fonts. Numbers are tabular everywhere, so figures line up in tables and prices do not shift as they change.

Scale

Sizes are tokens: --mrd-text-* for the size, with matching --mrd-leading-* for line height and --mrd-tracking-* for letter spacing where it applies.

Precise by default

--mrd-text-displayclamp(40px, 6vw, 72px) / 1.05 / -0.04emHero heading

Precise by default

--mrd-text-h2clamp(30px, 3.6vw, 40px) / 1.1 / -0.03emSection title

Precise by default

--mrd-text-h320px / 1.3 / -0.015emCard title

Precise by default

--mrd-text-lg18px / 1.6Lead paragraph

Precise by default

--mrd-text-md16px / 1.6Body

Precise by default

--mrd-text-sm15px / 1.5Button, input, nav, list

Precise by default

--mrd-text-xs14px / 1.45Small button, label, pill

Precise by default

--mrd-text-2xs13px / 1.4Meta, helper, notes

Precise by default

--mrd-text-3xs12px / 1.3Badge, caption

The display and section sizes use clamp() and scale with the viewport. Specimens above show them at a representative desktop size.

Weights

400 (--mrd-weight-regular) — body text.
500 (--mrd-weight-medium) — all interface text: buttons, labels, navigation, tabs.
600 (--mrd-weight-semibold) — headings and figures that need emphasis.

Weight 700 is never used. When 600 is not enough contrast, change the tone instead.

Rules

Large headings are tight: negative tracking and a line height close to 1. Body text is relaxed at 1.6.
Headings use text-wrap: balance so short titles do not leave a single word on the last line.
Keep reading width at or below --mrd-prose (720px).
Use the three text tones for hierarchy: --mrd-ink for headings, --mrd-body for text, --mrd-muted for meta.

Font stacks

css

--mrd-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--mrd-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;