Skip to main content

Typography

Typography plays a key role in ensuring clarity, precision, and a consistent visual identity. Our updated system is built on two core typefaces—Elsevier Serif Tiempos and Elsevier Sans Serif—offering flexibility while maintaining strong brand coherence. Instead of the previous 9-step linear scale, the new type system introduces a revised set of heading and body text tokens, each calibrated for desktop and mobile to create a clearer hierarchy. These sizes are aligned with our design grid and spacing foundations to keep layouts consistent, scalable, and highly legible across all surfaces.

Typefaces and weights

Our typeface system is based on two fonts: Elsevier Serif Tiempos and Elsevier Sans Serif. These typefaces have many available weights, to achieve a unified and consistent brand expression. In general, typography is primarily left-aligned and we do not use bold and italics. By keeping the text structure simple and defining hierarchy with blank space and sizing, we ensure clarity and increase legibility.

Elsevier Serif Tiempos

This typeface is primarily used for H1 and H2 elements. An XL size is also available for use in heros and other banner components where appropriate.

Elsevier Sans Serif (Bold)

This typeface is used for emphasis and to create a strong visual hierarchy. It is primarily used for H3, H4 and H5 elements.

Elsevier Sans Serif (Regular)

This typeface is used for all other text elements, including body text and captions.

Heading tokens

TokenDesktop Font SizeMobile Font SizeLine Height

XL

72px40px1.111

H1

48px32px1.125

H2

32px26px1.125

H3

24px22px1.125

H4

20px20px1.222
H5
18px18px1.222

Body text tokens

TokenDesktop Font SizeMobile Font SizeLine Height
XL24px20px1.333
L20px18px1.4
M16px16px1.5
S14px14px1.444
XS12px12px1.5
CAPTION12px12px1.333

Do's and dont's

Case study

How AI discovered a new variety of cheese

Download PDF

Do

Consistent use of fonts, sizes and colors for headers, bodytext and links that follow function

Case study

How AI discovered a new variety of cheese

Download PDF

Don't

Random color - and font changes for links, titles and body text that confuses functionality

Case study

How AI discovered a new variety of cheese

Download PDF

Do

Light font on a dark background to ensure the text is easy to read

Case study

How AI discovered a new variety of cheese

Download PDF

Don't

Dark font on a dark background to ensure the text is easy to read