Webmail

Typescales

This is the basic part of the typescale. If you want the entire typescale, have a look at our Typography section in the design system.

Desktop

Mobile

Left align as much as possible

This adds to accessibility and readability

Example paragraph

This is commonly used in the expressive type theme layouts for long paragraphs with more than four lines. The looser line height and larger size makes for comfortable, long-form reading, in mediums that allow for more space. This size type is rarely used for body copy in components. Always left-align type; never center it.

Copy

Headline size

Be very careful when using large headers on mobile. Often the use of a large size for headings in mobile apps results in the fact that a headline is stretched to 3–4 lines while contains 1 or 2 words per line. Such headers look messy and are hard to read.

 

  • keep headlines a short as possible
  • meaningful headlines are a must
  • mobile first thinking
  • remove any overhead on copy

Avoid all caps

Except for Telenet product names like KLIK. These are considered logos, so they don't follow the typography guidelines.

Recommendations

  • Choose a headline size both contrasting with the body text and fitting on average 2–3 lines
  • Try to stick to 1 sentence
  • Same copy on desktop, tablet and mobile breakpoint
  • No punctuation in titles unless the title consists of multiple short sentences.

Line length

Line width is measured in Characters Per Line or CPL. This is the amount of characters including spaces that is optimal on a line of text including paragraphs and single line text. Aim for 50–70 characters per line.

On the current Telenet grid, the ideal line length for body copy would be 6 columns.

Do!

Line width is measured in Characters Per Line or CPL. This is the amount of characters including spaces that is optimal on a line of text including paragraphs and single line text. Aim for 50–70 characters per line.

Don't!

Line width is measured in Characters Per Line or CPL. This is the amount of characters including spaces that is optimal on a line of text including paragraphs and single line text. Aim for 50–70 characters per line.

Sources about line length
https://www.rocketspark.com/blog/post/225/How-important-is-line-length-for-great-web-design/ https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/ https://baymard.com/blog/line-length-readability https://uxdesign.cc/typography-basics-breakdown-603013198c3c

Colours

Which colour combinations are possible? Paying attention to the WCAG standards is essential here. 

Dark brown is our default text color in light UI

Dark brown can be used on all colours

Dark brown goes with any colour.

Secondary colours on white and lemon

Secondary colours work well on white or lemon when it comes to highlights in headlines (H1, H2 and H3 on the website).

Lemon on secondary colours

Lemon works well on secondary colours when it comes to highlights in headlines (H1, H2 and H3 on the website).

Yellow can never be used as a text colour

Yellow text never meets WCAG standards.

Color contrast and accessibility tools used at Telenet
Stark Figma plugin Wave Web Accessibility tool Siteimprove accessibility checker A11y WCAG compliance checklist

Sans Serif meets Serif

We're are working hard to make this possible. Coming soon!

To create a unique appearance, we combine Serif and Sans Serif. 
  • Choose wisely
  • Only possible with H1

Do!

Use serif headings in hero banners, on campaign pages, product pages, ...

Don't!

Serif titles don't have added value on text-heavy pages like article pages, help pages, ... or interaction heavy pages like MyTelenet.

Highlights

Details about the usage of highlights can be found at the highlights page.