Typography
Below are the site level typography styles that form the foundation of our text elements.
In order to update the appearance of your typography, the site level typography variables below can be updated.
Classes are provided, aligned with these variable names (for example, text-body will responsively apply the body text size and line height).
Desktop Typography Sizes
--text-desktop-2xl
--line-height-desktop-desktop-2xl
Altitude
45px
56px
--text-desktop-xl
--line-height-desktop-desktop-xl
Altitude
37px
48px
--text-desktop-2lg
--line-height-desktop-desktop-2lg
Altitude
30px
40px
--text-desktop-lg
--line-height-desktop-desktop-lg
Altitude
24px
32px
--text-desktop-md
--line-height-desktop-desktop-md
Altitude
20px
28px
--text-desktop-body
--line-height-desktop-desktop-body
Altitude
16px
24px
--text-desktop-sm
--line-height-desktop-desktop-sm
Altitude
14px
20px
--text-desktop-xs
--line-height-desktop-desktop-xs
Altitude
13px
20px
Mobile Typography Sizes
--text-mobile-2xl
--line-height-mobile-mobile-2xl
Altitude
32px
40px
--text-mobile-xl
--line-height-mobile-mobile-xl
Altitude
28px
36px
--text-mobile-2lg
--line-height-mobile-mobile-2lg
Altitude
24px
32px
--text-mobile-lg
--line-height-mobile-mobile-lg
Altitude
21px
28px
--text-mobile-md
--line-height-mobile-mobile-md
Altitude
18px
24px
--text-mobile-body
--line-height-mobile-mobile-body
Altitude
16px
24px
--text-mobile-sm
--line-height-mobile-mobile-sm
Altitude
14px
20px
--text-mobile-xs
--line-height-mobile-mobile-xs
Altitude
13px
20px
Typography Weights
--font-thin
Altitude
100
--font-extra-light
Altitude
200
--font-light
Altitude
300
--font-normal
Altitude
400
--font-medium
Altitude
500
--font-semi-bold
Altitude
600
--font-bold
Altitude
700
--font-extra-bold
Altitude
800
--font-black
Altitude
900