Variable FontsApril 17, 2017
I want to talk about variable fonts, Yes you heard me correctly. A developer is going to talk about fonts. Right about now the designers I know have got there head in there hands saying “Please don’t”.
What I want to tell you about today is not the design of a font or anything like that but the way we deliver a font to a website is going to change.
Currently the way a font is delivered to a website is in multiple files. So for example you could have a font file for normal weight, a font file for bold weight and a font file for italic styling. 3 files are needed to deliver 3 variations of a certain font.
With so many font files needed, this added to page weight on a website which in turn slows down a site if you have many custom font in use.
Back in September 2016 it was presentated to the world that for the past year the companies of Apple, Google, Microsoft and Adobe have been working together on a new OpenType format called variable font.
Type designers can now use only 1 file to hold all the information needed for a font, This is instead of having multiple files for each different variant on the font. From a web developer point of view this is brilliant, 1 file for 1 font and then you can use any type of styling you wish. Serving less files is always a good thing in modern web development as our quest for speed goes on.
Today you can play with variable fonts here: http://www.axis-praxis.org/
This is already in the development builds of browsers, but is not fully supported as of yet. With Apple, Microsoft, Google and Adobe all working on this there is an expectation that this variable font format will make its way in to the operating systems for Mac and Windows based PC’s. But only time will tell on this.
Variable fonts is still really new but is progressing at a very fast rate, Its worth following this as in web development we could be using this within the next two years.This entry was posted in Web Development. Bookmark the permalink. ← What is this HTTP2 you speak of Washed out colours in Google Chrome →