Typography

The type system: three faces with strict roles, a band-aware scale (static UI, fluid display), and tokens for weight, leading, tracking and measure. Everything below references var(--…) — retune the tokens, not the components.

Faces & roles

Three faces, each with one job. The signature face is for brand and large headings only.

--display · Syne
Ag 24
Hero headings & wordmark only. Never body.
--body · DM Sans (variable)
Ag 24
All UI, headings, and reading text. 100–1000 weight.
--mono · JetBrains Mono
Ag 0O
Data, code, tabular figures. Slashed zero.

The scale

Static UI band — pixel-snapped, predictable
--text-2xs11pxThe quick brown fox jumps over the lazy dog
--text-xs12pxThe quick brown fox jumps over the lazy dog
--text-sm13pxThe quick brown fox jumps over the lazy dog
--text-md14pxThe quick brown fox jumps over the lazy dog
--text-base16pxThe quick brown fox jumps over the lazy dog
--text-lg18pxThe quick brown fox jumps over
--text-xl20pxThe quick brown fox
--text-2xl24pxThe quick brown fox
Fluid display band — clamp(), scales with viewport
--text-3xl28–36Quick brown fox
--text-4xl36–48Brown fox
--text-5xl44–60Foxes
--text-6xl52–72Ag

Weight ramp

Real weights from the variable file — no faux-bold. Use extremes for contrast.

Regular — clarity at reading sizes--weight-regular · 400
Medium — quiet emphasis--weight-medium · 500
Semibold — UI labels--weight-semibold · 600
Bold — headings--weight-bold · 700
Black — display impact--weight-black · 800

Heading roles

Utility classes that bind size + weight + leading + tracking together — one source per role.

Display
Heading one
Heading two
Heading three
Heading four

Lead paragraph — sets up an article with a slightly larger, lighter voice before the body copy begins.

Caption — metadata, footnotes, and supporting microcopy.

Leading

Line-height tightens as size grows. Stored unitless so it scales with the user's text settings.

--leading-tight · 1.1
Tight leading suits large display headings, where generous line-height would leave the lines feeling disconnected and loose.
--leading-normal · 1.5
Normal leading is the default for UI and body text — comfortable to scan without wasting vertical space.
--leading-relaxed · 1.7
Relaxed leading is for long-form prose, where the extra breathing room makes sustained reading easier on the eye.

Tracking

A crossover: slightly positive on small text, negative on display.

Eyebrow / overline--tracking-caps · .12em
Small caption text, opened up a touch--tracking-xs · +.005em
Body & UI sit at zero--tracking-normal · 0
Display tightens--tracking-tighter · −.02em

Measure

Cap line length for readability — never run prose edge to edge.

--measure-narrow · 48ch

A narrow measure suits captions, cards, and tight UI columns where lines are short by nature.

--measure · 65ch

The default measure targets roughly 65 characters per line — the long-studied sweet spot where the eye tracks comfortably from the end of one line to the start of the next without losing its place.

--measure-wide · 75ch

A wide measure is the upper bound for documentation columns; beyond about 75 characters, return sweeps get tiring and reading slows.

Numerics

Tabular figures align in columns; the mono face uses a slashed zero. Data tables get this automatically.

proportional (default)
  • 1,204.50
  • 998,031.07
  • 42.00
.nums-tabular + .zero-slashed
  • 1,204.50
  • 998,031.07
  • 42.00

Prose

Long-form content via .prose — em-based rhythm, capped at --measure.

The .prose scope styles raw article markup — headings, lists, quotes, code and tables — so a CMS or Markdown body reads well with no per-element classes.

A section heading

Body copy sits at a comfortable reading size with relaxed leading. Inline code uses the mono face, and strong and emphasis carry their usual weight.

A blockquote draws a brand-coloured rule and shifts to a quieter, larger voice.

A subsection

  • Lists use a primary-tinted marker.
  • Spacing scales with the prose font size.
const x = someFunction(withManyArguments, thatDoNotWrap, reallyTrulyLong);
Qazana Strata · typography