Numbers

Make large numbers and long numerals easier to read by splitting them up into chunks.

What is a slashed zero?

A slashed zero is a zero with a slash or a dot through it to distinguish it from the letter O. It is a useful Maersk font style to help users make a clear distinction between the letter and digit, but it is not a standard practice in common user interfaces.

When should you use slashed zero?

  • Use when people are having difficulty differentiating between the digit zero (0) and the capital letter ‘O.’ For example, when the context requires users to work with alphanumerical values.
  • Use when the target audience is familiar with the slashed zero notation and prefers it over the regular zero.
  • Don’t use it to display prices or when the value is only numerical.
Recommended

1OOVS100

Alphanumeric values
Do no use slahsed zero

10000.00

Numeric values

Implementation in Figma

  1. Font style needs to be detached to access the stylistic alternatives.
  2. When the font style is detached, press the 3 dots in the side panel once the text box is selected on the canvas.
  3. In the new panel go to the “Details” tab and scroll until you can see “Stylistic alternates”. Select the checkmark to change the Zeros to Slashed zeros in the text.
Animated GIF showing implementation in Figma as detailed above

Implementation in Code

Use the CSS class mds-numeric to enable the slashed zero feature for a specific element.

<div class="mds-numeric">O-VS-0</div>