Proximus design systemImportant information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.
Please don't forget to read Usage part of each element.
Text sizes
Text sizes has been built to provide hierarchy and consistency for all cases throughout Proximus digital experience.
last modified: 15/09/2023 15:40:11
Text sizes
Both mobile and desktop have their own factor in order to correspond to their specific needs.
rem
Assuming that 1rem = 10px
Line height is based on a ratio
Text line-height ratio: 1.5 Headings line-height ratio: 1.3
| Attribute | Mobile | Tablet | Desktop | |
|---|---|---|---|---|
| Caption and footnotes | Font size | Size 3 | ||
| Body text | Font size | Size 4 | ||
| Attribute | Mobile | Tablet | Desktop | |
|---|---|---|---|---|
Size 1 |
Not used anymore | |||
Size 2 |
Not used anymore | |||
Size 3 |
Font size | 1.2rem | 1.2rem | 1.4rem |
Size 4 |
Font size | 1.4rem | 1.4rem | 1.6rem |
Size 5 |
Font size | 1.6rem | 1.6rem | 1.8rem |
Size 6 |
Font size | 1.8rem | 1.8rem | 2rem |
Size 7 |
Font size | 2rem | 2.2rem | 2.4rem |
Size 8 |
Font size | 2.2rem | 2.4rem | 2.8rem |
Size 9 |
Font size | 2.6rem | 3.2rem | 3.6rem |
Size 10 |
Font size | 3rem | 3.6rem | 4.2rem |
Size 11 |
Font size | 3.2rem | 4rem | 4.6rem |
Size 12 |
Font size | 3.6rem | 4.4rem | 5.2rem |
Size 13 |
Font size | 4rem | 4.8rem | 5.6rem |
last modified: 15/09/2023 15:40:11
Define a size
It is possible to define a new text size by simply adding a rs-txt-s#
class to your text elements.
Normal paragraph
Paragraph with rs-txt-s10
All occurences
rs-txt-s3
rs-txt-s4
rs-txt-s5
rs-txt-s6
rs-txt-s7
rs-txt-s8
rs-txt-s9
rs-txt-s10
rs-txt-s11
rs-txt-s12
rs-txt-s13