A condensed typeface is drawn narrow, so more letters fit across the same width without the type getting smaller. That makes it a problem-solver rather than a style: it exists for the headline that is two words too long, the table with nine columns, the sign that has to be read from a moving car. Used for those jobs it is superb. Used because it looks modern, it often makes text harder to read.
Condensed is not the same as squashed
Any design program can squeeze a normal font horizontally, and the result is always worse than a real condensed face. Squeezing thins every vertical stroke while leaving the horizontal ones as they were, so the letters look distorted and uneven. A designed condensed font rebalances the strokes so the colour stays even. If the family you like has no narrow version, choose a different family rather than squashing it.
The free condensed families worth knowing
Oswald and Bebas Neue are the familiar poster gothics; Bebas is capitals only. Big Shoulders Display is taller and more industrial, and its thin weights are unexpectedly elegant. Teko is squared-off and scoreboard-like, good with numbers. Fjalla One has a little stroke contrast, which keeps long headlines from turning into a black bar.
Big Shoulders Display — variable
Sphinx of black quartz, judge my vow
In the static download
For interfaces and data, where narrow type has to be read at small sizes, pick a condensed member of a text family rather than a poster face: Roboto Condensed, Barlow Condensed, PT Sans Narrow and Archivo Narrow all have regular-width siblings to pair with. The full list is on the condensed style page.
Where narrow type works
- Headlines in narrow columns. A news headline or a mobile hero can stay large without wrapping onto four lines.
- Tables and dashboards. Narrow figures let more columns fit without shrinking the type.
- Navigation and labels. Long menu items fit in a fixed bar.
- Signs, posters and sports graphics. Tall letters use vertical space that wide letters waste.
Where it does not
Paragraphs. The narrow counters and tight rhythm that make a condensed face efficient also make it harder to read in quantity: the eye relies on the distinct shapes of letters, and narrowing them makes them more alike. Set body text in a normal width and let the condensed face carry the headings, ideally from the same family so the two agree.
Condensed capitals also benefit from a touch of extra letter-spacing, as explained in kerning, tracking and leading. For thumbnails and social graphics, where narrow heavy type is the default, see fonts for YouTube thumbnails.
| Family | Variable download | Static download |
|---|---|---|
| Oswald | 92 KB1 file | 271 KB6 files |
| Bebas Neue | None published | 30 KB1 file |
| Big Shoulders Display | 104 KB1 file | None published |
| Teko | 119 KB1 file | 289 KB5 files |
| Fjalla One | None published | 110 KB1 file |
How narrow is too narrow
Every condensed face has a point past which the counters — the enclosed spaces inside a, e, o and n — become slots rather than shapes, and that is where reading speed falls off a cliff. The point is different for every family and it moves with the size: a face that is comfortable in a 60px headline can be unreadable in a 13px table cell, which is the same face failing at a different job.
The test takes ten seconds. Set the narrowest thing you actually need — the longest label, the widest number — at the real size, then squint at it. If the lowercase e closes up into a dark blob before anything else does, the face is too narrow for that size and no amount of letter-spacing will rescue it.
Setting condensed type so it holds together
- Capitals need a little extra letter-spacing, around 0.03 to 0.06em. Condensed capitals set tight read as one long word.
- Line height can come down. Narrow type makes shorter lines and the lines can sit closer without colliding — around 1.1 for headlines, against 1.2 for a normal width.
- Avoid all-caps for anything longer than four or five words. The thing that makes condensed type efficient is the lowercase, and capitals throw that away.
- Do not stretch it further in the design program. If it is still too wide, the answer is a narrower family, not a distorted one.
The spacing side of this is covered properly in kerning, tracking and leading, which has the values and the reason behind each one.
The width axis, and why it changes the answer
Some families now carry width as a variable axis alongside weight, which means the narrow cut is not a separate download but a number you set. That is a different way of working: instead of choosing between a normal and a condensed family, you set the width to whatever makes the headline fit, and the strokes are rebalanced for you at every step in between.
Mona Sans runs from a compressed cut to an extended one in a single file, and Ubuntu Sans narrows for tight layouts the same way. In CSS the axis is reached with font-stretch as a percentage, and a browser that cannot read the axis simply renders the default width rather than failing.
| Family | Variable download | Static download |
|---|---|---|
| Mona Sans | 426 KB2 files | 4.2 MB80 files |
| Ubuntu Sans | 752 KB2 files | 5.1 MB48 files |
| Archivo Narrow | 98 KB2 files | 265 KB8 files |
| Roboto Condensed | 448 KB2 files | 1.6 MB18 files |
On a sign, the rules change again
Wayfinding is where condensed type earns its living — a station name has to fit a fixed panel — and it is also where narrowness costs the most, because the reader is moving and the light is bad. Signage practice is to condense only as far as the panel demands, keep the weight medium rather than bold, and add tracking rather than taking it away.
The other difference is size. A sign is read from metres away, and the traditional rule of about 25mm of capital height for every three metres of reading distance assumes a normal width; a condensed face needs a little more height to carry the same distance. Test it printed at full size and stand back, which is the only test that counts.