Typography
Under construction
We’re updating our typographic rules.Our brand fonts are Gelica and Graphik. Gelica is used for larger headers, and Graphik is used for the rest.
Header text
To use any of these styles, simply wrap your text in the corresponding HTML element.
H1XL – Big page heading
Family
Gelica Regular
Size
60px
3.75rem
Line height
120%
Do this when you need a really big header.
H1 – Page heading
Family
Gelica Regular
Size
48px
3rem
Line height
120%
Only one of these should be used per page. Don’t pair with H1XL.
Show mangled quartz flip vibe exactly
H2 – Section heading
Family
Gelica Regular
Size
36px
2.25rem
Line height
120%
H3 – Section subheading
Family
Gelica Regular
Size
30px
1.875rem
Line height
130%
The wizard quickly jinxed the gnomes before they vaporized
H4
Family
Graphik Medium
Size
24px
1.5rem
Line height
130%
Pack my red box with five dozen quality jugs
H5
Family
Graphik Medium
Size
21px
1.3125rem
Line height
130%
When quirky zebras mix glowing javelins, bad foxes just prance
H6
Family
Graphik Medium
Size
18px
1.125rem
Line height
140%
Alchemists brew exotic potions for quick jumping vexed knights
Content text
Paragraph
Family
Graphik Regular
Size
16px
1rem
Line height
150%
The quick brown fox jumps over the lazy dog
Call-out / Paragraph large
Family
Graphik Regular
Size
20px
1.25rem
Line height
150%
Explainer: Quick fox jumps nightly above the wizard
Eyebrow
Family
Graphik Semibold, all caps
Size
16px
1.25rem
Line height
120%
Accident Insurance
Note
Family
Graphik Regular
Size
14px
0.875rem
Line height
140%
Note text is little, but not thin. It’s used for footnotes, legal text and other small text needs.
To use this style, add the class footnote to your paragraph HTML element.
Explainer: Quick fox jumps nightly above the wizard
Alternative fonts
When creating branded content in the Google Suite, use Proxima Nova in place of Graphik, and Hedvig Letters in place of Gelica.
When creating content in Microsoft Office, use Segoe UI in place of Graphik AND Gelica.
Flavor fonts
TKTKTK