Typography & Text
Typography & Text section describes recommendations for fonts, font sizes, and text colors. Specifically, it lays out suggestions for the text in visualizations and a detailed description about how to format numbers. Text is scaled relative to the screen size in order to support a great experience across devices. Text colors are chosen to achieve sufficient background contrast for light and dark text as well as for text in category colors.
Download typography variables
CSS
Jump to: Styles | Font Sizes | Spacing | Number Formatting | Date Formatting | Text Colors
Styles
The Open Sans font is common across World Bank publications and is therefore suggested for chart design. It is a versatile font that offers a variety of weights and styles. This section outlines the weights and styles used in chart elements such as tooltips, axis labels, legend labels, chart titles, and descriptive paragraphs.
Font Family
Open Sans, sans-serif
Open Sans
Font Weights
Font weight 400
Regular
Font weight 600
SemiBold
Font weight 700
Bold
Line Heights
Line height 150%
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Line height 120%
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Styles
Italic
Italic
Uppercase
uppercase
Font Sizes
The font sizing follows a variable approach that is adapted to different chart sizes. Three chart sizes have been defined based on most common screen resolutions. The scaling factor is adjusted based on the size of the chart. This allows more compact as well as more spacious data displays.
Font Sizes
For each chart size, the three font size variables small (s), medium (m) and large (l) are defined. These different sizes are used consistently for the same chart elements across chart sizes. This allows to have a simple definition of font sizes for each chart element, while still allowing for responsive scaling across chart sizes and display sizes.
| small chart | medium chart | large chart | |
|---|---|---|---|
| size | width < 400px | width 400px - 700px | width > 700px |
| s | 12px | 13px | 14px |
| m | 14px | 15px | 16px |
| l | 16px | 18px | 20px |
Spacing
The spacing of elements also follows a variable approach that is adapted to different chart sizes. The spacing variables are adjusted based on the size of the chart. This allows more compact data displays on smaller screens or when showing thumbnail versions of charts on desktops.
Spacing
For each chart size, a scale of space variables is defined. These different sizes are used consistently for each chart elements across chart sizes. This allows to have a simple definition of font sizes for each chart element, while still allowing for responsive scaling across chart sizes and display sizes.
| small chart | medium chart | large chart | |
|---|---|---|---|
| size | width < 400px | width 400px - 700px | width > 700px |
| xxs | 2px | 3px | 4px |
| xs | 4px | 6px | 8px |
| s | 6px | 9px | 12px |
| m | 12px | 15px | 16px |
| l | 14px | 18px | 20px |
| xl | 16px | 21px | 24px |
Number Formatting
While formatting guidelines for numbers in bodies of text can be found in the World Bank Editorial Style Guide in chapter 9, number fomatting in charts follows different requirements. This section describes rules for formatting numbers in different chart elements apart from titles, subtitles, and notes.
Decimal & Thousand Separators
Use the dot (.) as a decimal and a comma (,) as a thousand separator as is the common convention is the U.S., Canada, India etc. as a default.
| Example value | Show as | |
|---|---|---|
| decimal separator | 0.12 | 0.12 |
| thousand separator | 1234.56 | 1,235 |
Number Scaling
Number scaling should be applied for long numeric values to make numbers easier to read. Use the following letters to abbreviate multiples of thousand for numbers greater or equal to 10000: thousands (K), millions (M), and billions (B).
| Scaled absolute values | Abbr. | Example value | Show as |
|---|---|---|---|
| 0 - 10000 | none | 1234.56 | 1,235 |
| 10000 - 1000000 | K for thousands | 123456 | 123K |
| -12345 | -12.3K | ||
| 1000000 - 1000000000 | M for millions | 1234567 | 1.2M |
| -123456789 | -123M | ||
| >1000000000 | B for billions | -12345678912 | -12B |
| -1234567891234 | 1234B |
Decimal Places
The number of decimal places, depends on the size of the absolute number and the number scaling. In general, this should be decided based on the level of precision of the data. However, in the absence of this information, the following system is recommended. Use 2 decimal places for (scaled) numbers with an absolute value between 0 and 1, 1 decimal place for (scaled) numbers with an absolute value between 1 and 100, and 0 decimal places for (scaled) numbers with absolute values larger than 100.
| Scaled absolute values | Example value | Show as |
|---|---|---|
| 0-1 | 0.12 | 0.12 |
| 1-100 | -12.3456 | -12.3 |
| 1234567.89 | 1.2M | |
| >1000 | 1234.56 | 1,235 |
| 123456.78 | 123K |
Number Scaling for Special Units
For some units, the abbreviations for numbers should be slightly adjusted. Use G for billions for units such as watts, tons, bits and bytes together with the abbreviation for the unit as a suffix.
| Unit | Abbr. | Example value | Show as |
|---|---|---|---|
| watts | Kw | 12345 | 12.3Kw |
| Mw | 1234567 | 1.2Mw | |
| Gw | -123456789123 | -123Gw | |
| tons | Kt | 12345 | 12.3Kt |
| Mt | 1234567 | 1.2Mt | |
| Gt | -123456789123 | -123Gt | |
| bits | Kb | 12345 | 12.3Kb |
| Mb | 1234567 | 1.2Mb | |
| Gb | -123456789123 | -123Gb | |
| bytes | KB | 12345 | 12.3KB |
| MB | 1234567 | 1.2MB | |
| GB | -123456789123 | -123GB |
Currencies, Percent and other Pre and Post-Fixes
| Unit | Prefix / Postfix | Example value | Show as |
|---|---|---|---|
| USD | $ | 1234.56 | $1,234 |
| Percent | % | -12.3456 | -12.3% |
Date Formatting
Date formatting is needed for labeling date axes. The format depends on the time resolution of the data (the time frame in between values) and the available horizontal space for the date axis.
Dates
When horizontal space is limited, the short notation can be used. The number of labels on the axes should be around 5, and they should always be displayed horizontally. For very small charts, the labels can be limited to just the start and end dates of the data date range.
| Resolution | Short notation | Long notation | Format |
|---|---|---|---|
| Day | 13/02/2024 or 13/02/24 | February 13, 2024 | %m/%d/%Y' |
| Month | Jan, Feb | January, February | %b' |
| Month, multiple years | Jan-23, Feb-24 | January 2023, February 2024 | %b-%y' |
| Quarter | 24Q1 | 2024Q1 | %bQ%q' |
| Year | 24 | 2024 | '%b' |
| Fiscal year | FY24 | FY2024 | FY%b' |
| Ranges of years | 2017-19 | | |
| Decade | 90s | 1990s | |
Time
Use recursive scaling where possible to display durations as 2h 45min instead of 2.75h.
Text Colors
Text colors are designed following accessibility guidelines for background contrast on white backgrounds (WCAG AAA for large text and AA for small text). The two label colors can be used for regular and secondary labels, while the category and region text colors can be used to show an association between text and data categories.
Label Colors
The two label colors can be used for emphasized (dark) and subtle (light) text in charts. Dark text should be used for instance in tooltips for data values or for axis labels. Light text can be used for secondary information such as axis or legend tick labels and units.
Text Category Colors
If you have fewer than 9 categories in your representation, use the colors in the order of their numbering. For instance, if you only have 4 categories in your dataset use cat1-4 to represent the categories to maximize distinguishability.
Text Region Colors
When using region colors on text, always use the text region colors for sufficient background contrast.