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
XL size is also available for use in heros and other banner components where appropriate.Elsevier Sans Serif (Bold)
Elsevier Sans Serif (Regular)
Heading tokens
| Token | Desktop Font Size | Mobile Font Size | Line Height |
|---|---|---|---|
XL | 72px | 40px | 1.111 |
H1 | 48px | 32px | 1.125 |
H2 | 32px | 26px | 1.125 |
H3 | 24px | 22px | 1.125 |
H4 | 20px | 20px | 1.222 |
H5 | 18px | 18px | 1.222 |
Body text tokens
| Token | Desktop Font Size | Mobile Font Size | Line Height |
|---|---|---|---|
| XL | 24px | 20px | 1.333 |
| L | 20px | 18px | 1.4 |
| M | 16px | 16px | 1.5 |
| S | 14px | 14px | 1.444 |
| XS | 12px | 12px | 1.5 |
| CAPTION | 12px | 12px | 1.333 |
Do's and dont's
Do
Consistent use of fonts, sizes and colors for headers, bodytext and links that follow function
Don't
Random color - and font changes for links, titles and body text that confuses functionality
Do
Light font on a dark background to ensure the text is easy to read
Don't
Dark font on a dark background to ensure the text is easy to read