Variable CSS font features
As the first post on my blog, I decided to write something a bit more practical than “Hello World!” In particular, I’ll show you how I styled the text on this website.
I selected Recursive as the font family for this site, which is an open source font available under the License: OFL-1.1. It is a variable font, which means it defines a number of ‘variation axes’ (parameters) to seamlessly change the shape of the letters. This saved me a lot of headache about selecting a matching font for headings or for code, since all is included in a single font family.
In this post, I’ll explain how I set up and use the variation axes of the font in CSS, how I created a custom subset with OpenType font features, and how I made the font features automatically switch on and off based on the variation axes’ settings.
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.