The majority of displayed characters on screen and print are using proportional font style. It provides a harmonious look and feel, while also avoiding unnecessary space gaps between characters.
However, there are cases where users can benefit from a monospaced font style. For example, when displaying many numerical values or the interface is using dynamic labels.
Monospaced numbers (a.k.a tabular figures) are numeral characters, that have the same width size regardless of their shape. When monospaced numbers are arranged under each other they align perfectly and that makes a comparison by a person easier. For example, financial statements or table columns that contain numerical values.
Implementation
Maersk font supports both monospaced and proportional numbers out of the box.
Monospaced numbers are supported in Figma and the following MDS CSS classes render monospaced numbers:
mds-tabular-figuresmds-table__cell--tabular-figuresmds-table__cell--number
Additionally, you can use the font-feature-settings: 'tnum'; CSS property.
Apply monospaced font style to:
- Numbers in data tables, financial statements, and similar cases where the user will need to compare the numbers with each other, especially when in vertical order.
- Numbers, where the values are changing dynamically, such as file sizes and time elapsing on videos. It will prevent horizontal wiggling of the numbers.
Using Monospaced VS Proportional numbers
| Item name | Quantity (kg) |
|---|---|
| Peas | 11,223.10 |
| Beans | 18,223.50 |
| Black beans | 88,113.40 |
| Wheat grain | 123,213.50 |
| Item name | Quantity (kg) |
|---|---|
| Peas | 11,223.10 |
| Beans | 18,223.50 |
| Black beans | 88,113.40 |
| Wheat grain | 123,213.50 |