Type sets
Type sets are predefined collections of font sizes, weights, and styles used across headers, body text, labels, buttons, and other UI elements. They ensure consistency, improve readability, and help establish clear visual hierarchies throughout the product.
Display
Display-sized heading text is used sparingly for standout moments, like page titles or hero content, where maximum impact is needed.
Display lg
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-10 |
56px / 3.5rem |
Medium – 500 |
64px / 4rem |
0px
|
Display md
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-09 |
44px / 2.75rem |
Medium – 500 |
52px / 3.25rem |
0px |
Display sm
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-08 |
36px / 2.25rem |
Medium – 500 |
44px / 2.75rem |
0px |
Headline
Headline text is used for key section headings, helping to structure and organise content clearly.
Headline lg
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-07 |
32px / 2rem |
Semibold – 600 |
40px / 2.5rem |
0px |
Headline md
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-06 |
28px / 1.75rem |
Semibold – 600 |
36px / 2.25rem |
0px |
Headline sm
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-05 |
24px / 1.5rem |
Semibold – 600 |
32px / 2rem |
0px |
Title
Title text is ideal for card headings or highlighting smaller, self-contained sections of content.
Title md
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-04 |
20px / 1.25rem |
Medium – 500 |
28px / 1.75rem |
0px |
Title sm
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-03 |
16px / 1rem |
Medium – 500 |
24px / 1.5rem |
0 |
Body
Body text is used for longer passages of content and general copy. It prioritises readability and supports the overall content structure.
Body md
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-03 |
16px / 1rem |
Light – 300 |
24px / 1.5rem |
0 |
Body sm
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-02 |
14px / 0.875rem |
Light – 300 |
20px / 1.25rem |
0 |
Body xs
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-01 |
12px / 0.75rem |
Light – 300 |
16px / 1rem |
0 |
Label
Label text is used for form fields and interface labels.
Label lg
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-04 |
20px / 1.25rem |
Regular – 400 |
28px / 1.75rem |
0 |
Label md
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-03 |
16px / 1rem |
Regular – 400 |
24px / 1.5rem |
0 |
Label sm
|
Type scale |
Size |
Weight |
Line height |
Letter spacing |
|
typescale-02 |
14px / 0.875rem |
Regular – 400 |
20px / 1.25rem |
0 |