Typography

Note: all values expressed in pixels are in fact dynamically converted from rem values. The conversion depends on the settings of your browser.

Typeface

Inter is the standard typeface for the websites under the European Commission domain. The sans serif typeface family is versatile and offers an easy to read display.

font-family: Inter, Arial, sans-serif;

Modular type scale

A modular type scale is a set of type sizes that are proportionally multiplied by the ratio working its way up or down.

The purpose of using the modular type scale is to create a design that is visually pleasing, consistent, and balanced.

We set 1.125rem (0px) as the base font size for body text to ensure readability.

Weight

Font weight is the thickness of a font's stroke, with various weights used to differentiate content hierarchy. The bold style emphasises the importance in comparison with the regular font style in the font family. We use a scale from 100 to 900 depending on the context. Regular text is used for body text.

Line height

Line-height, relevant to the size of the typeface itself. Different set of font size / line height are used, based on the context (body text, headings, ...).

Line length

Line-length is the number of characters displayed in a single line. Lines that are too long or too short can distract readers. For readability, limit to no more than 80 characters including spaces for desktop. Line length for mobile is recommended to use 40 to 60 characters including space per line.

Headings

Display

	Font size	Line height	Font weight
mobile-xs	6XL - 2.5rem - 0px	3XL - 2.75rem - 0px	400 (regular)
mobile	7XL - 3.25rem - 0px	7XL - 3.75rem - 0px	400 (regular)
tablet	9XL - 4.5rem - 0px	9XL - 4.875rem - 0px	400 (regular)
desktop	10XL - 6rem - 0px	10XL - 6rem - 0px	400 (regular)

Heading 1

	Font size	Line height	Font weight
mobile-xs	4XL - 2rem - 0px	XL - 2.5rem - 0px	600 (semi-bold)
mobile	6XL - 2.5rem - 0px	3XL - 2.75rem - 0px	600 (semi-bold)
tablet	7XL - 3.25rem - 0px	6XL - 3.5rem - 0px	600 (semi-bold)
desktop	8XL - 3.75rem - 0px	7XL - 3.75rem - 0px	600 (semi-bold)

Heading 2

	Font size	Line height	Font weight
mobile-xs	2XL - 1.5rem - 0px	L - 2rem - 0px	600 (semi-bold)
mobile	3XL - 1.75rem - 0px	L - 2rem - 0px	600 (semi-bold)
tablet	5XL - 2.25rem - 0px	3XL - 2.75rem - 0px	600 (semi-bold)
desktop	6XL - 2.5rem - 0px	4XL - 3rem - 0px	600 (semi-bold)

Heading 3

	Font size	Line height	Font weight
mobile-xs	M - 1.125rem - 0px	M - 1.75rem - 0px	600 (semi-bold)
mobile	2XL - 1.5rem - 0px	L - 2rem - 0px	600 (semi-bold)
tablet	3XL - 1.75rem - 0px	XL - 2.25rem - 0px	600 (semi-bold)
desktop	3XL - 1.75rem - 0px	XL - 2.25rem - 0px	600 (semi-bold)

Heading 4

	Font size	Line height	Font weight
mobile-xs	M - 1.125rem - 0px	M - 1.75rem - 0px	500 (medium)
mobile	M - 1.125rem - 0px	M - 1.75rem - 0px	500 (medium)
tablet	2XL - 1.5rem - 0px	XL - 2.25rem - 0px	500 (medium)
desktop	2XL - 1.5rem - 0px	XL - 2.25rem - 0px	500 (medium)

Heading 5

	Font size	Line height	Font weight
mobile-xs	M - 1.125rem - 0px	S - 1.5rem - 0px	500 (medium)
mobile	M - 1.125rem - 0px	S - 1.5rem - 0px	500 (medium)
tablet	XL - 1.375rem - 0px	M - 1.75rem - 0px	500 (medium)
desktop	XL - 1.375rem - 0px	M - 1.75rem - 0px	500 (medium)

Heading 6

	Font size	Line height	Font weight
mobile-xs	M - 1.125rem - 0px	S - 1.5rem - 0px	650 (near-bold)
mobile	M - 1.125rem - 0px	S - 1.5rem - 0px	650 (near-bold)
tablet	L - 1.25rem - 0px	M - 1.75rem - 0px	650 (near-bold)
desktop	L - 1.25rem - 0px	M - 1.75rem - 0px	650 (near-bold)

Paragraphs

2XL paragraph

	Font size	Line height	Font weight
mobile-xs	L - 1.25rem - 0px	M - 1.75rem - 0px	400 (regular)
mobile	XL - 1.375rem - 0px	L - 2rem - 0px	400 (regular)
tablet	XL - 1.375rem - 0px	L - 2rem - 0px	400 (regular)
desktop	2XL - 1.5rem - 0px	XL - 2.25rem - 0px	400 (regular)

XL paragraph (lead)

	Font size	Line height	Font weight
mobile-xs	XL - 1.375rem - 0px	L - 2rem - 0px	400 (regular)
mobile	XL - 1.375rem - 0px	L - 2rem - 0px	400 (regular)
tablet	XL - 1.375rem - 0px	L - 2rem - 0px	400 (regular)
desktop	XL - 1.375rem - 0px	L - 2rem - 0px	400 (regular)

L paragraph

	Font size	Line height	Font weight
mobile-xs	L - 1.25rem - 0px	M - 1.75rem - 0px	400 (regular)
mobile	L - 1.25rem - 0px	M - 1.75rem - 0px	400 (regular)
tablet	L - 1.25rem - 0px	M - 1.75rem - 0px	400 (regular)
desktop	L - 1.25rem - 0px	M - 1.75rem - 0px	400 (regular)

M paragraph (default)

	Font size	Line height	Font weight
mobile-xs	S - 1rem - 0px	S - 1.5rem - 0px	400 (regular)
mobile	S - 1rem - 0px	S - 1.5rem - 0px	400 (regular)
tablet	M - 1.125rem - 0px	M - 1.75rem - 0px	400 (regular)
desktop	M - 1.125rem - 0px	M - 1.75rem - 0px	400 (regular)

S paragraph

	Font size	Line height	Font weight
mobile-xs	S - 1rem - 0px	S - 1.5rem - 0px	400 (regular)
mobile	S - 1rem - 0px	S - 1.5rem - 0px	400 (regular)
tablet	S - 1rem - 0px	S - 1.5rem - 0px	400 (regular)
desktop	S - 1rem - 0px	S - 1.5rem - 0px	400 (regular)

XS paragraph

	Font size	Line height	Font weight
mobile-xs	XS - 0.875rem - 0px	XS - 1.25rem - 0px	400 (regular)
mobile	XS - 0.875rem - 0px	XS - 1.25rem - 0px	400 (regular)
tablet	XS - 0.875rem - 0px	XS - 1.25rem - 0px	400 (regular)
desktop	XS - 0.875rem - 0px	XS - 1.25rem - 0px	400 (regular)

Microcopy

M microcopy

	Font size	Line height	Font weight
mobile & desktop	M - 1.125rem - 0px	S - 1.5rem - 0px	400 (regular)

S microcopy

	Font size	Line height	Font weight
mobile-xs	XS - 0.875rem - 0px	2XS - 1rem - 0px	400 (regular)
mobile	XS - 0.875rem - 0px	2XS - 1rem - 0px	400 (regular)
tablet	S - 1rem - 0px	XS - 1.25rem - 0px	400 (regular)
desktop	S - 1rem - 0px	XS - 1.25rem - 0px	400 (regular)

XS microcopy

	Font size	Line height	Font weight
mobile & desktop	XS - 0.875rem - 0px	2XS - 1rem - 0px	400 (regular)

2XS microcopy

	Font size	Line height	Font weight
mobile & desktop	2XS - 0.75rem - 0px	3XS - 0.875rem - 0px	400 (regular)