Typography

Overview

Typography creates hierarchy, establishes reading rhythm, and gives an interface a consistent written voice. Use the approved type roles for every heading, control, data value, paragraph, label, and code sample. Roles communicate purpose; they are not interchangeable decoration.

Principles / Usage Guidelines

1. Hierarchy is semantic. Choose a role based on content structure, then use the matching semantic element. Do not select a heading role only because its size looks convenient.
2. Readability outranks density. Body text remains stable across viewports. Responsive behavior adjusts display sizes, layout, and measure before reducing essential interface text.
3. A limited weight range improves consistency. Use 400, 500, 600, and 700. Reserve 700 for major emphasis and primary headings; avoid 300, 800, and 900 in interface content.
4. Line height follows the reading task. Display text uses compact leading. Paragraphs and long-form content use generous leading. Labels remain compact without touching adjacent content.
5. Numbers express their context. Use proportional numerals in prose and tabular numerals in columns, metrics, counters, and changing values.
6. Monospaced text is functional. Use it only when character alignment or literal syntax matters. Do not use it for long-form explanation.

Specifications & Anatomy

Font families

Manrope owns display and heading roles. DM Sans owns interface and body roles. JetBrains Mono owns code and aligned technical text. Fallback stacks are part of the token contract and must remain in the documented order.

Type scale

Weights

• 400 Regular: body copy, captions, code, and default interface text.
• 500 Medium: restrained emphasis when regular and semibold do not provide enough distinction.
• 600 Semibold: labels, compact headings, and emphasized interface text.
• 700 Bold: display roles, major headings, and high-priority emphasis.

Line height

• Display and headings: 1.1–1.35.
• Body text: 1.5–1.6.
• Labels: 1.3–1.35.
• Code: 1.5–1.6.

Line height values are unitless so they scale with font size and user text preferences.

Measure and readability

Set long-form content to 65ch by default. A readable range is 60ch–75ch. Use left alignment for continuous Latin-script text. Avoid justified copy because inconsistent word spacing reduces readability. Paragraph spacing comes from layout tokens, not repeated line breaks.

Numeric typography

Use proportional-nums lining-nums for numbers inside prose. Use tabular-nums lining-nums for tables, counters, and values that update in place. Use tabular-nums slashed-zero when identifiers can contain both zero and the letter O.

Monospaced text

Use JetBrains Mono for source code, commands, tokens, identifiers, version strings, hashes, and aligned technical values. Inline code inherits the surrounding line height. Multiline code preserves whitespace and scrolls horizontally when wrapping would change meaning.

Responsive typography

--type-display-xl: clamp(2.75rem, 2rem + 3vw, 4rem);
--type-display-lg: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);
--type-display-md: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
--type-heading-h1: clamp(2rem, 1.65rem + 1.4vw, 2.5rem);
--type-heading-h2: clamp(1.75rem, 1.55rem + 0.8vw, 2rem);
--type-heading-h3: clamp(1.375rem, 1.28rem + 0.4vw, 1.5rem);

Body and interface roles remain stable by default. At narrow widths, reduce column count and measure before reducing text. At wide widths, constrain measure rather than allowing lines to expand indefinitely.

Best Practices

Accessibility

Typography conforms to WCAG 2.2 AA.

• Maintain at least 4.5:1 contrast for normal text and 3:1 for large text.
• Support browser zoom and platform text scaling to at least 200% without loss of content or functionality.
• Reflow at 320 CSS px without two-dimensional scrolling, except where the content genuinely requires it.
• Do not disable user font scaling or impose a fixed maximum text-scale factor.
• Preserve content when users override line height, letter spacing, word spacing, and paragraph spacing.
• Use semantic headings, paragraphs, lists, labels, and code elements so assistive technology receives the correct structure.
• Keep focus indicators and control labels visible when text wraps or scales.
• Make horizontally scrollable code blocks keyboard accessible and label them when their purpose is not clear from nearby text.
• Avoid essential text inside images; provide an equivalent text alternative when it cannot be avoided.

Typography does not create a separate keyboard interaction model. Its responsibility is to preserve readable content, semantic structure, visible focus, and usable controls at every supported scale.