Typography System

Type Scale

Our scale follows a 1.125 (minor third) ratio, optimized for digital reading and editorial density. All sizes are fluid-ready and clamp-adjusted for responsive layouts.

Display--text-display

The Knowledge Age

2.5rem / 700LH: 1.1LS: -0.02em

H1--text-h1

Chapter Heading

2rem / 700LH: 1.15LS: -0.01em

H2--text-h2

Section Break

1.5rem / 600LH: 1.2LS: 0

H3--text-h3

Subsection Title

1.25rem / 600LH: 1.3LS: 0

Body--text-body

Default paragraph text for long-form reading and interface content.

1rem / 400LH: 1.6LS: 0

Small--text-small

Metadata, captions, and auxiliary information.

0.875rem / 400LH: 1.5LS: 0.01em

Font Families

Aevum uses a deliberate pairing of editorial serif for headings and highly legible sans-serif for body text. Monospace is reserved exclusively for code and technical tokens.

PrimaryPlayfair Display

ABC abc 123

EditorialHeadings

InterfaceInter

ABC abc 123

UI & BodyReadability

TechnicalJetBrains Mono

ABC abc 123

CodeTokens

Web Font Fallbacks Always include system fallbacks. Playfair → Georgia → serif. Inter → system-ui → sans-serif. JetBrains → monospace.

Spacing & Metrics

Typography is only as effective as its spacing. Aevum enforces strict vertical rhythm and optical alignment across all breakpoints.

Property	Heading	Body	Small/Meta
Line Height	`1.15–1.2`	`1.6`	`1.5`
Letter Spacing	`-0.02em to 0`	`0`	`0.02em`
Margin Bottom	`0.6em`	`1.25rem`	`0.75rem`
Max Width	`65ch` (optimal reading width)

Usage Guidelines

Editorial vs. Interface

Use Playfair Display exclusively for article titles, section headers, and pull quotes. Inter powers all navigation, forms, buttons, metadata, and body copy. Never mix font families within the same typographic level.

Contrast & Accessibility

All text must meet WCAG 2.1 AA standards. Primary text requires a 4.5:1 ratio against backgrounds. Decorative large text (>18pt bold) requires 3:1. Aevum's dark theme uses #E6E8F0 on #0B0C10 (ratio 14.2:1).

Responsive Scaling

Fluid type is preferred over breakpoint-dependent sizes. Use CSS clamp() with the following formula:
clamp(min, preferred, max)

Implementation

Apply typography via CSS custom properties. Tokens are automatically scoped to the Aevum design namespace.

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.5;

  --tracking-heading: -0.01em;
  --tracking-body: 0em;
  --tracking-meta: 0.02em;
}

.article-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}