Recently, Nick Sherman talked at Ampersand Conference about a further exciting development in web typography that will help us all: font interpolation. So, what is font interpolation and why should website owners and marketers be excited – aren’t fonts just for designers to drool over?
The current web font situation
Currently on the web we have to load individual font files to make up a page’s design. That includes the body and heading fonts as well as bold and italic, just in case they are used on the page. Loading all these files can make page load slow. While the server searches for your font file, it can display no content (depending on how the site has been developed and if it uses technology such as lazy load). As users become accustomed to high-speed internet, they become increasingly impatient with page load times. 40% of consumers spend less than three seconds waiting for a page to load and so showing a page with no content can be very detrimental.
While you may now think “Let’s just put everything in normal Arial!” that doesn’t necessarily solve the problem. Font weights help with hierarchy, guiding the user through the page as well as making it more interesting to look at. If this text were all set in the same size, weight and colour, you probably would not still be reading it. Using different weights highlights key information, allowing the user to scan and find what they want quickly.
We’ve, therefore, found ourselves in a catch-22 situation: We need to speed up sites while maintaining our hierarchy and retaining the character of our content.
Hello font interpolation!
Font interpolation is the idea of having the two (or more) extremes of a web font in one variable font file. With the extremes known, the specific weight required can be requested through CSS and displayed. Data within the file will then be used to calculate the weight requested.
Visualisation of font interpolation with Superpolator software. Source: https://new.superpolator.com/documentation/
With this technology we can request limitless fonts. The server would be accessing one file and be able to pull multiple variations of it rather than needing separate fonts, as is required currently. With a variable font file containing the regular width as well as the condensed and expanded versions, we could have greater flexibility in the typography of a website. Different widths or weights can be displayed depending on screen width, optimising a site’s legibility for mobile but also allowing us to be bolder and more extravagant on desktop.
What does this mean for marketers?
One file means one server request. One server request means faster page loading – and we’re all up for faster page loading! With added speed sites are likely to become more search engine-friendly. As speed is also a factor in advertisement placement, these could also become more efficient. With a one second page delay meaning a potential 7% drop in conversions, speed is definitely important in the online world.
Static fontsVariable fontsNumber of weights3Virtually infiniteNumber of widths2Virtually infiniteNumber of masters6~4Number of files61Data @ 120 kB/master720 kB480 kBDownload time @ 500 kB/s1.44 sec0.96 secLatency @ 100 ms/file0.6 sec0.1 secTotal load time2.04 sec1.06 sec
Source https://alistapart.com/blog/post/variable-fonts-for-responsive-design
Okay, I’m convinced. How do I get this?
This technology will take a bit of time to be finalised and become mainstream. It will require a new font file type and include the joys of browser support (we’re looking at you, IE), so we’re going to have to be patient.
Another aspect is cost. There are a lot of web fonts out there at the moment – not all of them good, but there are plenty with suitable features for us to play with. It will take some great type designers to create these new fonts and they will probably ask to be paid for it, so it will be our job as marketers to justify it. Page load is a key metric and the small investment in a font will not help only the designers, but also help marketers to do good work.