Typography
Header text
To use any of these styles, simply wrap your text in the corresponding HTML element.
H1 – Page heading
Family
Museo Sans (900)
Size
38px
2.375rem
Line height
48px
3rem
Only one of these should be used per page.
Show mangled quartz flip vibe exactly
H2 – Section heading
Family
Museo Sans (700)
Size
30px
1.875rem
Line height
40px
2.5rem
H3 – Section subheading
Family
Museo Sans (700)
Size
24px
1.5rem
Line height
36px
2.25rem
The wizard quickly jinxed the gnomes before they vaporized
H4
Family
Museo Sans (700)
Size
18px
1.125rem
Line height
28px
1.75rem
Pack my red box with five dozen quality jugs
Content text
Paragraph
Family
Museo Sans (300)
Size
16px
1rem
Line height
26px
1.625rem
This is our basic body text. To use it, make use a paragraph HTML element.
The quick brown fox jumps over the lazy dog
Explainer/Call-out
Family
Museo Sans (300)
Size
24px
1.5rem
Line height
34px
2.125rem
To use explainer text, add the class explainer to any text element.
To make the explainer text a callout, which will add an $alex-light-blue background and some padding, use the class callout on a text element.
Combine the two for some real oomf!
Explainer: Quick fox jumps nightly above the wizard
Explainer + Callout: Quick fox jumps nightly above the wizard
Note
Family
Museo Sans (300)
Size
14px
0.875rem
Line height
18px
1.125rem
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