Typography
Typography plays a key role in ensuring clarity, precision, and a consistent visual identity. Our updated type system uses a revised set of heading and body text tokens, each calibrated for desktop and mobile to create a clear 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 three font families: Elsevier Serif, Elsevier Sans Medium, and Elsevier Sans. These typefaces have many available weights, to achieve a unified and consistent brand expression. In general, typography is primarily left-aligned. By keeping the text structure simple and defining hierarchy with blank space and sizing, we ensure clarity and increase legibility.
Elsevier Serif
Tiempos Text
XL size is also available for use in heros and other banner components where appropriate.Elsevier Sans Medium
National 2 Medium
Elsevier Sans
National 2
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