Storybook
SketchNotice:
Typography sizing updates!
We've updated typography sizing variables and class names to make them more agnostic. Read about how you can update.
The design system doesn't style base HTML typography elements (like h1, h2, p, etc) in order to avoid conflicting with any existing site styles.
Examples
Heading--5xl
Heading--4xl
Heading--3xl
Heading--2xl
Heading--xl
Heading--lg
Heading--md
Heading--sm
Link Heading
On dark background
Code
Responsive typography
.ds-type-heading-5xl, ds-type-heading-4xl, and ds-type-heading-3xl classes are responsive by default.
| Font class | 545px and below | 545px to 768px | 768px and above |
|---|---|---|---|
.ds-type-heading-5xl | 36px | 48px | 60px |
.ds-type-heading-4xl | 36px | 36px | 48px |
.ds-type-heading-3xl | 30px | 30px | 36px |
To apply responsive typography elsewhere, use the font size utility class.
Since the base typography margins and line height is measured in em units,
they'll automatically adjust as you change the font size.
Styles
The following Sass variables can be overridden to change the type sizes:
$font-size-5xl$font-size-4xl$font-size-3xl$font-size-2xl$font-size-xl$font-size-lg$font-size-md, uses$font-size-base$font-size-sm