Display
When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style
D1
Font: Inter
Style: Bold
Font size: 72px
/4.5 em
Line height: 120%
Letter spacing: 0.015px
Margin bottom: 24px
Display 1
D2
Font: Inter
Style: Bold
Font size: 64px
/4 em
Line height: 120%
Letter spacing: 0.015px
Margin bottom: 24px
Display 2
D3
Font: Inter
Style: Bold
Font size: 54px
/3.375 em
Line height: 120%
Letter spacing: 0.015px
Margin bottom: 24px
Display 3
D4
Font: Inter
Style: Semi Bold
Font size: 50px
/3.375 em
Line height: 120%
Letter spacing: 0.015px
Margin bottom: 24px
Display 4
Body
Heading elements are designed to work best inside your page content. Use sentence case, do not set in all caps or all lowercase.
Body--Lead
Font: Inter
Style: Medium
Font size: 20px
/1.250 em
Line height: 150%
Letter spacing: 0px
Margin bottom: 0px
Body--Lead (20px/1.25 em): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Body--Big
Font: Inter
Style: Regular
Font size: 20px
/1.250 em
Line height: 150%
Letter spacing: 0px
Margin bottom: 0px
Body--Big (20px / 1.25 em): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body--Regular
Font: Inter
Style: Regular
Font size: 18px
/1.125 em
Line height: 160%
Letter spacing: 0px
Margin bottom: 0px
Body--Regular (18px / 1.125 em) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body--AllCap
Font: Inter
Style: Regular - All Caps
Font size: 18px
/1.125 em
Line height: 160%
Letter spacing: 0px
Margin bottom: 0px
Body--AllCapitals (18px / 1.125REM): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body--Caption
Font: Inter
Style: Light
Font size: 16px
/1 em
Line height: 150%
Letter spacing: 0px
Margin bottom: 8px
Body--Caption (16px / 1rem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body--Tiny
Font: Inter
Style: Bold
Font size: 13px
/0.813 em
Line height: 160%
Letter spacing: 0px
Margin bottom: 8px
Body--Tiny (14px / 0.875 em) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
