Typography

Three type stacks and eleven composites, each pairing a size with the weight, line height and tracking the components actually use at that size. A treatment is published only where the stylesheet declares its line height, so a few real sizes are recorded as exclusions rather than guessed at.

CSS Tokens SASS Tokens Tailwind DTCG
in-sync·Source: css:blocks/base.css·Last synced 5d ago

Typefaces

Our typeface defines the foundation of our typography system. It ensures readability, consistency, and flexibility across all applications.

Typeface

'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890'?"!"(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*

Typeface

'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890'?"!"(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*

Typeface

'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890'?"!"(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*

Typography Scale

This is our typography hierarchy, defining the full range of headings, paragraphs, labels and other text used across the system.

:root {
  --typography-stack-cal-sans: 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Cal Sans, falling back to Inter then the system UI face. One weight only — 400. */
  --typography-stack-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Inter, falling back to the system UI face. Loaded at 400, 500 and 600. */
  --typography-stack-ibm-plex-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /** IBM Plex Mono, falling back to the system monospace face. Loaded at 300 and 400. */
  --typography-size-12: 12px; /** Mono label size. Every uppercase label in the system: eyebrows, card titles, trend lines, footer column titles, the footer legal bar and the stats tagline. */
  --typography-size-14: 14px; /** Small control label. .btn--sm, the header's two buttons. */
  --typography-size-15: 15px; /** .btn's own label size, and the body size of feature card copy and the footer tagline. */
  --typography-size-18: 18px; /** Lead paragraph size (four section intros) and .btn--lg's label. */
  --typography-size-44: 44px; /** Section heading. Features, gallery and FAQ. */
  --typography-size-48: 48px; /** Feature card figure. */
  --typography-size-56: 56px; /** Closing-CTA panel heading. */
  --typography-size-64: 64px; /** Stats figure, on the dark surface. */
  --typography-size-72: 72px; /** Hero headline. The largest type in the system. */
  --typography-font-family-display: 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Display headings. Every block's h1 and h2. */
  --typography-font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Body copy, UI labels and buttons. The document default. */
  --typography-font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /** Uppercase eyebrow labels, card titles and metadata. */
  --typography-display-hero: 400 72px/1.08 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Display / Hero — the hero headline, .display.hero__heading. The only 1.08 line height in the system. */
  --typography-display-panel: 400 56px/1.1 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Display / Panel — the closing-CTA panel headline, .display.closing-cta__heading. */
  --typography-display-section: 400 44px/1.1 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Display / Section — the section headline in features, gallery and FAQ. The most-used display step, three blocks. */
  --typography-metric-statement: 400 64px/1 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Metric / Statement — the stats figures, .display.stats__value, on the dark surface. Display face at line height 1 because the content is numerals on one line. */
  --typography-metric-card: 400 48px/1 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Metric / Card — the feature card figure, .display.features__stat. Same treatment as Metric / Statement, one step down. */
  --typography-body-lead: 400 18px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Body / Lead — section intro copy in four blocks: features, gallery, FAQ and closing CTA. The most-used text style in the system. */
  --typography-body-copy: 400 15px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Body / Copy — feature card body and the footer tagline. Same 1.6 rhythm as Body / Lead, three steps smaller. */
  --typography-control-default: 500 15px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Control / Default — .btn's own label size. Declared but never rendered: all five buttons in the catalog carry .btn--sm, .btn--lg or a block override. */
  --typography-control-small: 500 14px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Control / Small — .btn--sm, the header's two buttons. Size from the modifier, weight and line height from .btn. */
  --typography-control-large: 500 18px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Control / Large — .btn--lg, the hero's two buttons. Size from the modifier, weight and line height from .btn. */
  --typography-mono-tagline: 300 12px/1.6 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /** Mono / Tagline — .mono.stats__tagline, uppercase. The only mono text that declares a line height, because it is the only mono text that wraps; six single-line labels share its family, size, weight and tracking. */
}
PreviousColorsNext Spacing
Typography