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. Regular text is used for body text and headings.
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: 400 (regular)
Heading 1
Font size | Line height | |
---|---|---|
mobile | 4XL - 2.25rem - 36px | 4XL - 2.75rem - 44px |
desktop | 5XL - 2.625rem - 42px | 5XL - 3.25rem - 52px |
Heading 2
Font size | Line height | |
---|---|---|
mobile | 3XL - 2rem - 32px | 3XL - 2.5rem - 40px |
desktop | 4XL - 2.25rem - 36px | 4XL - 2.75rem - 44px |
Heading 3
Font size | Line height | |
---|---|---|
mobile | 2XL - 1.75rem - 28px | 2XL - 2rem - 32px |
desktop | 3XL - 2rem - 32px | 3XL - 2.5rem - 40px |
Heading 4
Font size | Line height | |
---|---|---|
mobile | XL - 1.5rem - 24px | XL - 1.75rem - 28px |
desktop | 2XL - 1.75rem - 28px | 2XL - 2rem - 32px |
Heading 5
Font size | Line height | |
---|---|---|
mobile & desktop | L - 1.25rem - 20px | L - 1.75rem - 28px |
Heading 6
Font size | Line height | |
---|---|---|
mobile & desktop | M - 1rem - 16px | M - 1.5rem - 24px |
Paragraphs
Font weight: 400 (regular)
Lead paragraph
Font size | Line height | |
---|---|---|
mobile & desktop | L - 1.25rem - 20px | L - 1.75rem - 28px |
Medium paragraph
Font size | Line height | |
---|---|---|
mobile & desktop | M - 1rem - 16px | M - 1.5rem - 24px |
Small paragraph
Font size | Line height | |
---|---|---|
mobile & desktop | S - 0.875rem - 14px | S - 1.125rem - 18px |
Extra Small paragraph
Font size | Line height | |
---|---|---|
mobile & desktop | XS - 0.75rem - 12px | XS - 1.125rem - 18px |