In June, Bluestep took a trip to the Birmingham Design Festival. We learnt loads and it was a great place to get our creative juices flowing.
One thing we got to know more about is Variable Fonts and our Web Developer, Alex, is on hand to give us the low-down.
What are Variable Fonts?
Variable Fonts are a new technology that I learnt about at the Birmingham Design Festival in early June, thanks to a talk by Sahar Afshar. The main idea and benefit behind a Variable Font is that all the weight and italic options are included in a single font file, as opposed to regular fonts requiring separate files for each combination of weight and italics.
Take Proxima Nova, for instance, the font used by the Bluestep website. Typekit has 48 available fonts for Proxima Nova, which include every possible combination of 3 width options, 2 italic options and 8 weight options. These fonts range from Proxima Nova Thin to Proxima Nova Extra Condensed Black Italic (I think you can get one of these from Starbucks) and every other combination in-between. We only use 2 of these fonts on the website currently, but if we wanted to get a bit more adventurous and use more of those options, that’s an extra file that the website needs to load for each font that we decide to add.
However, if there was a Variable Proxima Nova font (which doesn’t exist sadly ☹) we’d be able to have all 48 options readily available with the website only needing to load a single font file. Additionally, due to the nature of Variable Fonts, we could go beyond that 48 and potentially have infinite possibilities.
Instead of multiple files for each combination of weight, width, italics etc., Variable Fonts utilise axes to manipulate these properties with more granularity.
Take the Variable Font Acumin Variable Concept for example. Acumin has 3 axes, Weight, Width and Slant, each of which can be changed independently of one another. The Weight axis ranges from 100-900, Width ranges from 50-115 and Slant range from 0-12. Even if these ranges are only looked at as going up in ones, that’s still 624,000 possible variations. Values can also be set as decimals in some cases, which technically allows infinite variations. Infinite options in 1 file versus Proxima Nova’s 48 options in 48 files.
As mentioned earlier, Variable Fonts are particularly interesting to me as a developer as it means that we only need to load one font that we can manipulate on the fly, as opposed to needing to pick and choose which weights are the most important. Ultimately, this means a lot more options for us as developers and a (slightly) faster website for the user.
Variable Fonts aren’t just restricted to web development. Adobe Creative Cloud 2018 released in October 2017, and with it came Variable Font support in both Illustrator and Photoshop, meaning even more possibilities for Graphic Designers.
The Future of Fonts
Soon, Variable Fonts will likely be used all over the web, whether it’s for the vast design possibilities or simply getting a boost to website speed.
There are already so many Variable Fonts out in the wild, wild web, some of my favourite sites for previewing them are V Fonts and Axis Praxis. You’ll notice that some offer less than 3 axes, while others offer a lot more. Some of which get really wacky.
What’s beyond Variable Fonts? Well, that would be Colour Fonts. We’re not quite at the point where Colour Fonts are ready to be widely used (Google Chrome doesn’t even support it yet!), but as with Variable Fonts, the prospects are very exciting!
We like to stay ahead of the game and pride ourselves in producing some great work. If you would like to chat design or digital, get in touch today!