Typography
Typography defines the foundation for clear and consistent communication across our products. It establishes hierarchy, readability, and rhythm, ensuring our interfaces feel cohesive across every screen size and platform.
Accessibility
Specs
Heading
Heading / XXL
font-family: Hover Diatype;
font-weight: Bold or 700;
font-size: 72px;
line-height: 72px;
letter-spacing: -0.02em;
Heading / XL
font-family: Hover Diatype;
font-weight: Bold or 700;
font-size: 48px;
line-height: 48px;
letter-spacing: -0.02em;
Heading / Large
font-family: Hover Diatype;
font-weight: Bold or 700;
font-size: 32px;
line-height: 32px;
letter-spacing: -0.02em;
Heading / Medium
font-family: Hover Diatype;
font-weight: Bold or 700;
font-size: 24px;
line-height: 24px;
letter-spacing: -0.02em;
Heading / Small
font-family: Hover Diatype;
font-weight: Bold or 700;
font-size: 16px;
line-height: 20px;
letter-spacing: 0em;
Heading / XS
font-family: Hover Diatype;
font-weight: Bold or 700;
font-size: 14px;
line-height: 20px;
letter-spacing: 0em;
Body
Body / Medium
font-family: Hover Diatype;
font-weight: Regular or 400;
font-size: 16px;
line-height: 20px;
letter-spacing: 0em;
Body / Small
font-family: Hover Diatype;
font-weight: Regular or 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0em;
Body / Footnote
font-family: Hover Diatype;
font-weight: Regular or 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0em;
Body / Label
font-family: Hover Diatype;
font-weight: Bold or 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0em;
Font Family
| Name | Value |
|---|---|
| Heading | Diatype, Helvetica Neue, Helvetica, Arial, sans-serif |
| Body | Diatype, Helvetica Neue, Helvetica, Arial, sans-serif |
Font Weight
| Body, Heading | Aliases |
|---|---|
| 400 / 400 | normal, display, body |
| 700 / 700 | bold, heading, bodyBold |
Hover Diatype
Diatype is a warm yet sharp grotesque ideal for text and reading on screen. Its name refers to the clunky, pre-digital typesetting machines that informed its shapes and the Swiss Neo-grotesque genre at large.
Type scale
The type scale creates a balanced system of sizes and line heights that adapts across breakpoints. It ensures clarity, hierarchy, and consistency whether used in dense interfaces or large, expressive layouts.
4.5
Hover 72Hover Diatype 724
Hover 64Hover Diatype 643.5
Hover 56Hover Diatype 563
Hover 48Hover Diatype 482.5
Hover 40Hover Diatype 402
Hover 32Hover Diatype 321.75
Hover 28Hover Diatype 281.5
Hover 24Hover Diatype 241.25
Hover 20Hover Diatype 201
Hover 16Hover Diatype 160.875
Hover 14Hover Diatype 140.75
Hover 12Hover Diatype 12Usage
Font size and height
React
Use a preset size by either using the Heading
or Body component or by applying a
textStyle before overriding
fontSize or lineHeight.
Bootstrap
Heading and Body preset sizes are baked into <h1> through <h6>
elements or corresponding .heading-* class.
Accessibility
We aim for WCAG 2.2 level AA color contrast, i.e. 4.5:1 in most cases.
The default colors we ship for type in Heading and Body meet this standard when on the default background. If you're using a custom color or background color, please confirm the color contrast before delivering designs.
For more details about our color palettes, see the color tokens documentation.
Line length
Running text that spans multiple lines at standard screen sizes should adhere to best practices for line length. That means ensuring that no line of type in running text contains more than about 66-72 characters including spaces and punctuation, regardless of text size.