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
Desktop
| Token | Font Size | Line Height | Letter Spacing |
|---|---|---|---|
2XL | 72px | 1.153 | -0.03em |
XL | 56px | 1.153 | -0.03em |
H1 | 48px | 1.222 | -0.03em |
H2 | 40px | 1.25 | -0.03em |
H3 | 32px | 1.28 | -0.02em |
H4 | 24px | 1.333 | -0.02em |
H5 | 20px | 1.35 | -0.02em |
Mobile
| Token | Font Size | Line Height | Letter Spacing |
|---|---|---|---|
2XL | 48px | 1.222 | -0.03em |
XL | 40px | 1.25 | -0.03em |
H1 | 32px | 1.28 | -0.03em |
H2 | 28px | 1.333 | -0.03em |
H3 | 24px | 1.333 | -0.02em |
H4 | 20px | 1.32 | -0.02em |
H5 | 18px | 1.35 | -0.02em |
Body text tokens
Desktop
| Token | Font Size | Line Height | Letter Spacing |
|---|---|---|---|
| XL | 24px | 1.5 | -0.02em |
| L | 20px | 1.5 | -0.02em |
| M | 16px | 1.5 | -0.02em |
| S | 14px | 1.5 | -0.02em |
| XS | 12px | 1.5 | -0.02em |
| META | 12px | 1.4 | -0.02em |
| CAPTION | 12px | 1.444 | -0.02em |
Mobile
| Token | Font Size | Line Height | Letter Spacing |
|---|---|---|---|
| XL | 20px | 1.5 | -0.02em |
| L | 18px | 1.5 | -0.02em |
| M | 16px | 1.5 | -0.02em |
| S | 14px | 1.5 | -0.02em |
| XS | 12px | 1.5 | -0.02em |
| META | 12px | 1.4 | -0.02em |
| CAPTION | 12px | 1.444 | -0.02em |
Quote tokens
Desktop
| Token | Font Size | Line Height | Letter Spacing |
|---|---|---|---|
| L | 24px | 1.25 | -0.03em |
| M | 20px | 1.333 | -0.03em |
| S | 18px | 1.35 | -0.03em |
| XS | 16px | 1.4 | -0.03em |
Mobile
| Token | Font Size | Line Height | Letter Spacing |
|---|---|---|---|
| L | 22px | 1.333 | -0.03em |
| M | 18px | 1.35 | -0.03em |
| S | 16px | 1.4 | -0.03em |
| XS | 15px | 1.4 | -0.03em |
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