Install FontSwap
There is no standards body policing font width names. One foundry’s Condensed is another’s Narrow, and a third foundry’s Compressed is narrower than both. The labels are marketing, not measurement.
What is standardised is the CSS side. That’s the part worth learning.
The scale that actually exists
CSS defines nine named width steps, each mapped to a percentage. The wdth axis in a variable font uses the same numbers:
| Percentage | CSS keyword |
|---|---|
| 50% | ultra-condensed |
| 62.5% | extra-condensed |
| 75% | condensed |
| 87.5% | semi-condensed |
| 100% | normal |
| 112.5% | semi-expanded |
| 125% | expanded |
| 150% | extra-expanded |
| 200% | ultra-expanded |
So when Roboto exposes a width axis of 75–100, it runs from condensed to normal. Saira at 50–125 runs from ultra-condensed all the way to expanded. Noto Sans at 62.5–100 bottoms out at extra-condensed.
That gives you a real basis for comparison. “Is Saira Condensed narrower than Noto Sans Condensed?” is unanswerable from the names alone — but wdth 75 versus wdth 75 is directly comparable, and Saira’s floor of 50 tells you it goes considerably further.
What the marketing names tend to mean
With the caveat that this is convention rather than rule:
Narrow is usually the mildest compression — roughly semi-condensed territory, around 87.5%. Foundries reach for it when they want space savings without an obvious stylistic statement.
Condensed is the middle of the road, near 75%. This is the width most people picture when they say “condensed,” and the one most static families ship.
Compressed is typically narrower still, and almost always a display cut. If a family offers both Condensed and Compressed, Compressed is the more extreme one, drawn for headlines rather than text.
Extended and Expanded are used more or less interchangeably above 100%, with no reliable ordering between them. Some families ship both, and which is wider is anyone’s guess without measuring.
The honest summary: within a single family the names are ordered sensibly. Across families they mean nothing. Compare percentages, not adjectives.
Two things that go wrong
Assuming widths are portable. Setting font-stretch: condensed and swapping the family will not preserve the look. A font with no width axis and no condensed cut simply ignores the declaration and renders at normal width — silently. Your layout reflows and nothing errors.
Faking it with scaleX. Horizontal scaling compresses vertical stems and horizontal strokes by the same factor. Real condensed letterforms only narrow the horizontals — the vertical stems keep their weight. Scaled type looks anaemic in a way readers register as “cheap” without being able to say why. If there’s no width axis and no condensed cut, pick a different font.
Reading a font’s real range
Rather than trusting the name, check what a variable font actually exposes. Every free font page here lists the axes and their ranges, and in the browser you can read them off a loaded font directly:
document.fonts.forEach(f => console.log(f.family, f.stretch));For the condensed families that ship as static fonts — Barlow Condensed, Oswald, Fjalla One, Bebas Neue — there’s no axis to read. They are one fixed width, chosen by the designer, and the name is all the information you get. That’s fine; it just means the comparison has to be visual.
FAQ
Is font-stretch or font-variation-settings the right property?
Use font-stretch: 75% where the axis is wdth — it’s the standard property, it inherits normally, and it animates. Reserve font-variation-settings for custom axes with no CSS property equivalent.
Does condensed type save vertical space too?
No — width and height are independent. Condensed type fits more characters per line, which can mean fewer lines overall, but the line height is unchanged. If you need vertical savings, adjust line-height.
Which free font has the widest width range? Among the fonts in our collection, Inconsolata at 50–200 — though it’s a monospace, so the use cases are narrower. For a general-purpose sans, Saira at 50–125.