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.

Units & breakpoints

Our units and breakpoints definition and how to use them

last modified: 16/11/2020 11:47:48

Our breakpoints

A breakpoint is the dimension at which a predetermined screen size range having a specific layout requirement switches to another range. At the given breakpoint, the layout adjusts to suit the screen size and orientation of the new range.

Width Breakpoint Range (px)
small 0 - 640
medium 641 - 1024
large 1025 - 1440
xlarge 1441 - 1920
xxlarge 1921 +

Eventhough modern screens resolutions go far beyond the 2560px width, the browsers of those devices are "artificially blocked" to 2560px max.

What Are rem Units?

In CSS, rem stands for “root em”. They won’t make you lose your religion nor believe in a man on the moon. What they can do is help you achieve a harmonious and balanced design.

Before going deeper into details, keep in mind that with modern browsers, REM units have excellent support. See

According to the W3C spec, the definition for one rem unit is: Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px).

As it is quite unusual for most of the people to count in hexadecimal, as a first step, we decided to fix the HTML element font-size to 10px. Therefore, we may say that 1rem=10px.

Lately, with the latest VW unit we added in our css, we decided to define the html element font-size in VW, making it relative to the device width. This latest change brought the advantage of having the exact same screen width between different devices. A sort of "zoom effect" when resizing a browser window. (this is true until 1200px of screen size. see below)

1200px specificity

Even though 1200px is not a breakpoint, at an equivalent to 1200px (120rem), fonts size switches back to a fixed size (no VW).

last modified: 17/03/2022 12:00:04

Here is the CSS code used for our font definition until 1200px+.

font-size: 2.66667vw => gives us 1rem=10px on 375px screens.

font-size: .97656vw => gives us 1rem=10px on 1024px screens.

font-size: .833333vw => gives us 1rem=10px on 1200px screens.

font-size: 62.5% => gives us 1rem=10px on 1200px+ screens.