Typography
Our design system leverages a purposeful set of typographic styles. We’ve stress-tested this typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any project, while remaining as accessible as possible for everyone.
Poppins
Headings
Lato
Body
Display 2xl
Font size: 72px / 4.5rem | Line height: 90px / 5.625rem | Tracking: -2%
Display 2xl
Regular
Display 2xl
Medium
Display 2xl
Semibold
Display 2xl
Bold
Display xl
Font size: 60px / 3.75rem | Line height: 72px / 4.5rem | Tracking: -2%
Display xl
Regular
Display xl
Medium
Display xl
Semibold
Display xl
Bold
Display lg
Font size: 48px / 3rem | Line height: 60px / 3.75rem | Tracking: -2%
Display lg
Regular
Display lg
Medium
Display lg
Semibold
Display lg
Bold
Display md
Font size: 36px / 2.25rem | Line height: 44px / 2.75rem | Tracking: -2%
Display md
Regular
Display md
Medium
Display md
Semibold
Display md
Bold
Display sm
Font size: 30px / 1.875rem | Line height: 38px / 2.375rem
Display sm
Regular
Display sm
Medium
Display sm
Semibold
Display sm
Bold
Display xs
Font size: 24px / 1.5rem | Line height: 32px / 2rem
Display xs
Regular
Display xs
Medium
Display xs
Semibold
Display xs
Bold
Text xl
Font size: 20px / 1.25rem | Line height: 30px / 1.875rem
Text xl
Regular
Text xl
Medium
Text xl
Semibold
Text xl
Bold
Text lg
Font size: 18px / 1.125rem | Line height: 28px / 1.75rem
Text lg
Regular
Text lg
Medium
Text lg
Semibold
Text lg
Bold
Text md
Font size: 16px / 1rem | Line height: 24px / 1.5rem
Text md
Regular
Text md
Medium
Text md
Semibold
Text md
Bold
Text small
Font size: 14px / 0.875rem | Line height: 20px / 1.25rem
Text sm
Regular
Text sm
Medium
Text sm
Semibold
Text sm
Bold
Text xs
Font size: 12px / 0.75rem | Line height: 18px / 1.125rem
Text xs
Regular
Text xs
Medium
Text xs
Semibold
Text xs
Bold
underlined 1