Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Typography

This is your single source of truth about how to use typography anywhere in the NS world. We’ve done the hard work for you so you can get on with the fun bit of making it look great and easy to read!

Typeface NS Sans

NS has its own typeface ‘NS Sans’ which must be used on everything that we do on the web. There are two weights we use ’NS Sans Regular’ and ’NS Sans Bold’.

NS Sans Regular

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

NS Sans Bold

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Type sizes

We’ve developed our type sizes to be suitable for average screen densities and reading comfort under typical conditions. We size our type across the following two breakpoint groups to suit a range of devices and input methods:

  1. Desktop, tablet (screensizes 640 pixels and above)
  2. Mobile (screensizes 0-639 pixels)

The sizes shown below correspond to size and line-height (size/line-height) and are in pixels, based on a baseline of 72 pixels per inch (ppi). We recommend you set font sizes using relative units to allow for the changing nature of the user’s browser. This creates uniformity across different screen sizes and capabilities.

Heading XXL
Desktop, tablet (fontsize / line-height) 48px / 60px
Mobile (fontsize / line-height) 36px / 45px
Heading XL
Desktop, tablet (fontsize / line-height) 38px / 45px
Mobile (fontsize / line-height) 32px / 40px
Heading L
Desktop, tablet (fontsize / line-height) 30px / 40px
Mobile (fontsize / line-height) 28px / 35px
Heading M
Desktop, tablet (fontsize / line-height) 24px / 30px
Mobile (fontsize / line-height) 20px / 25px
Heading S
Desktop, tablet (fontsize / line-height) 20px / 25px
Mobile (fontsize / line-height) 18px / 25px
Heading XS
Desktop, tablet (fontsize / line-height) 18px / 25px
Mobile (fontsize / line-height) 16px / 25px
Default text
Desktop, tablet (fontsize / line-height) 16px / 25px
Mobile (fontsize / line-height) 16px / 25px
Small text
Desktop, tablet (fontsize / line-height) 14px / 20px
Mobile (fontsize / line-height) 14px / 20px

Explore the code: more information about these styles in Objects/Headings.

Font resources

If you are an external partner working for NS, you need permission to download the fonts. Please contact Visualogik: hvl@visualogik.com, 076 – 711 53 36. A fee will have to be paid for using the fonts.