Typography

Typography

Standard’s type system is built on a deliberate tension: three fonts, each chosen for a specific emotional register. Instrument Serif carries the weight of tradition — gravitas, authority, the feeling that words matter. Outfit is the geometric sans-serif that says clarity and modernity without trying too hard. JetBrains Mono is precision itself — every character the same width, every symbol unambiguous.

Together, they create a visual language where hierarchy isn’t just size — it’s voice.

The Three Voices

--ff-d: 'Instrument Serif', Georgia, serif;     /* Display */
--ff-b: 'Outfit', system-ui, sans-serif;        /* Body */
--ff-m: 'JetBrains Mono', ui-monospace, monospace; /* Mono */
Instrument Serif (Display)
The quick brown fox jumps over the lazy dog.
Outfit (Body & UI)
The quick brown fox jumps over the lazy dog. Perfect for readable body text and clean UI elements.
JetBrains Mono (Code)
const greeting = "Hello, World!";

Why These Three?

Most design systems pick one sans-serif and call it done. Standard uses three because each serves a fundamentally different purpose:

Aa
Instrument Serif
Gravitas. The serifs anchor words to the page, giving headlines the permanence of something worth reading. Used only at display sizes where the details sing.
Aa
Outfit
Clarity. Geometric proportions with just enough warmth. No distracting personality — it disappears into the content, which is exactly what body text should do.
Aa
JetBrains Mono
Precision. Monospaced for code, data, and technical labels. Every character occupies the same width — alignment is automatic, scanning is instant.

Font Pairing in Context

The three fonts don’t just coexist — they create a visual hierarchy that guides the eye from headline to body to detail without conscious effort.

Featured Article
Design tokens are the atoms of visual consistency
A design token is a named value — a single source of truth for a visual decision. Change the token, and every component that references it updates in concert.
Sarah Chen
2026-02-08 · 4 min read

Notice the layering: mono for the category label (small, precise), serif for the headline (large, commanding), sans for the body (medium, readable), then mono again for metadata (small, data-like). Three fonts, four levels of hierarchy.

Type Scale

Based on a Major Third (1.25) progression, tokenized as CSS custom properties. Every font-size in the system uses one of these tokens — no magic numbers.

Token Size px Usage
--fs-hero clamp(2.5rem, 8vw, 4rem) 40–64 Hero headlines
--fs-7xl 2.5rem 40 Display
--fs-6xl 2rem 32 Display small
--fs-5xl 1.75rem 28 H2 section headers
--fs-4xl 1.5rem 24 Large headings
--fs-3xl 1.25rem 20 Section icons, large UI
--fs-2xl 1.125rem 18 H3, sub-headings
--fs-xl 1rem 16 Prose body, prominent text
--fs-lg 0.9375rem 15 Emphasized body, component text
--fs-base 0.875rem 14 Default body, form inputs
--fs-md 0.8125rem 13 Compact body, code blocks
--fs-sm 0.75rem 12 Small text, table captions
--fs-xs 0.6875rem 11 Captions, metadata, breadcrumbs
--fs-2xs 0.625rem 10 Tiny labels, counters
--fs-nav 0.5625rem 9 Nav pill labels (mono, uppercase)
--fs-3xs 0.5rem 8 Micro labels
Hero
Heading 2 --fs-5xl
Heading 3 --fs-2xl
Body text — the quick brown fox jumps over the lazy dog. --fs-xl
Default body for captions and labels. --fs-base
const code = "monospace"; // --fs-md
Nav Label --fs-nav

Why 1.25?

A modular scale creates sizes that feel related rather than arbitrary. Here’s what happens when you don’t use one:

❌ Arbitrary sizes
Too big?
Awkward gap
Body text sits oddly beneath headings that don't relate to each other mathematically.
✓ Major Third (1.25)
Proportional
Each step × 1.25
Body text relates harmonically to every heading above it. The eye perceives order.

The 1.25 ratio (Major Third) is deliberate — assertive enough to create clear hierarchy, restrained enough to avoid jarring jumps. Larger ratios (like 1.414 Augmented Fourth) work for dramatic editorial design; smaller ratios (like 1.125 Major Second) suit dense data UIs. Standard’s 1.25 sits in the sweet spot for documentation and product interfaces.

Vertical Rhythm

When line heights and spacing share a common unit, text across adjacent columns aligns to the same invisible grid. Standard’s type system uses a 4px baseline — every line height resolves to a multiple of 4px.

Heading aligns
Body text snaps to the same 24px baseline grid. Each line sits on an invisible shelf, creating a calm, orderly rhythm even across columns.
Adjacent columns share the same grid. Notice how these lines align horizontally with the text on the left — that's the power of consistent vertical rhythm.
code.also.aligns()

The striped background reveals the 24px baseline grid. Headings, body text, and code all land on it. This isn’t about rigid rules — it’s about the subtle sense of order that makes a page feel polished.

Font Weights

Outfit provides a range of weights. Use them intentionally to create hierarchy.

Weight Value Usage
Light 300 Large display text only
Regular 400 Body text, descriptions
Medium 500 UI labels, buttons
Semi-Bold 600 Subheadings, emphasis
Bold 700 Strong emphasis
Light (300) — Large display only
Regular (400) — Default body weight
Medium (500) — Buttons and labels
Semi-Bold (600) — Subheadings
Bold (700) — Strong emphasis

Instrument Serif

Instrument Serif works best at regular weight (400), with italics for emphasis.

Regular — Elegant display headings
Italic — Beautiful emphasis
/* Weight usage */
body { font-family: var(--ff-b); font-weight: 400; }
.Button { font-weight: 500; }
h3 { font-weight: 600; }
h1, h2 { font-family: var(--ff-d); font-weight: 400; }

Responsive Typography

The display heading uses clamp() for smooth scaling — no breakpoint jumps, just a continuous curve from mobile to desktop.

Simulated viewport widths
320px — Mobile
Design
480px — Large mobile
Design
Full width — Desktop
Design
/* Scales from 2.5rem (40px) to 4rem (64px) based on viewport */
font-size: var(--fs-hero); /* clamp(2.5rem, 8vw, 4rem) */

/* Base (Mobile) */
.page-header h1 { 
  font-size: var(--fs-hero); 
}

/* Prose scales naturally with rem */
.prose { font-size: var(--fs-xl); }

/* Breakpoint-specific adjustments */
@media (min-width: 768px) {
  .prose h2 { font-size: var(--fs-5xl); }
}

@media (min-width: 1024px) {
  .prose h2 { font-size: var(--fs-6xl); }
}

When to Use Which Font

Choosing the right font isn’t about preference — it’s about matching the role of the text to the character of the typeface.

Aa
Instrument Serif
Page titles, hero text, section headings (H1, H2). Anywhere you need to stop the eye.
DISPLAY
Aa
Outfit
Body copy, buttons, labels, form fields, navigation, H3+. Anything the user reads through.
BODY & UI
Aa
JetBrains Mono
Code, data, timestamps, nav labels, technical metadata. Anything that benefits from fixed-width precision.
CODE & DATA

The rule of thumb: If it’s a statement, use serif. If it’s communication, use sans. If it’s data, use mono.

Line Height

Proper leading improves readability. Tighter for headings, looser for body text.

Context Line Height Ratio
Display/H1 1.0 – 1.1 Tight
H2 1.25 Snug
H3/UI 1.4 Normal
Body 1.6 – 1.7 Relaxed
Long-form 1.7 Loose
line-height: 1.1 (Display)
Tight leading for serif headlines keeps them compact and impactful
line-height: 1.6 (Body)
Relaxed leading for body text improves readability over multiple lines of content 
/* Line heights */
.page-header h1 { line-height: 1; }
.prose h2 { line-height: 1.25; }
h3 { line-height: 1.4; }
body, p { line-height: 1.6; }
.prose { line-height: 1.7; }

Letter Spacing

Subtle tracking adjustments improve legibility at extreme sizes. Large text needs tightening (characters drift apart optically); small uppercase text needs loosening (characters crowd).

Context Letter Spacing When
Display -0.035em Large serif headings
Headings -0.02em Section titles
Normal 0 Body text
Labels 0.03em – 0.06em Uppercase, monospace labels
-0.035em (Display)
Tight Serif Tracking
0 (Default)
Normal body text with default letter spacing.
0.06em (Labels)
Section Label
/* Letter spacing */
.page-header h1 { letter-spacing: -0.035em; }
.prose h2 { letter-spacing: -0.02em; }
.fnav-btn { letter-spacing: 0.06em; text-transform: uppercase; }

Text Colors

Use semantic color tokens for consistent hierarchy.

--fg — Headlines & primary text
--fg-2 — Body text, descriptions
--fg-3 — Captions, placeholders
--fg-4 — Disabled, decorative
--accent — Links and interactive elements
--ok — Success messages
--err — Error messages
/* Text colors */
.text-primary { color: var(--fg); }
.text-secondary { color: var(--fg-2); }
.text-muted { color: var(--fg-3); }
.text-accent { color: var(--accent); }
.text-success { color: var(--ok); }
.text-error { color: var(--err); }

Heading Styles

Complete heading definitions matching the Library aesthetic.

Page Title
Display: --ff-d / --fs-hero / 400 / 1 / -0.035em

Section Header

H2: --ff-d / --fs-5xl / 400 / 1.25 / -0.02em

Subsection

H3: --ff-b / --fs-2xl / 600 / 1.4 / 0 
.page-header h1 {
  font-family: var(--ff-d);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}

.page-header h1 em {
  font-style: italic;
  color: var(--accent);
}

.prose h2 {
  font-family: var(--ff-d);
  font-size: var(--fs-5xl);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: var(--space-10) 0 var(--space-4);
}

.prose h3 {
  font-family: var(--ff-b);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.4;
  margin: var(--space-8) 0 var(--space-3);
}

Prose Styles

Optimized typography for long-form reading.

Good typography is invisible. When type is well-set, the reader doesn't notice the mechanics — they simply absorb the content. This is the goal of Standard's typography system.

The measure (line length) is kept between 45-75 characters for optimal readability. Combined with generous line-height and proper spacing between paragraphs, long-form content becomes effortless to read.

Notice how your eye flows naturally from line to line without strain.

.prose {
  font-size: var(--fs-xl);
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 65ch; /* Optimal line length */
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose strong {
  font-weight: 600;
  color: var(--fg);
}

.prose code:not([class*="language-"]) {
  font-family: var(--ff-m);
  font-size: 0.875em;  /* Relative to parent — stays as em */
  padding: 2px 6px;
  background: var(--bg-m);
  border-radius: var(--r-s);
  color: var(--accent);
}

Code Typography

JetBrains Mono styles for code blocks and inline code.

Inline Code

Use the var(--space-4) token for standard spacing.

Code Block 
function greet(name) {
  return `Hello, ${name}!`;
}
code:not([class*="language-"]) {
  font-family: var(--ff-m);
  font-size: 0.875em;  /* Relative to parent */
  padding: 2px 6px;
  background: var(--bg-m);
  border-radius: var(--r-s);
  color: var(--accent);
}

pre[class*="language-"] {
  font-family: var(--ff-m);
  font-size: var(--fs-md);
  line-height: 1.7;
  background: var(--g950);
  border: 1px solid var(--g800);
  border-radius: var(--r-l);
  padding: var(--space-4);
}

The floating pill nav uses monospace labels with wide tracking.

Components Tokens Guides 
.fnav-btn {
  font-family: var(--ff-m);
  font-size: var(--fs-nav);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

Best Practices

Do

  • ✓ Use Instrument Serif for display — Large headlines, hero text
  • ✓ Use Outfit for body and UI — Readable and clean
  • ✓ Use JetBrains Mono for code — Clear differentiation
  • ✓ Establish clear hierarchy — Size + font + weight guides the eye
  • ✓ Use appropriate measure — 45-75 characters per line
  • ✓ Add breathing room — Generous line-height for body text

Don’t

  • ✗ Mix too many sizes — Stick to the scale
  • ✗ Use pure black text — Use --fg (oklch-based)
  • ✗ Justify body text — Left-align for better readability
  • ✗ Use Instrument Serif for body — Save it for headlines
  • ✗ Forget mobile — Test typography at small viewports
  • ✗ Over-style code — Keep it clean and readable

Quick Reference

/* Font Families */
font-family: var(--ff-d);  /* Instrument Serif — Display */
font-family: var(--ff-b);  /* Outfit — Body & UI */
font-family: var(--ff-m);  /* JetBrains Mono — Code */

/* Type Scale Tokens (use these, not raw values) */
font-size: var(--fs-hero); /* clamp(2.5rem, 8vw, 4rem) — Hero */
font-size: var(--fs-7xl);  /* 2.5rem  — Display */
font-size: var(--fs-6xl);  /* 2rem    — Display small */
font-size: var(--fs-5xl);  /* 1.75rem — H2 */
font-size: var(--fs-4xl);  /* 1.5rem  — Large heading */
font-size: var(--fs-3xl);  /* 1.25rem — Section icons */
font-size: var(--fs-2xl);  /* 1.125rem — H3 */
font-size: var(--fs-xl);   /* 1rem    — Prose body */
font-size: var(--fs-lg);   /* .9375rem — Emphasized body */
font-size: var(--fs-base); /* .875rem — Default body */
font-size: var(--fs-md);   /* .8125rem — Code blocks */
font-size: var(--fs-sm);   /* .75rem  — Small text */
font-size: var(--fs-xs);   /* .6875rem — Captions */
font-size: var(--fs-2xs);  /* .625rem — Tiny labels */
font-size: var(--fs-nav);  /* .5625rem — Nav labels */
font-size: var(--fs-3xs);  /* .5rem   — Micro */

/* Weights */
font-weight: 400;  /* Regular (body, serif) */
font-weight: 500;  /* Medium (buttons) */
font-weight: 600;  /* Semi-Bold (subheads) */
font-weight: 700;  /* Bold (emphasis) */

/* Line Heights */
line-height: 1;    /* Display */
line-height: 1.25; /* Headings */
line-height: 1.4;  /* UI */
line-height: 1.6;  /* Body */
line-height: 1.7;  /* Prose/Code */

/* Letter Spacing */
letter-spacing: -0.035em; /* Display */
letter-spacing: -0.02em;  /* H2 */
letter-spacing: 0.06em;   /* Labels */