Proximus design system
Important 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.

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