Install FontSwap
When a layout needs narrower type — navigation bars, table headers, mobile screens — you have two options: a variable font with a wdth axis, or a separate condensed family. Both solve the same problem, but the tradeoffs are different.
The Two Approaches
Variable width axis (wdth): A single font file with a continuous width range. Set font-stretch: 75% and the font narrows smoothly. Available in fonts like Barlow (which offers static condensed variants), and premium fonts like WTF Forma and GT Canon.
Separate condensed family: A standalone font designed specifically for narrow settings. Examples: Barlow Condensed, Roboto Condensed, IBM Plex Sans Condensed. Each is optimized for its target width rather than interpolated from a range.
When to Use Width Axis
Choose variable width when:
- Responsive typography: You want the font to narrow fluidly with viewport changes. The
wdthaxis enablesfont-stretchin CSS media queries orclamp()for smooth transitions. - Design tokens: Your system needs multiple width stops (Semi-Condensed, Normal, Semi-Extended) without loading separate files.
- Animation: You want to animate width changes (e.g., expanding a label on hover). Variable axes interpolate smoothly; switching between static families creates jarring jumps.
- Bundle size: One variable file vs. three or more static width families reduces HTTP requests.
When to Use Separate Condensed
Choose a standalone condensed family when:
- Optimized letterforms: Separate condensed fonts are drawn specifically for narrow proportions. Designers adjust spacing, stroke weight, and counter shapes for the target width. Variable interpolation between Normal and Condensed is mathematically correct but may not be optically optimal.
- Extreme condensation: Below about 75% width, variable interpolation can produce awkward shapes. Dedicated condensed designs handle extreme narrowing better.
- Mixed-family pairing: Using a condensed variant for navigation alongside the regular width for body text creates intentional contrast. This works better with separate families where each is optimized for its role.
- Legacy browser support: Variable fonts require relatively modern browsers. Separate families work everywhere.
Free Font Options
| Font | Width Approach | Range |
|---|---|---|
| Barlow | Separate families (Regular, Semi-Condensed, Condensed) | 3 widths |
| IBM Plex Sans | Separate Condensed family | 2 widths |
| Noto Sans | wdth axis (variable) | 62.5%-100% |
| Roboto | Separate families + Flex variant | Multiple |
Most free fonts don’t offer a wdth variable axis. Noto Sans is the most accessible free option with true variable width. Premium fonts like WTF Forma (5 widths) and GT Canon (5 widths) offer more range but at a licensing cost.
Practical Recommendation
For most projects, separate condensed families are the better choice with today’s free font options. The quality of dedicated condensed designs like Barlow Condensed outweighs the convenience of variable width interpolation. Use the wdth axis when you need fluid responsive behavior or when working with premium fonts that have been carefully tuned across their width range.
FAQ
Does font-stretch work with separate condensed families?
No. font-stretch only works with variable fonts that include a wdth axis. For separate families, you need to specify the condensed family name explicitly.
How do I decide the right width for navigation? Start with Semi-Condensed (87.5%) for navigation and labels. Only go to full Condensed (75%) if space is severely constrained. Below 75%, readability drops noticeably.
Can I mix widths within a paragraph? Avoid it. Mixed widths within running text creates visual inconsistency. Use width changes at clear structural boundaries (nav vs. body, header vs. content).