Typography
Typography is fundamental to the precise, legible display of information. Elsevier’s typographic system is designed to be distinctive, flexible and legible. In the Design system, we have further refined Elsevier’s typography by creating a highly flexible, scalable type system. Reduced to only 9 typesizes across two fonts, it follows a linear typescale and is based on values of 4 and 8 to fit with our grid and 4px spacing system.
Typefaces and weights
Our type system is based on the ‘Elsevier Sans’ font face developed specifically for Elsevier by the design team. This is a sans serif typeface with 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 Sans (light)
Typesizes web
Elsevier Display Light
Name | Desktop line height / size | Mobile line height / size | Letter spacing |
|---|---|---|---|
| H1 | 1 / 56px | 1 / 36px | -0.02em |
| H2 | 1 / 48px | 1 / 32px | -0.02em |
| H3 | 1.1 / 40px | 1.1 / 28px | -0.02em |
| H4 | 1.1 / 32px | 1.1 / 24px | -0.02em |
| H5 | 1.1 / 24px | 1.1 / 20px | -0.02em |
Nexus Sans Pro Regular | |||
| Body lg | 1.3 / 24px | 1.3 / 20px | 0.01em |
| Body md | 1.3 / 20px | 1.3 / 16px | 0.01em |
| Body sm | 1.3 / 16px | 1.3 / 12px | 0.01em |
| Body xs | 1.3 / 12px | 1.3 / 12px | 0.01em |
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