# 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. 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. How these were chosen: Variable families whose records list a width (wdth) axis in addition to weight; axis ranges are quoted from the records. ## Fonts (17) - [Roboto](https://trendhub.net/fonts/roboto.markdown) (Sans Serif, 18 styles · variable, OFL): A width axis from 75 to 100 narrows the design toward a condensed cut, beside weight from 100 to 900 with italics. - [Open Sans](https://trendhub.net/fonts/open-sans.markdown) (Sans Serif, 12 styles · variable, OFL): Width narrows from 100 to 75 for copy-fitting, in a humanist sans with six weights and italics. - [Archivo](https://trendhub.net/fonts/archivo.markdown) (Sans Serif, 18 styles · variable, OFL): Width from 62 to 125, extra condensed to expanded, alongside weight from Thin to Black with italics. - [Saira](https://trendhub.net/fonts/saira.markdown) (Sans Serif, 18 styles · variable, OFL): Width from 50 to 125 and weight from 100 to 900 in a squared sans, plus italics. - [IBM Plex Sans](https://trendhub.net/fonts/ibm-plex-sans.markdown) (Sans Serif, 14 styles · variable, OFL): A width axis that narrows the letters to 75, with seven weights and italics. - [Inconsolata](https://trendhub.net/fonts/inconsolata.markdown) (Monospace, 8 styles · variable, OFL): A monospace whose width axis runs from 50 to 200, half the normal width to double, beside weight from 200 to 900. - [Noto Serif](https://trendhub.net/fonts/noto-serif.markdown) (Serif, 18 styles · variable, OFL): A text serif whose width axis narrows from 100 to 62.5, with nine weights and italics. - [Merriweather](https://trendhub.net/fonts/merriweather.markdown) (Serif, 14 styles · variable, OFL): A text serif with a modest width range, 87 to 112, beside weight and optical size axes. - [Asap](https://trendhub.net/fonts/asap.markdown) (Sans Serif, 18 styles · variable, OFL): Weight from 100 to 900 and width from 75 to 125, with italics. - [Georama](https://trendhub.net/fonts/georama.markdown) (Sans Serif, 18 styles · variable, OFL): A width axis from 62.5 to 150, condensed to expanded, and nine weights with italics. - [Zalando Sans](https://trendhub.net/fonts/zalando-sans.markdown) (Sans Serif, 16 styles · variable, OFL): Width from 75 to 125 and weight from 200 to 900 in a plain grotesque, plus italics. - [Science Gothic](https://trendhub.net/fonts/science-gothic.markdown) (Sans Serif, 18 styles · variable, OFL): Four axes: weight 100–900, width 50–200, slant and contrast. - [Advent Pro](https://trendhub.net/fonts/advent-pro.markdown) (Sans Serif, 18 styles · variable, OFL): Width only expands here, from 100 to 200, beside weight from 100 to 900. - [Mozilla Headline](https://trendhub.net/fonts/mozilla-headline.markdown) (Sans Serif, 6 styles · variable, OFL): Weight from 200 to 700 and width from 75 to 125 in a headline sans. - [Anek Latin](https://trendhub.net/fonts/anek-latin.markdown) (Sans Serif, 8 styles · variable, OFL): Width from 75 to 125 across eight upright weights from Thin to ExtraBold. - [Pliant](https://trendhub.net/fonts/pliant.markdown) (Sans Serif, 18 styles · variable, OFL): Width only goes wider, from 100 to 125, with nine weights, italics, Cyrillic and Greek. - [Ubuntu Sans](https://trendhub.net/fonts/ubuntu-sans.markdown) (Sans Serif, 16 styles · variable, UFL): A width axis that narrows from 100 to 75 in a sans made for menus, buttons and dialogs, with eight weights and italics. ## FAQs ### 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. ## Related collections - [Variable fonts with an optical size axis](https://trendhub.net/fonts/for/variable-fonts-with-optical-size.markdown) - [Variable fonts with unusual axes](https://trendhub.net/fonts/for/variable-fonts-with-unusual-axes.markdown) - [Narrow sans-serif fonts for tables and tight layouts](https://trendhub.net/fonts/for/narrow-fonts-for-tight-layouts.markdown) - [Condensed fonts for headlines](https://trendhub.net/fonts/for/condensed-headline-fonts.markdown) - [Wide and extended fonts for headings and logos](https://trendhub.net/fonts/for/wide-and-extended-fonts.markdown) - [Font families with nine weights and italics](https://trendhub.net/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/fonts/for/variable-fonts-with-a-width-axis (trendhub)