Font families
- Headline
- Degular Display
--typography-font-family-headline- Header
- Haffer
--typography-font-family-header- Body
- Haffer
--typography-font-family-body- Label
- Haffer
--typography-font-family-label
Line height
- Tightest · 1
--typography-leading-tightest- Tight · 1.25
--typography-leading-tight- Default · 1.5
--typography-leading-default- Loose · 1.75
--typography-leading-loose
Headline
Degular Display. Marketing and page-level statements.
.text-headline-lg
Checkatrade headline sample
--typography-headline-font-size-lg / --typography-leading-tightest / --typography-headline-font-weight-default .text-headline-md
Checkatrade headline sample
--typography-headline-font-size-md / --typography-leading-tight / --typography-headline-font-weight-default .text-headline-sm
Checkatrade headline sample
--typography-headline-font-size-sm / --typography-leading-tight / --typography-headline-font-weight-default Header
Haffer. Section and component headings.
.text-header-xl
Section header sample
--typography-header-font-size-xl / --typography-leading-tight / --typography-header-font-weight-default .text-header-lg
Section header sample
--typography-header-font-size-lg / --typography-leading-tight / --typography-header-font-weight-default .text-header-md
Section header sample
--typography-header-font-size-md / --typography-leading-tight / --typography-header-font-weight-default .text-header-sm
Section header sample
--typography-header-font-size-sm / --typography-leading-default / --typography-header-font-weight-default .text-header-xs
Section header sample
--typography-header-font-size-xs / --typography-leading-default / --typography-header-font-weight-default .text-header-xxs
Section header sample
--typography-header-font-size-xxs / --typography-leading-default / --typography-header-font-weight-default Body
Haffer. Running copy.
.text-body-xxl
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-xxl / --typography-leading-tight / --typography-body-font-weight-default .text-body-xl
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-xl / --typography-leading-default / --typography-body-font-weight-default .text-body-lg
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-lg / --typography-leading-default / --typography-body-font-weight-default .text-body-md
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-md / --typography-leading-default / --typography-body-font-weight-default .text-body-sm
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-sm / --typography-leading-default / --typography-body-font-weight-default .text-body-xs
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-xs / --typography-leading-loose / --typography-body-font-weight-default Body bold
Body scale at the bold weight.
.text-body-bold-xxl
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-xxl / --typography-leading-tight / --typography-body-font-weight-bold .text-body-bold-xl
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-xl / --typography-leading-default / --typography-body-font-weight-bold .text-body-bold-lg
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-lg / --typography-leading-default / --typography-body-font-weight-bold .text-body-bold-md
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-md / --typography-leading-default / --typography-body-font-weight-bold .text-body-bold-sm
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-sm / --typography-leading-default / --typography-body-font-weight-bold .text-body-bold-xs
The quick brown fox jumps over the lazy dog.
--typography-body-font-size-xs / --typography-leading-loose / --typography-body-font-weight-bold Label — action
Interactive labels outside buttons.
.text-label-action-lg
Label & control text
--typography-label-font-size-action-lg / --typography-leading-default / --typography-label-font-weight-control-md .text-label-action-md
Label & control text
--typography-label-font-size-action-md / --typography-leading-default / --typography-label-font-weight-control-md .text-label-action-sm
Label & control text
--typography-label-font-size-action-sm / --typography-leading-default / --typography-label-font-weight-control-md Label — button
Button labels, one per Button size.
.text-label-button-xl
Button label
--typography-label-font-size-button-xl / --typography-leading-tightest / --typography-label-font-weight-button-xl .text-label-button-lg
Button label
--typography-label-font-size-button-lg / --typography-leading-tightest / --typography-label-font-weight-button-lg .text-label-button-md
Button label
--typography-label-font-size-button-md / --typography-leading-tightest / --typography-label-font-weight-button-md .text-label-button-sm
Button label
--typography-label-font-size-button-sm / --typography-leading-tightest / --typography-label-font-weight-button-sm .text-label-button-xs
Button label
--typography-label-font-size-button-xs / --typography-leading-tightest / --typography-label-font-weight-button-xs .text-label-button-xxs
Button label
--typography-label-font-size-button-xxs / --typography-leading-tightest / --typography-label-font-weight-button-xxs Label — badge
Badge labels, one per Badge size.
.text-label-badge-lg
Badge label
--typography-label-font-size-badge-lg / --typography-leading-tightest / --typography-label-font-weight-badge-lg .text-label-badge-md
Badge label
--typography-label-font-size-badge-md / --typography-leading-tightest / --typography-label-font-weight-badge-md .text-label-badge-sm
Badge label
--typography-label-font-size-badge-sm / --typography-leading-tightest / --typography-label-font-weight-badge-sm Label — control
Checkbox, radio and switch labels.
.text-label-control-md
Control label
--typography-label-font-size-control-md / --typography-leading-default / --typography-label-font-weight-control-md Input
Field label, floating inline label, and entered value.
.text-input-label-xxl
Input text
--typography-input-font-size-label-xxl / --typography-leading-default / --typography-input-font-weight-label-default .text-input-label-xl
Input text
--typography-input-font-size-label-xl / --typography-leading-default / --typography-input-font-weight-label-default .text-input-label-lg
Input text
--typography-input-font-size-label-lg / --typography-leading-default / --typography-input-font-weight-label-default .text-input-label-md
Input text
--typography-input-font-size-label-md / --typography-leading-default / --typography-input-font-weight-label-default .text-input-label-sm
Input text
--typography-input-font-size-label-sm / --typography-leading-default / --typography-input-font-weight-label-default .text-input-inline-label-xxl
Input text
--typography-input-font-size-inline-label-xxl / --typography-leading-tightest / --typography-input-font-weight-inline-label-default .text-input-inline-label-xl
Input text
--typography-input-font-size-inline-label-xl / --typography-leading-tightest / --typography-input-font-weight-inline-label-default .text-input-inline-label-lg
Input text
--typography-input-font-size-inline-label-lg / --typography-leading-tightest / --typography-input-font-weight-inline-label-default .text-input-inline-label-md
Input text
--typography-input-font-size-inline-label-md / --typography-leading-tightest / --typography-input-font-weight-inline-label-default .text-input-inline-label-sm
Input text
--typography-input-font-size-inline-label-sm / --typography-leading-tightest / --typography-input-font-weight-inline-label-default .text-input-value-xxl
Input text
--typography-input-font-size-value-xxl / --typography-leading-tightest / --typography-input-font-weight-value-default .text-input-value-xl
Input text
--typography-input-font-size-value-xl / --typography-leading-tightest / --typography-input-font-weight-value-default .text-input-value-lg
Input text
--typography-input-font-size-value-lg / --typography-leading-tightest / --typography-input-font-weight-value-default .text-input-value-md
Input text
--typography-input-font-size-value-md / --typography-leading-tightest / --typography-input-font-weight-value-default .text-input-value-sm
Input text
--typography-input-font-size-value-sm / --typography-leading-tightest / --typography-input-font-weight-value-default Link
Inline and standalone link text.
.text-link-inline
Link text
--typography-body-font-size-md / --typography-leading-default / --typography-body-font-weight-default .text-link-standalone
Link text
--typography-body-font-size-md / --typography-leading-default / --typography-label-font-weight-control-md