Guidelines

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 Europa.eu domain. The sans 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.

Type Scale

Font Size x Type Scale Ratio = Next Font Size

Line Height

Font Size x Line Height Ratio = Line Height

Paragraph

Line Height x Paragraph Ratio = Paragraph Spacing

Line-height rounding

Multiple of four

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 600 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 per line. Line length for mobile is recommended to use 40 to 60 characters including space per line.

Headings

Font weight: 600 (bold)

Heading 1

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
mobile5XL - 2.25rem - 36px5XL - 2.75rem - 44px
desktop6XL - 2.625rem - 42px6XL - 3.25rem - 52px

Heading 2

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
mobile4XL - 2rem - 32px4XL - 2.5rem - 40px
desktop5XL - 2.25rem - 36px5XL - 2.75rem - 44px

Heading 3

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
mobile3XL - 1.75rem - 28px3XL - 2rem - 32px
desktop4XL - 2rem - 32px4XL - 2.5rem - 40px

Heading 4

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
mobile2XL - 1.5rem - 24px2XL - 1.75rem - 28px
desktop3XL - 1.75rem - 28px3XL - 2rem - 32px

Heading 5

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
mobileXL - 1.25rem - 20pxXL - 1.5rem - 24px
desktop2XL - 1.5rem - 24px2XL - 1.75rem - 28px

Heading 6

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
mobileL - 1.125rem - 18pxL Prolonged - 1.75rem - 28px
desktopXL - 1.25rem - 20pxXL Prolonged- 1.75rem - 28px

Paragraphs

Font weight: 400 (regular)

Lead paragraph

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font sizeLine height
mobileL - 1.125rem - 18pxL Prolonged - 1.75rem - 28px
desktopXL - 1.25rem - 20pxXL Prolonged - 1.75rem - 28px

Medium paragraph

The quick brown fox jumps over the lazy dog
Font sizeLine height
mobile & desktopM - 1rem - 16pxM Prolonged - 1.5rem - 24px

Small paragraph

The quick brown fox jumps over the lazy dog
Font sizeLine height
mobile & desktopS - 0.875rem - 14pxS Prolonged - 1.25rem - 20px

Extra Small paragraph

The quick brown fox jumps over the lazy dog
Font sizeLine height
mobile & desktopXS - 0.75rem - 12pxXS Prolonged - 1.25rem - 20px