Variable fonts with a width axis
Variable families in which letter width is adjustable as well as weight, from slight narrowing for copy-fitting to a full condensed-to-wide range.
Narrow to wide
A variable font stores a design as a range instead of a set of fixed styles. Most variable families offer a weight axis; a smaller number add a width axis, registered under the tag wdth, which makes the letters narrower or wider while keeping their height and character. Its values are percentages of the normal width, so 75 is a condensed cut, 100 the regular one and 125 an extended one.
Width is often the more practical of the two axes for layout work. It lets a headline be fitted exactly to its column, a navigation label be squeezed on a small screen and relaxed on a large one, or a table switch to a narrower setting only when its columns run out of room. In CSS the property is font-stretch, or font-variation-settings for finer control, and it can change at breakpoints or animate.
Compare ranges before choosing. Several families here only narrow, from 100 down to 75 or so, which is enough for copy-fitting; two only widen; others travel from half the normal width to double and are effectively several typefaces in one. The notes below state each range as recorded. A well-drawn width axis adjusts the letter shapes themselves, unlike squashing text artificially.
-
Roboto
A width axis from 75 to 100 narrows the design toward a condensed cut, beside weight from 100 to 900 with italics.
-
Open Sans
Width narrows from 100 to 75 for copy-fitting, in a humanist sans with six weights and italics.
-
Archivo
Width from 62 to 125, extra condensed to expanded, alongside weight from Thin to Black with italics.
-
Saira
Width from 50 to 125 and weight from 100 to 900 in a squared sans, plus italics.
-
IBM Plex Sans
A width axis that narrows the letters to 75, with seven weights and italics.
-
Inconsolata
A monospace whose width axis runs from 50 to 200, half the normal width to double, beside weight from 200 to 900.
-
Noto Serif
A text serif whose width axis narrows from 100 to 62.5, with nine weights and italics.
-
Merriweather
A text serif with a modest width range, 87 to 112, beside weight and optical size axes.
-
Asap
Weight from 100 to 900 and width from 75 to 125, with italics.
Samples load a basic Latin subset of each family. Every family here carries an open license; its page states the terms and offers the original files.
Questions about variable fonts with a width axis
How do I set font width in CSS?
Use font-stretch with a percentage, for example font-stretch: 85%, or font-variation-settings: "wdth" 85. The value must lie within the range the font supports; values outside it are clamped to the nearest end.
Is a width axis the same as scaling text horizontally?
No. Scaling distorts stroke thickness and curves. A width axis uses shapes drawn for each width, so vertical and horizontal strokes stay in proportion.
Do variable fonts work in all browsers and apps?
Current browsers and major design applications support them. Older software may show only the default style, so keep static files as a fallback where that matters.
Can I use these variable fonts commercially?
Yes. All but one are under the SIL Open Font License, which permits commercial use, embedding and self-hosting; Ubuntu Sans uses the Ubuntu Font License, which also permits commercial use. Each font page states its license.