Wooohooo!! This is great news for web developers! Now we can have a single font that behaves like multiple fonts!!
Why is this important? Well, two of the biggest issues that Developers ( a.k.a. the coolest people you’ll ever meet ) have with webfonts are:
- Font files can be very large and thus, place a strain on the hosting server and site optimization.
- You have to have a separate file for each width and style of that font.
Variable fonts solve that problem by sticking every font style you would need for a particular font into a single, highly optimized file. This means there is only one network request for all weights and styles of a typeface, making the website respond much faster. That’s a BIG DEAL.
This will allow developers to use a much wider range of widths and styles. In the past, we had to refrain from using a variety of different weights to avoid longer site download times. Soon, those days will be but a distant memory. We will not have to worry about performance details any longer and will be able to let creativity guide our font choices.
Variable fonts will also assist in responsive web design. Type will have the power to shrink, grow, and gain or lose weight seamlessly. No need to download a new font for every variation. In other words, variable fonts can programmatically generate the exact variation you need, and will be able to respond on the fly to factors that influence readability — things like viewport size, viewing distance, contrast, ambient light and user preferences. BOOOM GOES THE DYNAMITE!! https://www.youtube.com/watch?v=m_djk1RQ2Ew
What about the bane of every web developer’s existence…the dreaded older browser? And what happens when a browser without support encounters a variable font? The folks who worked on the spec anticipated these issues and built in a basic fallback mechanism: a variable font will work like a regular ol’ font, using the master design for all variations appearing in a web page.
This is something we are REALLY excited about in the Web Cave – and something we’re looking forward to implementing in upcoming projects. This is the future, and it looks oh so sweet!
To check out some examples and learn more from the experts, click the links below!