Typography Chart furniture Chart types Colour
<aside> ❗
This page has been superseded by the Chart Typography page on the ONS Service Manual. The rest of this Notion site will also be transfer to the Service Manual in due course.
</aside>
Font family for everything is Open Sans, with sans-serif alternates: "Open Sans, Helvetica, Arial, sans-serif".
For d3 you will need to import Open Sans, with the font weights:
In existing templates, this may need updating if semi-bold was not previously used
<link href='<https://fonts.googleapis.com/css?family=Open+Sans:400,600,700>'
rel='stylesheet' type='text/css'>
Default font colour (primarily for titles and source) is #222222
Default font size for chart text elements is 14px. This should be the minimum font size for most charts. In small multiples you can go down to 12px if absolutely necessary
Always use sentence case.
All text in charts should be horizonal
Use Opentype stylistic set 1 for the more accessible lowercase g and uppercase i. See example showing stylistic alternates and information from Adobe on OpenType features.
Use this in your cssfont-feature-settings: "salt" 1;
Open Sans stylistic set 1 has alternative glyphs for lowercase g and uppercase i
| Weight | Weight value | Size/line height px | ONS colour name | Hex colour | RGB colour | Alignment | |
|---|---|---|---|---|---|---|---|
| Figure title* | Semi bold | 600 | 18/23.4 (1.3) | Grey 75 | #707071 | 112, 112, 113 | Left |
| Title | Bold | 700 | 22/28.6 (1.3) | Black | #222222 | 34, 34, 34 | Left |
| Sub-title | Semi bold | 600 | 18/23.4 (1.3) | Black | #222222 | 34, 34, 34 | Left |
| Source new** | Regular | 400 | 16/19.2 (1.2) | Grey 75 | #707071 | 112, 112, 113 | Left |
| Source current** | Bold | 600 | 16/19.2 (1.2) | Black | #222222 | 34, 34, 34 | Left |
| x axis labels (numeric) | Regular | 400 | 14/16.8 (1.2) | Grey 75 | #707071 | 112, 112, 113 | Center |
| y axis labels (numeric) | Regular | 400 | 14/16.8 (1.2) | Grey 75 | #707071 | 112, 112, 113 | Right |
| y axis (categorical) | Regular | 400 | 14/16.8 (1.2) | Grey 100 | #414042 | 65, 64, 66 | Right |
| y axis category group title | Bold | 700 | 14/16.8 (1.2) | Grey 100 | #414042 | 65, 64, 66 | Left |
| Top labels in split bar chart | Semi bold | 600 | 14/16.8 (1.2) | Grey 100 | #414042 | 65, 64, 66 | Left |
| Axis titles | Regular | 400 | 14/16.8 (1.2) | Grey 75 | #707071 | 112, 112, 113 | Left |
| Annotations | Regular | 400 | 14/16.8 (1.2) | Grey 100 | #414042 | 65, 64, 66 | Default left |
| Annotation call out number text | Semi bold | 600 | 14/16.8 (1.2) | Grey 100 | #414042 | 65, 64, 66 | Center |
| Direct labels on line charts (categories) | Semi bold | 600 | 14/16.8 (1.2) | - | Data colour | 112, 112, 113 | Left |
| Direct labels on bar charts (data) | Semi bold | 600 | 14/16.8 (1.2) | Grey 100 or white*** | #414042 or #FFFFFF*** | 65, 64, 66 | Right |
| Legend | Regular | 400 | 14/16.8 (1.2) | Grey 100 | #414042 | 65, 64, 66 | Left |
| Tooltips | Follows default hierarchy | Follows default hierarchy | Grey 100 | #414042 | 65, 64, 66 | Left | |
** For now, the current source style should be used in most releases to be consistent with Chartbuilder charts. The new source style can be used in stand-alone products where there are no Chartbuilder charts, this will include many census releases.
*** Depending on background colour