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

Arial is the standard typeface for the websites under the European Commission domain. The san serif typeface family is versatile and universal.

font-family: 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 16px (1rem) as the base font size for body text to ensure readability. It is the default font size for most browsers.

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 400 for regular and 700 for bold. Usually the bold style is assigned to headings. Regular text is used for body text.

Line height

Line-height, relevant to the size of the typeface itself. Ideal line-height for standard copy uses 1:1.5 ratio. The exception to this rule are headings, which needs less spacing and therefore have a line-height ratio of 1:1.2. The line-height value is always divisible by 4 in order to support the grid.

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

Font weight: 700 (bold)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

Font weight: 400 (regular)

Lead paragraph

Medium paragraph

Small paragraph

Extra Small paragraph