How to display units in short or long form

Introduction

When you display measurements in an interface, the unit takes up space alongside the number. The distance 5 kilometers can appear as "5 km", "5 kilometers", or "5km" depending on how much space you have available and how clear you need to be. Each format trades readability against horizontal space.

Different contexts require different formatting choices. A mobile dashboard showing multiple metrics benefits from compact units like "km" or "kg". An educational application teaching students about measurements needs clear, spelled-out units like "kilometers" or "kilograms". A data-dense visualization uses the most compact form possible to fit more information on screen.

JavaScript's Intl.NumberFormat provides the unitDisplay option to control this choice. You can select between short display with standard abbreviations, long display with spelled-out words, or narrow display with the most compact representation possible. This option gives you precise control over how units appear to users.

What the unitDisplay option controls

The unitDisplay option works when you set style to "unit" in Intl.NumberFormat. It accepts three values: "short", "long", and "narrow". Each value produces a different level of verbosity for the unit portion of the formatted output.

The short value produces standard abbreviated units like "5 km" or "10 lb". The long value spells out the full unit name like "5 kilometers" or "10 pounds". The narrow value produces the most compact representation like "5km" or "10lb", often removing spaces between the number and unit.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(shortFormatter.format(5));
// Output: "5 km"

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(longFormatter.format(5));
// Output: "5 kilometers"

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(narrowFormatter.format(5));
// Output: "5km"

The unitDisplay option defaults to "short" if you omit it. This means unit formatting uses standard abbreviations unless you explicitly request a different display style.

Format units with short display

Short display uses standard abbreviations that most people recognize. This format balances readability with space efficiency.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(formatter.format(5));
// Output: "5 km"

console.log(formatter.format(42));
// Output: "42 km"

The formatter adds a space between the number and the abbreviated unit. This separation improves readability while keeping the output compact.

You can format different unit types with short display.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "short"
});

const volumeFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "liter",
  unitDisplay: "short"
});

console.log(distanceFormatter.format(10));
// Output: "10 km"

console.log(weightFormatter.format(25));
// Output: "25 kg"

console.log(volumeFormatter.format(3.5));
// Output: "3.5 L"

Each unit type uses its standard abbreviation. Distance uses km, weight uses kg, and volume uses L. These abbreviations are widely recognized and work well in most contexts.

Short display is the default behavior. If you omit the unitDisplay option, the formatter uses short display automatically.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer"
});

console.log(formatter.format(5));
// Output: "5 km"

This default makes short display convenient when you want standard abbreviated units without explicitly specifying the display option.

Format units with long display

Long display spells out the complete unit name. This format provides maximum clarity at the cost of additional horizontal space.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(formatter.format(5));
// Output: "5 kilometers"

console.log(formatter.format(1));
// Output: "1 kilometer"

The formatter automatically handles singular and plural forms. One unit uses the singular "kilometer" while multiple units use the plural "kilometers". You do not need to manually determine which form to use.

You can format different units with long display to see the full unit names.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "mile",
  unitDisplay: "long"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "pound",
  unitDisplay: "long"
});

const temperatureFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "celsius",
  unitDisplay: "long"
});

console.log(distanceFormatter.format(10));
// Output: "10 miles"

console.log(weightFormatter.format(25));
// Output: "25 pounds"

console.log(temperatureFormatter.format(22));
// Output: "22 degrees Celsius"

Long display makes the measurement immediately clear without requiring users to interpret abbreviations. Temperature units particularly benefit from long display because abbreviations like C and F can be ambiguous.

Users who are unfamiliar with measurement abbreviations find spelled-out units more accessible. Educational content, formal reports, and accessibility-focused interfaces benefit from this explicitness.

Format units with narrow display

Narrow display produces the most compact representation possible. This format removes spaces and uses minimal symbols to save every character.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(formatter.format(5));
// Output: "5km"

console.log(formatter.format(42));
// Output: "42km"

The formatter removes the space between the number and unit, creating a more condensed output. This saves horizontal space in extremely constrained layouts.

Different units produce different narrow representations based on standard conventions.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const speedFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour",
  unitDisplay: "narrow"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "narrow"
});

console.log(distanceFormatter.format(10));
// Output: "10km"

console.log(speedFormatter.format(60));
// Output: "60km/h"

console.log(weightFormatter.format(25));
// Output: "25kg"

Narrow display works best when space is extremely limited and users are familiar with the measurement context. The condensed format assumes users can interpret the units without explicit separation or explanation.

Compare short, long, and narrow display

The differences between the three display options become clear when you format the same measurements with each option.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const distances = [1, 5, 10, 42];

distances.forEach(distance => {
  console.log(`${distance}:`);
  console.log(`  Short:  ${shortFormatter.format(distance)}`);
  console.log(`  Long:   ${longFormatter.format(distance)}`);
  console.log(`  Narrow: ${narrowFormatter.format(distance)}`);
});

// Output:
// 1:
//   Short:  1 km
//   Long:   1 kilometer
//   Narrow: 1km
// 5:
//   Short:  5 km
//   Long:   5 kilometers
//   Narrow: 5km
// 10:
//   Short:  10 km
//   Long:   10 kilometers
//   Narrow: 10km
// 42:
//   Short:  42 km
//   Long:   42 kilometers
//   Narrow: 42km

Short display uses 4-5 characters for the unit portion. Long display uses 9-10 characters including plural forms. Narrow display uses 2 characters and removes the space. This progression shows the tradeoff between clarity and space efficiency.

You can compare different unit types to see how each display option handles various measurements.

const units = [
  { unit: "mile", value: 10 },
  { unit: "pound", value: 25 },
  { unit: "gallon", value: 5 },
  { unit: "fahrenheit", value: 72 }
];

units.forEach(({ unit, value }) => {
  const short = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "short"
  }).format(value);

  const long = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "long"
  }).format(value);

  const narrow = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "narrow"
  }).format(value);

  console.log(`${unit}:`);
  console.log(`  Short:  ${short}`);
  console.log(`  Long:   ${long}`);
  console.log(`  Narrow: ${narrow}`);
});

// Output:
// mile:
//   Short:  10 mi
//   Long:   10 miles
//   Narrow: 10mi
// pound:
//   Short:  25 lb
//   Long:   25 pounds
//   Narrow: 25lb
// gallon:
//   Short:  5 gal
//   Long:   5 gallons
//   Narrow: 5gal
// fahrenheit:
//   Short:  72°F
//   Long:   72 degrees Fahrenheit
//   Narrow: 72°F

Temperature units show interesting behavior. Short and narrow display both use the degree symbol and abbreviated unit, while long display spells out "degrees Fahrenheit". This makes long display particularly valuable for temperature where the full context matters.

How unit display varies across languages

All three display options adapt to the locale you specify. Different languages use different abbreviations, unit names, and spacing conventions.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "short"
  });

  const longFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(5)}`);
  console.log(`  Long:  ${longFormatter.format(5)}`);
});

// Output:
// en-US:
//   Short: 5 km
//   Long:  5 kilometers
// de-DE:
//   Short: 5 km
//   Long:  5 Kilometer
// fr-FR:
//   Short: 5 km
//   Long:  5 kilomètres
// ja-JP:
//   Short: 5 km
//   Long:  5キロメートル

Short display remains consistent across locales because "km" is an internationally recognized abbreviation. Long display varies because each language has its own word for kilometer. German uses "Kilometer", French uses "kilomètres", and Japanese uses "キロメートル".

The formatter handles grammatical variations automatically. German does not pluralize "Kilometer" the same way English pluralizes "kilometers". French adds an accent to the word. Japanese uses a completely different writing system. The Intl API manages these differences based on the locale.

Some locales handle narrow display differently than others.

const locales = ["en-US", "de-DE", "fr-FR"];

locales.forEach(locale => {
  const narrowFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer-per-hour",
    unitDisplay: "narrow"
  });

  console.log(`${locale}: ${narrowFormatter.format(60)}`);
});

// Output:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h

English removes the space in narrow display, producing "60km/h". German and French retain the space, producing "60 km/h". These locale-specific conventions reflect how each culture writes measurements in compact form.

When to use short display

Short display works best in contexts where space matters but abbreviations are widely understood. This is the most common choice for general-purpose applications.

Mobile interfaces benefit from short display because screen width is limited. Dashboard cards showing multiple metrics need compact units to fit information on screen. Using "42 km" instead of "42 kilometers" saves 5 characters per measurement, adding up across multiple values.

Data tables displaying measurements in columns need consistent width. Short abbreviations like "km", "kg", and "L" keep column widths manageable. Long units like "kilometers", "kilograms", and "liters" widen columns unnecessarily.

Scientific and technical interfaces use short display because users in these contexts are familiar with standard abbreviations. Engineers, scientists, and technical professionals expect measurements to use abbreviated units.

Maps and visualizations use short display to avoid cluttering the interface with text. Showing "5 km" on a map marker is more readable than "5 kilometers" when space around the marker is limited.

Short display strikes a balance between clarity and efficiency. Most users recognize standard abbreviations like km, mi, kg, lb, L, and gal without confusion.

When to use long display

Long display works best when clarity and accessibility matter more than space efficiency. This choice makes measurements immediately understandable without requiring interpretation.

Educational content benefits from long display because students may not be familiar with measurement abbreviations. Teaching materials explaining distance, weight, or volume should spell out units to avoid confusion.

Accessibility-focused interfaces benefit from long display because screen readers pronounce spelled-out words more naturally. A screen reader announcing "5 kilometers" sounds more natural than "5 km", which might be read as "5 k m" or "5 kay em".

Formal documents and reports use long display to maintain a professional tone. Business reports, scientific papers, and official documents typically spell out measurements rather than abbreviating them.

International audiences benefit from long display when measurement systems vary. Users unfamiliar with metric or imperial units find spelled-out names like "kilometers" or "miles" easier to understand than abbreviations.

Contexts where users are learning about measurements or units need long display. Recipe applications teaching cooking measurements, fitness applications explaining distances, or health applications showing weights should use clear, spelled-out units.

When to use narrow display

Narrow display works best in extremely space-constrained contexts where every character matters and users are highly familiar with the measurement domain.

Data visualizations with dense information benefit from narrow display. Chart labels, graph annotations, and data overlays need minimal text to avoid obscuring underlying visual content. Using "60km/h" instead of "60 km/h" saves one character while remaining readable to users who understand the context.

Compact dashboard tiles showing single metrics can use narrow display when the tile size is minimal. A speedometer widget showing "60km/h" in large text fits better than "60 kilometers per hour".

Mobile widgets with limited screen space use narrow display to maximize information density. A weather widget showing temperature, wind speed, and precipitation in a small home screen widget benefits from compact units.

Technical interfaces for expert users can use narrow display because the audience understands the measurements without explicit separation. Aviation displays, engineering tools, and scientific instruments often use compact unit notation that experts recognize instantly.

Narrow display assumes users are familiar with the measurement context and can interpret units without assistance. This option trades clarity for maximum space efficiency.

Combine unit display with other formatting options

The unitDisplay option works with all other number formatting options. You can control decimal places, grouping, and other formatting while choosing the unit display style.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long",
  maximumFractionDigits: 2
});

console.log(formatter.format(42.7856));
// Output: "42.79 kilometers"

console.log(formatter.format(5.1));
// Output: "5.1 kilometers"

The maximumFractionDigits option controls decimal precision while unitDisplay controls the unit format. These options work together to produce the exact format you need.

You can combine unit display with compact notation to show large measurements in readable form.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "meter",
  unitDisplay: "long",
  notation: "compact"
});

console.log(formatter.format(1500));
// Output: "1.5K meters"

console.log(formatter.format(2400000));
// Output: "2.4M meters"

This combination works well when displaying very large measurements where both the magnitude and unit need to be clear. Scientific data, geographic distances, or astronomical measurements benefit from compact notation with long unit display.

You can combine unit display with sign display to show changes or differences in measurements.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "long",
  signDisplay: "always"
});

console.log(formatter.format(2.5));
// Output: "+2.5 kilograms"

console.log(formatter.format(-1.8));
// Output: "-1.8 kilograms"

This format works well for showing weight changes, elevation differences, or any measurement where the direction of change matters. The explicit sign combined with spelled-out units makes the change immediately clear.

What to remember

The unitDisplay option controls how units appear when formatting measurements with Intl.NumberFormat. Set it to "short" for standard abbreviations like "5 km", "long" for spelled-out units like "5 kilometers", or "narrow" for compact forms like "5km". The option defaults to "short" if omitted.

Use short display for general-purpose applications where space matters and users understand standard abbreviations. Use long display when clarity and accessibility matter more than space, or when users may be unfamiliar with abbreviations. Use narrow display only in extremely space-constrained contexts where users are highly familiar with the measurement domain.

The formatter handles locale-specific variations automatically, including different abbreviations, unit names, spacing conventions, and plural forms. Combine unitDisplay with other formatting options like decimal places, compact notation, and sign display to create the exact measurement format your application needs.