Typography

A fluid type system built on Poppins for display and headings, Inter for body and UI chrome. Fluid tokens scale continuously via clamp() between 360px and 1680px viewports.

Font Families

Typeface Specimens

Two typefaces power the entire system. Poppins handles brand expression; Inter handles readability.
Poppins — Display, Headings, Subtitles, Labels
ExtraBold 800
The quick brown fox jumps over the lazy dog
Bold 700
The quick brown fox jumps over the lazy dog
SemiBold 600
The quick brown fox jumps over the lazy dog
Medium 500
The quick brown fox jumps over the lazy dog
Inter — Body, Captions, Overlines
Regular 400
The quick brown fox jumps over the lazy dog
Medium 500
The quick brown fox jumps over the lazy dog
Bold 700
The quick brown fox jumps over the lazy dog

Type Scale

Live Specimens

Every token rendered at its real size. Resize the browser to see fluid tokens scale.
Display

Fluid · Poppins

display-xl
Automate everything
800 · clamp(3rem, 2.18rem + 3.64vw, 6rem) / 1.0 · -0.05em
display-lg
Automate everything
700 · clamp(2.5rem, 1.95rem + 2.42vw, 4.5rem) / 1.05 · -0.055em
Headings

Fluid · Poppins

heading-1
The quick brown fox jumps
700 · clamp(2rem, 1.59rem + 1.82vw, 3.5rem) / 1.15 · -0.05em
heading-2
The quick brown fox jumps
700 · clamp(1.625rem, 1.32rem + 1.36vw, 2.75rem) / 1.15 · -0.042em
heading-3
The quick brown fox jumps
600 · clamp(1.375rem, 1.14rem + 1.06vw, 2.25rem) / 1.2 · -0.042em
heading-4
The quick brown fox jumps
600 · clamp(1.25rem, 1.11rem + 0.61vw, 1.75rem) / 1.25 · -0.03em
heading-5
The quick brown fox jumps
600 · clamp(1.125rem, 1.02rem + 0.45vw, 1.5rem) / 1.3 · -0.025em
heading-6
The quick brown fox jumps
600 · clamp(1rem, 0.93rem + 0.30vw, 1.25rem) / 1.3 · -0.02em
Subtitles

Fluid · Poppins

subtitle-lg
The quick brown fox jumps over the lazy dog
500 · clamp(1.25rem, 1.15rem + 0.45vw, 1.625rem) / 1.4 · -0.02em
subtitle-sm
The quick brown fox jumps over the lazy dog
500 · clamp(1.125rem, 1.06rem + 0.30vw, 1.375rem) / 1.45 · -0.015em
Body

Mixed (body-lg fluid, rest fixed) · Inter

body-lg
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
400 · clamp(1rem, 0.97rem + 0.15vw, 1.125rem) / 1.6 · 0
body-md
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
400 · 1rem / 1.5 · 0
body-sm
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
400 · 0.875rem / 1.5 · 0
body-md-medium
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
500 · 1rem / 1.5 · 0
body-md-bold
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
700 · 1rem / 1.5 · 0
UI Chrome

Fixed · Mixed families

label
Submit form · Learn more · Get started
Poppins 600 · 1rem / 1.5 · -0.025em
label-sm
Submit form · Learn more · Get started
Poppins 600 · 0.875rem / 1.5 · -0.025em
caption
Updated 2 hours ago · 3 min read · v4.2.1
Inter 400 · 0.75rem / 1.35 · 0
overline
Featured · New release · Enterprise
Inter 700 · 0.6875rem / 1.45 · 0.05em · UPPERCASE

Reference

Resolved Pixel Values

The computed font-size/line-height in pixels at each canonical Figma breakpoint.
Token Desktop (1440px) Tablet (768px) Mobile (390px)
display-xl87 / 8763 / 6349 / 49
display-lg66 / 6950 / 5241 / 43
heading-152 / 6039 / 4533 / 38
heading-241 / 4732 / 3726 / 30
heading-334 / 4126 / 3122 / 26
heading-427 / 3422 / 2820 / 25
heading-523 / 3020 / 2618 / 23
heading-619 / 2517 / 2216 / 21
subtitle-lg25 / 3522 / 3120 / 28
subtitle-sm21 / 3019 / 2818 / 26
body-lg18 / 2917 / 2716 / 26
body-md16 / 24——
body-sm14 / 21——
label16 / 24——
label-sm14 / 21——
caption12 / 16——
overline11 / 16——

Guidelines

Usage Rules

When and how to apply each typographic category.
Section / Page Titles
Poppins ExtraBold (800) or Bold (700). Color: DeepBlue90. Use display-xl or display-lg for hero sections, heading-1 through heading-3 for page and section titles.
Subheading Accent
Poppins SemiBold (600) or Medium (500). Color: DeepBlue55. Use subtitle-lg and subtitle-sm for descriptive text beneath headings.
UI Labels
Poppins SemiBold 16px with -0.025em tracking. Use the label token for buttons, navigation items, form labels, and interactive element text.
Body Text
Inter Regular (400) or Medium (500). Color: DeepBlue90 for primary, DeepBlue60 for secondary. Use body-lg for featured paragraphs, body-md as the default, body-sm for dense UI. body-md-medium and body-md-bold for emphasis within body text.
Overline / Kicker
Inter Bold 11px, uppercase, 0.05em letter-spacing. Often colored Teal50. Used above headings to label sections or categories.
Disabled Text
Apply opacity: 0.5 to any text token to indicate a disabled or inactive state. Do not change the font weight or color independently.

Implementation Note

Safari Font Rendering

Poppins and Inter render heavier in Safari

Safari uses subpixel antialiasing by default, which makes fonts appear noticeably bolder than in Chrome or Firefox. This is especially visible with Poppins SemiBold/Bold headings and Inter at smaller sizes. Always apply the following CSS reset to normalize rendering across browsers:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

This switches Safari from subpixel to greyscale antialiasing, matching Chrome's default behaviour. Already included in the style guide's shared.css. Should be present in every production stylesheet.