Link

Typography

Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as variables that you can use in components or custom CSS.

Heading utilities

Class name Rem size: desktop Pixel size: desktop Rem size: mobile Pixel size: mobile Line height
h0-mktg-fluid 4.5rem 72px 4rem 64px 0.96
h1-mktg-fluid 4rem 64px 3rem 48px 0.96
h2-mktg-fluid 3.5rem 56px 2rem 32px 1
h3-mktg-fluid 2rem 32px 1.5rem 24px 1.1
h4-mktg-fluid 1.5rem 24px 1.25rem 20px 1.1
h5-mktg-fluid 1.25rem 20px 1.5rem 24px 1.25
h6-mktg-fluid 1rem 16px 0.875rem 14px 1.25

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

These utilities are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.

<h2 class="h1-mktg-fluid">Looks like a heading 1, semantically a heading 2</h2>

Looks like a heading 1, semantically a heading 2

General type scale utilities

Class name Rem size: desktop Pixel size: desktop Rem size: mobile Pixel size: mobile Line height
f1-mktg-fluid 2rem 32px 1.625rem 26px  
f2-mktg-fluid 1.5rem 24px 1.375rem 22px  
f3-mktg-fluid 1.25rem 20px 1.125rem 18px  
f4-mktg-fluid 1rem 16px 1rem 16px  
f5-mktg-fluid 0.875rem 14px 0.875rem 14px  
f6-mktg-fluid 0.75rem 12px 0.75rem 12px  

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Text utilities

Spaced text

This is commonly used for section subheadings on marketing pages. It applies letter-spacing in conjunction with other utility classes to produce this result.

Spaced text

<h4 class="text-uppercase text-normal text-mono text-gray-light text-spaced">Spaced text</h4>