Chart typography
Overview
There are various types of text used in charts, including titles, labels and annotations. Follow these guidelines to establish a visual hierarchy and present charts as clearly and consistently as possible.
There is more information about our typefaces in the brand guidelines, and about typography for digital services in the design system.
Default styling for all text
The font used in Office for National Statistics (ONS) charts is Open Sans. The font family should be specified as: “Open Sans”, Helvetica, Arial, sans-serif
We use stylistic set 1 because it includes the more accessible opentail lowercase "g", and serifed capital "I". For more information, see the Adobe article on OpenType features (opens in a new tab)
The default font colour (primarily for titles and source) is Black #222222. Ensure this is used, and not full black #000000.
The minimum font size for chart text elements is 14 pixels (px) for legibility. In small multiple charts, you can go down to 12px if necessary.
All text in charts should use sentence case and run horizontally. Find alternatives to using diagonal or vertical text, such as reducing the number of axis label increments.
Read more in our chart text guidance.
Code for text in charts
When making web charts in d3, you will need to import Open Sans, with the font weights:
- 400 (regular)
- 600 (semibold)
- 700 (bold)
In existing templates, this may need updating if semibold was not previously used
To import these styles, use the code:<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
Use OpenType stylistic set 1 by adding this in your CSS:font-feature-settings: "ss01" 1;
Titles and sources
We have created new title and source styles, with a view to these being incorporated into a future chart-building tool. These should only be used in standalone, bespoke charts or interactive tools where the titles are not added through the content management system (Florence).
The current source style should be used in publications that include any Chartbuilder charts, for consistency. The new styles are shown in the following example:
How to style and format titles and sources
| Text type | Weight | Size and line height (pixels) | Colour name | Colour values | Alignment |
|---|---|---|---|---|---|
| Title new (descriptive)1 | Bold (700) | 20px and 26px (1.3x font) | Black | #222222 34, 34, 34 | Left |
| Sub-title new (statistical)1 | Semibold (600) | 16px and 20.8px (1.3x font) | Black | #222222 | Left |
| Source new2 | Regular (400) | 16px and 19.2px (1.2x font) | Grey 75 | #707071 112, 112, 113 | Left |
| Source current2 | Bold (700) | 16px and 19.2px (1.2x font) | Black | #222222 | Left |
Notes
- In most cases, titles are added in the content management system (Florence). These styles are slightly different to Florence titles and should only be used in standalone, bespoke charts or interactive tools.
- The current source style should be used in any releases that also contain Chartbuilder charts, for consistency. The new source style can be used in standalone products where there are no Chartbuilder charts, including census releases.
Axis labels
We use the same text style for numerical y-axis and x-axis labels and titles, as shown in the following line chart example:
We have a slightly more emphasised text style for category labels and titles, as shown in the following horizontal bar chart example:
How to style and format axis labels
| Text type | Weight | Size and line height (pixels) | Colour name | Colour values | Alignment |
|---|---|---|---|---|---|
| Axis titles | Regular (400) | 14px and 16.8px (1.2x font) | Grey 75 | #707071 112, 112, 113 | Left (y-axis) |
| x-axis labels (numeric) | Regular (400) | 14px and 16.8px (1.2x font) | Grey 75 | #707071 112, 112, 113 | Centre |
| y-axis labels (numeric) | Regular (400) | 14px and 16.8px (1.2x font) | Grey 75 | #707071 | Right |
| y-axis labels (categorical) | Regular (400) | 14px and 16.8px (1.2x font) | Grey 100 | #414042 65, 64, 66 | Right |
| Category group title | Bold (700) | 14px and 16.8px (1.2x font) | Grey 100 | #414042 | Left |
| Split bar chart labels | Semibold (600) | 14px and 16.8px (1.2x font) | Grey 100 | #414042 65, 64, 66 | Left |
Additional text
Other chart text includes annotations, legends and direct labelling. The following example shows how annotations and direct category labels on a line chart should be styled:
Legend text and direct data labels should be styled as shown on the following bar chart example:
How to style and format additional chart text
| Text type | Weight | Size and line height (pixels) | Colour name | Colour values | Alignment |
|---|---|---|---|---|---|
| Legend | Regular (400) | 14px and 16.8px (1.2x font) | Grey 100 | #414042 | Left |
| Annotations | Regular (400) | 14px and 16.8px (1.2x font) | Grey 100 | #414042 65, 64, 66 | Default left |
| Direct labels – line chart (category) | Semibold (600) | 14px and 16.8px (1.2x font) | Data colour | Data colour | Left |
| Direct labels – bar chart (number) | Semibold (600) | 14px and 16.8px (1.2x font) | Grey 100 or White1 | #414042 65, 64, 66 or #FFFFFF1 | Right |
Notes
- Use Grey 100 on light background colours and White on dark background colours.
More detailed guidance is also available on how to style and format chart elements.
For more information on the main principles to follow when creating a chart or visualisation, and for specific guidance on chart text, annotations and ordering, view our data visualisation guidance pages.
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)