Typography

Complete type system — Display, Headline, Title, Body, and Label. Each example below is rendered with a single class.

Display

Display 2XL 72px / 4.5rem · line-height 90px / 5.625rem · tracking -2%

Display 2XL

.text-display-2xl-regular

Display 2XL

.text-display-2xl-medium

Display 2XL

.text-display-2xl-semibold

Display 2XL

.text-display-2xl-bold
Display XL 60px / 3.75rem · line-height 72px / 4.5rem · tracking -2%

Display XL

.text-display-xl-regular

Display XL

.text-display-xl-medium

Display XL

.text-display-xl-semibold

Display XL

.text-display-xl-bold
Display Large 48px / 3rem · line-height 60px / 3.75rem · tracking -2%

Display Large

.text-display-lg-regular

Display Large

.text-display-lg-medium

Display Large

.text-display-lg-semibold

Display Large

.text-display-lg-bold
Display Medium 36px / 2.25rem · line-height 44px / 2.75rem · tracking -2%

Display Medium

.text-display-md-regular

Display Medium

.text-display-md-medium

Display Medium

.text-display-md-semibold

Display Medium

.text-display-md-bold

Headline

Headline Large 32px / 2rem · line-height 40px / 2.5rem

Headline Large

.text-headline-lg-regular

Headline Large

.text-headline-lg-medium

Headline Large

.text-headline-lg-bold
Headline Medium 28px / 1.75rem · line-height 36px / 2.25rem

Headline Medium

.text-headline-md-regular

Headline Medium

.text-headline-md-medium

Headline Medium

.text-headline-md-bold
Headline Small 24px / 1.5rem · line-height 32px / 2rem

Headline Small

.text-headline-sm-regular

Headline Small

.text-headline-sm-medium

Headline Small

.text-headline-sm-bold

Title

Title Large 20px / 1.25rem · line-height 28px / 1.75rem

Title Large

.text-title-lg-regular

Title Large

.text-title-lg-medium

Title Large

.text-title-lg-semibold

Title Large

.text-title-lg-bold
Title Medium 16px / 1rem · line-height 24px / 1.5rem

Title Medium

.text-title-md-regular

Title Medium

.text-title-md-medium

Title Medium

.text-title-md-semibold

Title Medium

.text-title-md-bold
Title Small 14px / 0.875rem · line-height 20px / 1.25rem

Title Small

.text-title-sm-regular

Title Small

.text-title-sm-medium

Title Small

.text-title-sm-semibold

Title Small

.text-title-sm-bold

Body

Body XL 18px / 1.125rem · line-height 24px / 1.5rem

Body XL

.text-body-xl-regular

Body XL

.text-body-xl-medium

Body XL

.text-body-xl-semibold

Body XL

.text-body-xl-bold
Body Large 16px / 1rem · line-height 24px / 1.5rem

Body Large

.text-body-lg-regular

Body Large

.text-body-lg-medium

Body Large

.text-body-lg-semibold

Body Large

.text-body-lg-bold
Body Medium 14px / 0.875rem · line-height 20px / 1.25rem

Body Medium

.text-body-md-regular

Body Medium

.text-body-md-medium

Body Medium

.text-body-md-semibold

Body Medium

.text-body-md-bold
Body Small 13px / 0.8125rem · line-height 16px / 1rem

Body Small

.text-body-sm-regular

Body Small

.text-body-sm-medium

Body Small

.text-body-sm-semibold

Body Small

.text-body-sm-bold
Body XS 12px / 0.75rem · line-height 16px / 1rem

Body XS

.text-body-xs-regular

Body XS

.text-body-xs-medium

Body XS

.text-body-xs-semibold

Body XS

.text-body-xs-bold

Label

Label Large 14px / 0.875rem · line-height 20px / 1.25rem

Label Large

.text-label-lg-regular

Label Large

.text-label-lg-medium

Label Large

.text-label-lg-semibold

Label Large

.text-label-lg-bold
Label Medium 13px / 0.8125rem · line-height 16px / 1rem

Label Medium

.text-label-md-regular

Label Medium

.text-label-md-medium

Label Medium

.text-label-md-semibold

Label Medium

.text-label-md-bold
Label Small 12px / 0.75rem · line-height 16px / 1rem

Label Small

.text-label-sm-regular

Label Small

.text-label-sm-medium

Label Small

.text-label-sm-semibold

Label Small

.text-label-sm-bold
Label XS 11px / 0.6875rem · line-height 14px / 0.875rem

Label XS

.text-label-xs-regular

Label XS

.text-label-xs-medium

Label XS

.text-label-xs-semibold

Label XS

.text-label-xs-bold