Data Design Language

Typography

Our charts use a fixed set of font sizes, ranging from xxl (for headings) over m (for normal text) to s (for captions and axes labels).

How much these vary in size, depends on the dimensions of the chart itself: Small charts use less size variation, while large charts can employ larger differences.
Size xxl xl l m s
Large chart 22 20 18 16 14
Medium chart 22 20 18 16 14
Small chart 20 18 16 14 12

Fonts and styles

Google's Noto Sans is the primary typeface used. The Noto font collection presents highly readable and friendly typefaces for a wide variety of languages, is open source and free to use.

Font family 'Noto Sans', sans-serif
Regular weight 400
Semibold weight 600
Bold weight 700

Colors

There are only two levels of brightness distinction for texts — "base" and "weaker". For each category color in use, a dedicated text color in the same color tone and AAA background contrast is available.

light dark
text/base
#000000
Default text color for strong background contrast.
text/weaker
#595959
Text color with weaker background contrast.
category/text/0
#754d06
Used for text associated with data of category 0 (complies with AAA standards for large and small text).
category/text/1
#9a3709
Used for text associated with data of category 1 (complies with AAA standards for large and small text).
category/text/2
#8e2f8e
Used for text associated with data of category 2 (complies with AAA standards for large and small text).
category/text/3
#4b4baf
Used for text associated with data of category 3 (complies with AAA standards for large and small text).
category/text/4
#245993
Used for text associated with data of category 4 (complies with AAA standards for large and small text).
category/text/5
#1d6339
Used for text associated with data of category 5 (complies with AAA standards for large and small text).
category/text/99
#595959
Used for text associated with data of "other" category (complies with AAA standards for large and small text).

Sizes

The typograhic system features a concise vocabulary of font sizes, in three different variants: bigger size differences (54px to 14px) in large charts, and smaller ones on medium (38px to 14px) and small charts (28px to 12px).

Size Small Chart Medium Chart Large Chart
xxxl 28 38 54
xxl 20 22 22
xl 18 20 20
l 16 18 18
m 14 16 16
s 12 14 14

Spacing

Likewise, spacing variables vary with size as well. There are eight levels of spacing, coming in three different chart size variations.

Size Small Chart Medium Chart Large Chart
xxl 243030
xl 162020
l 121515
m 81010
s 688
xs 466
xxs 244

Internationalization

All text and chart annotations work with supported scripts and their conventions, including alignment for different reading directions and ordering of text elements.

Image showing texts in different languages

Time & number formatting

Time, number and currency formatting is according to the WHO styleguides. In particular, numbers are to be presented only to a warranted level of precision (significant figures). This information can be supplied as part of the chart configuration.

Image showing various numbers formatted according to WHO guidelines

In addition, formatting follows local language and cultural conventions:

For numbers the decimal sign, thousand separator (or ten thousand separator in Chinese), sequence and use of spaces between numbers and units (%, currencies, ...), rounding and the use of abbreviations are localized.

Time display is localized as well, in particular with respect to formatting of dates, time of day (24h vs am/pm, ...), month and weekday names and their respective abbreviations.

Typography in use

Example of typography variables in use for small sized charts Example of typography variables in use for large sized charts

Spacing in use

Example of spacing variables in use