Skip to main content

Typography

Font Ramp

ExampleSizeLine HeightSample use cases
Display 172px / 4.5rem88pxLarge heroes or banner titles
Display 264px / 4rem76pxLarge banners or section titles a level below 1
Display 356px / 3.5rem68pxLarge banners or section titles a level below 2
Header 148px / 3rem56px.font-size-display
Header 240px1.25.font-size-display
Header 332px1.25.font-size-display
Header 424px1.25.font-size-display
Header 520px28px.font-size-display
Header 616px1.25.font-size-display
Subtitle 124px1.25.font-size-display
Subtitle 216px / 1rem24px.font-size-display
Body16px1.25.font-size-base
Body 314px / 0.875rem20Smaller body text. Recommended for high-density components and layouts.
Body Extra Small12px1.25.font-size-xs
ExampleSizeLine HeightClassCSS Variable
Body16px1.25.font-size-base--font-size-base
Body Small14px1.25.font-size-s--font-size-s
Body Extra Small12px1.25.font-size-xs--font-size-xs

Header and body text spacing

PairPadding
Header 1 and Body 116px
Header 2 and Body 216px
Header 3 and Body 212px
Header 4 and Body 212px
Header 5 and Body 28px
Header 6 and Body 28px

Resources