Using variable fonts
A basic, self-contained example that uses higher-level variable font-related properties.
This example uses Amstelvar, a a parametric variable font by David Berlow.
This particular example is a simple one, but perhaps a little profound.
Unlike the basic example, which uses a separate file for each variation in font weight or style, this example uses one file for every weight.
- This line has a font weight of 100
- This line has a font weight of 200
- This line has a font weight of 300
- This line has a font weight of 350
- This line has a font weight of 400
- This line has a font weight of 500
- This line has a font weight of 528
- This line has a font weight of 600
- This line has a font weight of 700
- This line has a font weight of 800
- This line has a font weight of 900
Notice that variable fonts mean that we are no longer locked into font-weight increments of 100. We can use any value that falls within the range that the font file supports.
Amstelvar does still require a separate file for italicized text. That's a limitation of Amstelvar, not of variable fonts.
Related specification: CSS Fonts Module Level 4