Typography overview
Font family
The Coloplast font is made available through Figma for full seat users. It’s a custom variable font especially developed to maintain a consistent brand presentation and enhanced performance in digital spaces.
Scaling
To streamline how headings and body text behave on different device sizes, the design system has font-sizes defined for 2 different device sizes: mobile and desktop.
💡 Mobile first = mobile sizes are default
Typography styles that stay the same on all screen sizes, will be defined only for mobile - e.g. labels are only found in the “mobile” folder.
Mobile
|
Name |
Font size |
Line height |
Ratio |
|---|---|---|---|
|
Heading 8 xl |
72px / 4.5rem |
100% |
1 |
|
Heading 7 xl |
64px / 4rem |
100% |
1 |
|
Heading 6 xl |
48px / 3rem |
115% |
1.16 |
|
Heading 5 xl |
40px / 2.5rem |
120% |
1.22 |
|
Heading 4 xl |
32px / 2rem |
125% |
1.25 |
|
Heading 3 xl |
24px / 1.5rem |
135% |
1.33 |
|
Heading 2 xl |
20px / 1.25rem |
120% |
1.2 |
|
Heading xl |
18px / 1.125rem |
135% |
1.33 |
|
Heading lg |
16px / 1rem |
125% |
1.25 |
|
Heading md |
14px / 0.875rem |
130% |
1.29 |
|
Body lg |
16px / 1rem |
150% |
1.5 |
|
Body md |
14px / 0.875rem |
140% |
1.7 |
|
Body sm |
12px / 0.75rem |
165% |
1.67 |
|
Body xs |
12px / 0.75rem |
165% |
1.67 |
Tablet
|
Name |
Font size |
Line height |
Ratio |
|---|---|---|---|
|
Heading 8 xl |
80px / 5rem |
100% |
1 |
|
Heading 7 xl |
72px / 4.5rem |
100% |
1 |
|
Heading 6 xl |
64px / 4rem |
100% |
1 |
|
Heading 5 xl |
48px / 3rem |
115% |
1.16 |
|
Heading 4 xl |
40px / 2.5rem |
120% |
1.2 |
|
Heading 3 xl |
32px / 2rem |
125% |
1.25 |
|
Heading 2 xl |
24px / 1.5rem |
135% |
1.33 |
|
Heading xl |
20px / 1.25rem |
120% |
1.2 |
|
Heading lg |
18px / 1.125rem |
135% |
1.33 |
|
Heading md |
16px / 1rem |
125% |
1.25 |
|
Body lg |
18px / 1.125rem |
155% |
1.56 |
|
Body md |
16px / 1rem |
150% |
1.5 |
|
Body sm |
14px / 0.875rem |
170% |
1.7 |
|
Body xs |
12px / 0.75rem |
165% |
1.67 |
Desktop
|
Name |
Font size |
Line height |
Ratio |
|---|---|---|---|
|
Heading 8 xl |
80px / 5rem |
100% |
1 |
|
Heading 7 xl |
72px / 4.5rem |
100% |
1 |
|
Heading 6 xl |
64px / 4rem |
100% |
1 |
|
Heading 5 xl |
48px / 3rem |
115% |
1.16 |
|
Heading 4 xl |
40px / 2.5rem |
120% |
1.2 |
|
Heading 3 xl |
32px / 2rem |
125% |
1.25 |
|
Heading 2 xl |
24px / 1.5rem |
135% |
1.33 |
|
Heading xl |
20px / 1.25rem |
120% |
1.2 |
|
Heading lg |
18px / 1.125rem |
135% |
1.33 |
|
Heading md |
16px / 1rem |
125% |
1.25 |
|
Body lg |
18px / 1.125rem |
155% |
1.56 |
|
Body md |
16px / 1rem |
150% |
1.5 |
|
Body sm |
14px / 0.875rem |
170% |
1.7 |
|
Body xs |
12px / 0.75rem |
165% |
1.67 |
Text component
The design system provides a “Text” component to makes it easier to choose between the different typography options:
- Screen size: Desktop | Mobile (auto)
- Type: Headings | Body
- Weight: Regular | Medium | Bold
- Underline: No | Yes
Headings
Body text
Labels
Labels are used for specifically for components such as buttons, form fields, navigation links etc. and are not meant to be used directly in designs. Labels have fixed font sizes and maintain them across breakpoints.
|
Name |
Font size |
Line height |
|---|---|---|
|
Label lg |
18px / 1.125rem |
28px / 1.75rem |
|
label md |
16px / 1rem |
24px / 1.5rem |
|
Label sm |
14px / 0.875rem |
20px / 1.25rem |
Accessibility
To ensure a minimum sort of rhythm all font sizes must be dividable by two and all line heights must be dividable by four. The line heights follow the rules of the WCAG 2.1 accessibility guidelines for text spacing:
- Headings have line heights in the range between 1.2-1.33 (120-133%)
- Paragraph text (body text) has a line height larger than 1.5
- Paragraph spacing for body text is set to 200%
- fg/default or fg/muted colours are the most commonly used and accessible text colours