1.7 KiB
"Width" (wdth in CSS) is an axis found in some variable fonts. It controls the font file’s width parameter.
The Google Fonts CSS v2 API defines the axis as:
| Default: | Min: | Max: | Step: |
|---|---|---|---|
| 100 | 25 | 200 | 0.1 |
Width is the result of how much horizontal space is taken up by a typeface’s characters. A condensed face takes up considerably less space than a wide one.
In CSS, we can assign a variable width to an element of our choosing using the font-stretch property. (Despite the name, note that the type is never literally “stretched” by browsers. This property name was chosen to make the concept more accessible to a general audience.)
p {
font-stretch: 50%;
}
strong {
font-stretch: 193%;
}
Here, our text will be quite narrow—the type designer has set 50% as half of the regular (100%) width—and the strong text will be almost twice the width of the regular. Width values are always above 0, with 100% being the regular width.