Numbers and units
How to format numbers, currency, and units of measure in interface text.
Use numerals
✅ Do
❌ Don’t
This differs from the WFP Editorial Style Guide, which writes numbers 1 through 10 as words.
Use Intl.NumberFormat
To format numbers, currency, and units in interfaces, use Intl.NumberFormat – a built-in JavaScript function that formats numeric values according to locale and preferences.
To localize output, pass a locale as the first argument:
| Language | Locale code |
|---|---|
| English (British) | en-GB |
| French | fr |
| Spanish | es |
| Arabic | ar |
For form-related use cases, keep the raw numeric value in state and apply Intl formatting only when rendering labels, summaries, or read-only values.
Intl.NumberFormat sometimes differs from the WFP Editorial Style Guide. Always prioritize Intl.NumberFormat.
Numbers
Use commas to group thousands
✅ Do
❌ Don’t
This differs from the WFP Editorial Style Guide, which, in tables, replaces commas with hard spaces.
Examples
Use plain decimal formatting for grouped thousands.
Optionally, use notation: "compact" for large values such as millions.
123,456.79
123k
const value = 123456.789;
const formatNumber = new Intl.NumberFormat("en-GB", {
maximumFractionDigits: 2,
}).format(value);
const formatNumberCompact = new Intl.NumberFormat("en-GB", {
notation: "compact",
}).format(value);For grouping, notation, and precision options, see MDN: digit and notation options.
Units
Use abbreviations
Use the following abbreviations from the WFP Editorial Style Guide:
| Unit | Symbol |
|---|---|
| Metres | m |
| Square metres | m2 |
| Cubic metres | m3 |
| Kilometres | km |
| Hectares | ha |
| Metric tons | mt |
| Grams | g |
| Kilocalories | kcal |
Don’t write the unit in full.
✅ Do
❌ Don’t
No punctuation after the unit.
✅ Do
❌ Don’t
Leave a space between value and unit.
✅ Do
❌ Don’t
Examples
Use style: "unit" with the unit you need.
5,678 m
5.7 km
350 g
0.35 kg
75 ha
3 l
const formatMetres = new Intl.NumberFormat("en-GB", {
style: "unit",
unit: "meter",
}).format(5678);
const formatKilometres = new Intl.NumberFormat("en-GB", {
style: "unit",
unit: "kilometer",
}).format(5.7);
const formatGrams = new Intl.NumberFormat("en-GB", {
style: "unit",
unit: "gram",
}).format(350);
const formatKilograms = new Intl.NumberFormat("en-GB", {
style: "unit",
unit: "kilogram",
}).format(0.35);
const formatHectares = new Intl.NumberFormat("en-GB", {
style: "unit",
unit: "hectare",
}).format(75);
const formatLitres = new Intl.NumberFormat("en-GB", {
style: "unit",
unit: "liter",
}).format(3);For abbreviations that are not supported by Intl.NumberFormat, format the number with Intl and append the abbreviation manually.
120 m2
500 m3
2,000 kcal
const formatSquareMetres = `${new Intl.NumberFormat("en-GB").format(120)} m2`;
const formatCubicMetres = `${new Intl.NumberFormat("en-GB").format(500)} m3`;
const formatKilocalories = `${new Intl.NumberFormat("en-GB").format(2000)} kcal`;Percentages
Use %
Use the % sign, with no space before it.
✅ Do
❌ Don’t
❌ Don’t
❌ Don’t
This differs from the WFP Editorial Style Guide, which prefers the word “percent” in text.
Examples
Use style: "percent" and pass decimal input values.
16%
const formatPercentage = new Intl.NumberFormat("en-GB", {
style: "percent",
}).format(0.16);Currency
Use ISO currency codes
✅ Do
❌ Don’t
✅ Do
❌ Don’t
Examples
Use style: "currency" with the target currency code.
Use currencyDisplay: "code" to show the ISO code instead of a symbol.
USD 1,234,567.89
EUR 1.2m
const value = 1234567.89;
const formatUSDollar = new Intl.NumberFormat("en-GB", {
style: "currency",
currency: "USD",
currencyDisplay: "code",
}).format(value);
const formatEuroCompact = new Intl.NumberFormat("en-GB", {
style: "currency",
currency: "EUR",
currencyDisplay: "code",
notation: "compact",
}).format(value);