What is variable font
A variable font is a single font file that contains multiple variations of a typeface, such as different widths, weights, or styles. These variations can be accessed and controlled through CSS properties, allowing developers and designers to create responsive and dynamic typography on the web.
With variable fonts, designers can create custom variations of a typeface that match their specific design needs, while developers can use CSS properties to adjust the variations in response to user interactions or changes in the layout. This allows for more flexibility and control over typography in web design, and can help improve the user experience.
Variable fonts can also help reduce the number of font files needed for a website, which can improve page load times and performance.
Variable fonts are supported in all modern browsers, and are defined in the OpenType Font Variations specification.
Font Weight vs Font Stretch
The main difference between the CSS font-weight and font-stretch properties is that font-weight is used to specify the boldness of a font, while font-stretch is used to specify the width of a font.
The font-weight property is typically used to make text bolder or thinner. For example, you might use a font-weight of “bold” for headings and “normal” for body text. The font-weight property can take a variety of values, including numeric values like 100, 200, 300, etc. The higher the number, the bolder the font.
The font-stretch property, on the other hand, is used to make text narrower or wider. For example, you might use a font-stretch value of “condensed” to save space in a narrow column, or “expanded” to create a more dramatic effect. The font-stretch property can take a variety of values, including “ultra-condensed”, “extra-condensed”, “condensed”, “semi-condensed”, “normal”, “semi-expanded”, “expanded”, “extra-expanded”, or “ultra-expanded.”
In conclusion font-weight is used to control the thickness of a font, while font-stretch is used to control the width of a font. While font-weight can be used to make text more legible in small sizes and on screens, font-stretch can be used to create more dramatic effects or to save space in a layout.
Font Stretch is known as Font Width
Keyword to numeric mapping
The table below shows the mapping between keyword values and numeric percentages:
| Keyword | Percentage |
|---|---|
ultra-condensed | 50% |
extra-condensed | 62.5% |
condensed | 75% |
semi-condensed | 87.5% |
normal | 100% |
semi-expanded | 112.5% |
expanded | 125% |
extra-expanded | 150% |
ultra-expanded | 200% |