What Are Variable Fonts In Typography?
We’ve seen the rise in responsive design and with the importance of mobile-first indexing beginning to grow, websites are going to need to ensure that they are adapting to every device they are being viewed on. Brands and web giants across the world are bringing out their own smartphones in order to further compete in the market – but could a brand be impacted by the way their font looks?
Quite simply, fonts have a serious issue. What might look great on your Mac could look blocky on a Nexus 6 or bloated on a Chromebook – even if the font style and size is exactly the same across each and every device.
This is where variable fonts come in. Variable fonts are a type of typography which can adapt in real-time in order to suit the device that they are being shown on, making the entire reading experience as fluid as possible, ensuring that a website’s content looks great no matter the platform it is being shown on. As well as fluidity, variable fonts can also help to save space on a website, as multiple fonts can be effectively stored in a single file. While the concept of these variable fonts has been around for a while, technology is only just beginning to catch up in order to make these a reality. Here, we’re taking a closer look at just how variable fonts are set to be implemented in order to solve the typography problem.
Whether a developer, a lover of typography, a content writer, or a web designer, variable fonts are set to make a huge impact. But how big exactly? Well four of the world’s largest platforms for typography, Apple, Google, Microsoft, and Adobe, are working on how to bring these variable fonts into the limelight and even unveiled a number of variable fonts to the public.
Tim Brown, head of typography for Adobe Typekit and Adobe Type, said: “For hundreds of years we made things that were static. Now we have to design things that have a typographer’s brain built in so they can respond to different conditions and still look good.”
How Do Normal Fonts Work?
Regular fonts rely on individual files for each style. For example, Arial is an individual file. Bold is an individual file. Bold Italic is an individual file. The list goes on. These font files all comprise of a font family. In order for each style to render appropriately on a webpage, app, other devices, each file must be uploaded. The more files that are added to a webpage, the more bandwidth is being used, further slowing down the site which, as we already know, is a big problem when it comes to impressing Google with your site speed.
How Do Variable Fonts Work?
A variable font comprises of a font family which is packaged into one individual file, as the font style is defined by using one or more axes. This is where things get a little complicated and jargon-heavy but bear with us.
If, for example, a designer wants to use a typeface and vary the weight of this typeface across the content, then a variable font is beneficial. At one end of the axis, a certain typeface can be defined, and at the other end, a different version of the typeface can also be defined – for example, Franklin Gothic Book can be at one end of the axis and Franklin Gothic Medium Cond can be at the other end. This is all stored in a single file. The designer can then access any point along this axis in order to determine exactly which font style they want to use, simply and easily, this is perfect for your website as it allows fonts to be changed easily without completely rewriting the code, allowing for easy customisation.
The same thing can be attributed to other design parameters in order to ensure that any content displayed is ideal for the application or device which is used. These are not defined by individual files but are instead defined by how much they differ between each extreme, stored within one file. This allows a variable font file to remain up to 70 per cent smaller than a traditional font family file.
Variable Font Applications
The extent of the application of variable fonts is almost endless. In developing countries where even 2G is a luxury, variable fonts can help to save time and money, by helping to dramatically reduce loading times across web pages and apps, on all devices. In countries who regularly use the internet across a multitude of devices, consumers want consistency, and the technology behind variable fonts will help to ensure that this occurs.
Complexities Of Variable Fonts
As with any new technology, the integration of variable fonts is likely to be complex. For fonts to be able to show up anywhere, rendering engines will need to be developed. These are incredibly complex software and take a significant amount of time to develop and test. While rendering engines are in the process of being developed, it could be a long time before they are released and available on the market. Alongside the rendering engines, browsers and design software will also need to be improved in order to ensure that the variable fonts can be put in place effectively.
Variable fonts have been spoken about for a number of years, but their full integration could be complex and time-consuming. Nevertheless, the increased need for a seamless experience and exceptionally fast site which is compatible on all devices is certain to see variable fonts rise in importance.
To find out more about variable fonts, or SEO focused design strategies, get in touch with a member of our experienced team on 0800 088 6000.