Variable CSS font features in practice
Modern variable fonts offer powerful capabilities for web typography, allowing adjustments to font weight, slant, and other attributes through CSS without bloating page size excessively. In this guide, which I wrote as a first post on my blog, I’ll demonstrate how I styled text on this website using these capabilities, including
- Setting up and controlling variable font axes
- Working with OpenType font features
- Creating efficient font subsets
- Implementing automatic feature switching based on font parameters
Original image: Typeset by Paul Hudson, Creative Commons license: CC-BY-2.0
I selected Recursive as the font family for my website, and we’ll use it throughout this guide. It is an open source variable font available under the License: OFL-1.1. It saved me a lot of headache about selecting a matching font for headings and for code, since all is included in a single font family.
You can play around with the settings below to get a feel for the effect. You can also edit the text if you want, but I selected the most interesting characters already.