Why Variable Fonts For Flutter Is The Killer 2022 Feature

Flutter at Google IO 2022 seems to have been left out of the cold, as the support of variable fonts is still not finished. But in a few months the new Font Feature improved API will be in Dart UI, and what super design powers will that give us? Read on to find out.

Flutter Variable Font Support

Variable font support in the Flutter rendering engine has just dropped and will appear in the next pre Flutter release in the next few days. Ah AH, hold on. The Dart UI font feature class was for the font feature flags and any int values, but variable fonts requires double values. This is why currently, if you attempt to use variable fonts, specific styling does not appear applied.

So what design superpowers do we get when support for variable fonts is finally in Flutter?

Serif and Sans

Remember why we had a design rule of using serif fonts for headings and titles and sans fonts for body copy? Well, because at certain sizes the extensions to serifs, i.e. tails, were hard to distinguish at lower sizes. Well with variable fonts, notably serif variable fonts, we now have optical sizing where the outline size changes per the font size. For an example, see: