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.

Headings

Headings are from a range of 1 through 6. Headings are the largest text on the screen, reserved for short, important text or numerals.

last modified: 19/08/2022 10:20:10

Overview

Headings help users and search engines to read and understand text. Headings also define which parts of your content are important, and show how they're interconnected

Why empty heading tags are bad for accessibility?

If you have an empty heading, a screen reader will alert the user that a heading is present, but it will not read out any text because there is none available to read. This may confuse users and could keep them from accessing the information on the page. If a user is navigating the contents of the page and they encounter an empty heading, they may move forward to the next heading in the list and could potentially miss entire sections of content.


Headings by Business Unit

The weights of the headings are used to identify a Business Unit's visual language.
This is one of the ways to create different visual languages between Residential, Business, and Enterprise.

Residential headings

Aa

Proximus ExtraBold

abcdefghijklmnopqrstuw
ABCDEFGHIJKLMNOPQR
0123456789!"·$%&/()=

Business headings

Aa

Proximus Regular

abcdefghijklmnopqrstuw
ABCDEFGHIJKLMNOPQR
0123456789!"·$%&/()=

Enterprise headings

Aa

Proximus Light

abcdefghijklmnopqrstuw
ABCDEFGHIJKLMNOPQR
0123456789!"·$%&/()=

Headings differentiation

Headings are from a range of 1 through 6 and this differentiation is applied on headlings from H1 to H3.

Residential headings

H1

H2

Business headings

H1

H2

Enterprise headings

H1

H2

Others headings, from 4 to 6, are all in the same font weight.

Residential, Business & Enterprise headings

H3

H4

H5
H6

Headings and subtitles

Subtitles are complementary to headings. They are typically reserved to give more context to a heading, they are only available underneath headings H1 and H2.

A differenciation on the subtitle font family is also foreseen to have a good balance with the heading.

Residential headings

H1

Subtitle

Business headings

H1

Subtitle

Enterprise headings

H1

Subtitle


Colors

The color are the same for all the headings and subtitles depending of the mode:

Positive mode

On a light theme, headings are purple

H1

H2

H3

H4

H5
H6

When there are too much purple headings on the same area and only for headings from H4 to H6, it's allowed to display them in black on a light theme.

H1

H2

H3

H4

H5
H6
Negative mode

On a dark theme, headings are white

H1

H2

H3

H4

H5
H6
Examples with headings and subtitles by Business Unit

Residential headings

H1

Subtitle

H1

Subtitle

Business headings

H1

Subtitle

H1

Subtitle

Enterprise headings

H1

Subtitle

H1

Subtitle


Best practices


Heading 1

Subtitle

Lorem ipsum color sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Do


Heading 1

Subtitle

Lorem ipsum color sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dont


Heading 1

Subtitle

Lorem ipsum color sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Do


Heading 1

Subtitle

Lorem ipsum color sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dont


Alignment

As for the body text, headings are also left-aligned on all breakpoints.

Heading 1

Subtitle

Lorem ipsum color sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Theming

Epic

Epic interfaces follow the rules of the Residential segment. However, the font light family is not allowed in this environment, so the subtitle is specifically Proximus Regular.

H1

Subtitle

Epic documentation

last modified: 19/05/2021 16:00:03
Info box

Please refer to the font sizes and colors default values.

Font sizes and font weight

Our scale has been built to provide hierarchy and consistency for all cases throughout Proximus digital experience. Both mobile and desktop have their own factor in order to correspond to their specific needs.

Line height is based on a ratio

Headings line-height ratio: 1.3

From H1 to H2: headings are differents by Business Unit

Residential headings (RES)
Font attribute Mobile Tablet Desktop
H1 Weight
Size
Extra Bold
Size 10
H2 Weight
Size
Extra Bold
Size 9
Subtitle Weight
Size
Light
Size 7
Business headings (SE)
Font attribute Mobile Tablet Desktop
H1 Weight
Size
Regular
Size 10
H2 Weight
Size
Regular
Size 9
Subtitle Weight
Size
Regular
Size 6
Enterprise headings (EBU)
Font attribute Mobile Tablet Desktop
H1 Weight
Size
Light
Size 10
H2 Weight
Size
Light
Size 9
Subtitle Weight
Size
Bold
Size 6

From H3 to H6: headings are the same by Business Unit

Residential (RES), business (SE) and enterprise (EBU) headings
Font attribute Mobile Tablet Desktop
H3 Weight
Size
Bold
Size 8
H4 Weight
Size
Bold
Size 7
H5 Weight
Size
Bold
Size 6
H6 Weight
Size
Bold
Size 5

Bottom spacing

rem

Assuming that 1rem = 10px

Mobile Tablet Desktop
H1, H2, H3, H4
with a subtitle*
1.5rem
1rem
2rem
1.5rem
2.5rem
1.5rem
Subtitle 1.5rem 2rem 2.5rem
H5, H6 1rem

*A heading can be following directly by a subtitle, then the bottom spacing of the heading is reduced.


Colors

Positive mode

Colors
Headings H1 to H3 Purple
Headings H4 to H6 Purple or Body text color
Subtitle Purple

Negative mode

Colors
Headings H1 to H6 White
Subtitle White

Theming

Epic

Font sizes and font weight
Font attribute Mobile Tablet Desktop
H1 Weight
Size
Bold
Size 10
H2 Weight
Size
Bold
Size 9
Subtitle Weight
Size
Bold
Size 6
Colors
Colors
Headings H1 to H6 White
Subtitle White
last modified: 12/07/2022 18:05:04

Heading by Business Unit

The weights of the headings are used to identify a Business Unit's visual language.
This is one of the ways to create different visual languages between Residential, Business, and Enterprise.

Font family change forbidden

It is forbidden to change the font family as they are set per Business units with body classes: rs-se , rs-ebu , rs-epic .

Accessibility

Don't forget to respect title's semantic. <h*> tag are not used for their size but to organize content of a page. See more details New window. If you need a specific size, use classes.

Residential : RES

H1 - Lorem ipsum dolor

H2 - Lorem ipsum dolor

Subtitle - Lorem ipsum dolor

H3 - Lorem ipsum dolor

H4 - Lorem ipsum dolor

H5 - Lorem ipsum dolor
H6 - Lorem ipsum dolor

SE

To switch the style corresponding to the SE business unit, put the class rs-se to the parent.

Best practice

The ideal case is to impacting the whole page with the addition on the body to impact the whole page.

H1 - Lorem ipsum dolor

H2 - Lorem ipsum dolor

Subtitle - Lorem ipsum dolor

H3 - Lorem ipsum dolor

H4 - Lorem ipsum dolor

H5 - Lorem ipsum dolor
H6 - Lorem ipsum dolor

EBU

To switch the style corresponding to the EBU business unit, put the class rs-ebu to the parent.

H1 - Lorem ipsum dolor

H2 - Lorem ipsum dolor

Subtitle - Lorem ipsum dolor

H3 - Lorem ipsum dolor

H4 - Lorem ipsum dolor

H5 - Lorem ipsum dolor
H6 - Lorem ipsum dolor

Negative headings

It is possible to change the color of the text to white by using the rs-txt-c2 class.

h1 or rs-tit1

h2 or rs-tit2

h3 or rs-tit3

h4 or rs-tit4

h5 or rs-tit5
h6 or rs-tit6

Change visually heading size

Title classes are designed with the following name: rs-tit* . * is a number from 1 to 6.

H2 like H6 with rs-tit6

H3 like H2 with rs-tit2

H6 like H1 with rs-tit3

Heading with subtitle

The spacing between titles and subtitles has been studied graphically and therefore a class must be used to notify them as title and subtitle. Simply add to the title the class rs-has-subtit and to the subtitle the class rs-subtit .

Title class="rs-has-subtit" directly followed by another title

class="rs-subtit" = Secondary title preceeded by another title


Theming

Epic

To switch the style corresponding to Epic, put the class rs-epic to the parent.

H1 - Lorem ipsum dolor

H2 - Lorem ipsum dolor

Subtitle - Lorem ipsum dolor

H3 - Lorem ipsum dolor

H4 - Lorem ipsum dolor

H5 - Lorem ipsum dolor
H6 - Lorem ipsum dolor