Numbers

Definition

Numbers represent quantitative information in user interfaces and content. They communicate measurements, counts, sequences, ranges and monetary values to help users understand quantities and make informed decisions.

Overview

Localization

Our source language is EN-US (US English). Remember to hand off designs to the Localization team.

• Confluence: Localization Operations Team
• Slack: #prj-translations

Engineering notes

• Use the Intl browser API for localization. This will automatically localize numbers into the correct format.
• Where manually-created EN-US content needs to be formatted correctly in the code, use the relevant guidelines shown in this documentation
• Below is an example of using the Intl API:

The preview has been updated.

CopySharePrettify

<ul>
  <li>
    Hello, Ireland! This item is{' '}
    {new Intl.NumberFormat('en-IE').format(1234.56)} centimetres long.
  </li>
  <li>
    Wilkommen, Germany! This item is{' '}
    {new Intl.NumberFormat('de-DE').format(1234.56)} centimeters long.
  </li>
</ul>

<ul> <li> Hello, Ireland! This item is{' '} {new Intl.NumberFormat('en-IE').format(1234.56)} centimetres long. </li> <li> Wilkommen, Germany! This item is{' '} {new Intl.NumberFormat('de-DE').format(1234.56)} centimeters long. </li> </ul>

Structure

General numbers

• For most numbers, we recommend writing them out with digits rather than words, as they are easier to scan
• However, there are some instances when writing numbers with words may be preferable:
  • Numbers that are part of a proper noun
  • Ordinal numbers ("third" instead of "3rd")
  • Any time writing out the number would improve overall clarity
• When a number has 4 or more digits, use commas between every group of 3 digits starting from the right (“4,000” instead of “4000”)
• Don't use abbreviations like 130k or 130K. We shouldn’t assume that all audiences will understand these
• For large, whole numbers only, use a mix of digits and words to improve readability (“3 million” instead of “3,000,000”)

Number ranges

The preview has been updated.

CopySharePrettify

<ul>
  <li>
    Hello, Ireland! This item is{' '}
    {new Intl.NumberFormat('en-IE', { style: 'decimal' }).formatRange(3, 5)}{' '}
    centimetres long.
  </li>
</ul>

<ul> <li> Hello, Ireland! This item is{' '} {new Intl.NumberFormat('en-IE', { style: 'decimal' }).formatRange(3, 5)}{' '} centimetres long. </li> </ul>

• Use an en dash "–" between numbers with no spaces before or after
  • Tip: On a Mac, use Option+ Hyphen (-) to create an en dash
• Use "and up" or "up to" for ranges above or below a number

Decimals

The preview has been updated.

CopySharePrettify

<ul>
  <li>
    Hello, Ireland! This item is{' '}
    {new Intl.NumberFormat('en-IE', { style: 'decimal' }).format(1234.56)}{' '}
    centimetres long.
  </li>
  <li>
    Wilkommen, Germany! This item is{' '}
    {new Intl.NumberFormat('de-DE', { style: 'decimal' }).format(1234.56)}{' '}
    centimeters long.
  </li>
</ul>

<ul> <li> Hello, Ireland! This item is{' '} {new Intl.NumberFormat('en-IE', { style: 'decimal' }).format(1234.56)}{' '} centimetres long. </li> <li> Wilkommen, Germany! This item is{' '} {new Intl.NumberFormat('de-DE', { style: 'decimal' }).format(1234.56)}{' '} centimeters long. </li> </ul>

• Display decimals without rounding up or down
• Don't use fractions
• Insert a zero before the decimal point if the amount is less than one
• Drop the decimal point if the decimal equals zero
• For monetary amounts, reference Currency

Percentages

The preview has been updated.

CopySharePrettify

<ul>
  <li>
    Hello, Ireland! This order is{' '}
    {new Intl.NumberFormat('en-IE', { style: 'percent' }).format(0.56)}{' '}
    complete.
  </li>
  <li>
    Wilkommen, Germany! This order is{' '}
    {new Intl.NumberFormat('de-DE', { style: 'percent' }).format(0.56)}{' '}
    complete.
  </li>
</ul>

<ul> <li> Hello, Ireland! This order is{' '} {new Intl.NumberFormat('en-IE', { style: 'percent' }).format(0.56)}{' '} complete. </li> <li> Wilkommen, Germany! This order is{' '} {new Intl.NumberFormat('de-DE', { style: 'percent' }).format(0.56)}{' '} complete. </li> </ul>

• Format as [value][percent symbol] with no space between the number and symbol
• Use the % symbol. Don't spell out "percent”