VARIABLE
FONT
RESOURCESAxis-Praxis
https://www.axis-praxis.org
A great tool for experimenting with a
variety of different variable fonts. The
original variable fonts resource.Variable Fonts
https://v-fonts.com
Variable Fonts offers an extensive list
of currently available variable fonts,
who made them, where to find more
information, download the fonts to
use and licensing options.Font Playground
https://play.typedetail.com/
Another place for experimenting with
variable fonts, Font Playground has
a really fun and unique interface for
users to explore.Variable Fonts Guide
https://developer.mozilla.org/docs/Web/
CSS/CSS_Fonts/Variable_Fonts_Guide
The variable fonts guide by MDN Web
Docs is a really great resource for new
users, with information explaining
how to use variable fonts, the
considerations you need to be aware
of, browser support and fallbacks.We can start to design our typography
to adjust to various inputs, situations or
events, which might let us tweak the font
weight, width, optical size or other axes
to aid in storytelling, achieve improved
readability and legibility in different
situations, environments or on larger or
smaller screens.
By making the most of the interpolated
range of values, we can create fluid
variations along a font axis by using
techniques we may already be familiar
with: CSS animations, CSS transitions or
hooking into various JavaScript events
like viewport resize, scroll position or
even things like the sensor APIs.
This will enable us to better represent
our content on smaller or larger screens.
Whether it’s a projector, laptop, tablet,
watch or mobile, our typography can be
more easily controlled.
We can make the most of technological
advancements in devices, like sound
detection or the sensor APIs to detect
changes in the devices themselves, such
orientation, distance or lighting.
With the growing popularity of
alternative input devices like Google
Home or Alexa, voice recognition is
ehfrplqj#pruh#suhydohqwĝ#Ğ#ĝehlqj#deoh#
to modify the text output of a person’s
voice could, in time, be incredibly
useful for conversational UIs in visually
representing the tone, volume or intent of
a person’s input.
Variable fonts don’t just offer us the
opportunity to make real practical
changes to our typography. We can
now start modifying our typography
as part of our storytelling experiences.
Typically we might animate in parts of
the page as we scroll or draw in lines or
parts of images using SVG. Variable fonts
open up opportunities to create unique
experiences for the projects we are
creating and add a new dimension to our
content and stories in ways that would
have required complex technologies.
Recognising the environments our
users are experiencing will enable
web designers and developers to move
towards better reading experiences for
our content. We can more effectively
create sufficient contrast, sizing
and legibility, based on the users’
environment or current experience. But
they also present unique opportunities
for creativity and exploration in how our
content is represented.
It is still early days with variable fonts;
widespread adoption is yet to take place
but this is our chance as designers and
developers to experiment, discover and
shape the direction of variable fonts. We
could continue to use them the same way
we use web fonts now but with some
performance benefits. Or, we could do
something totally new and change the
way we design and develop our
typography online.Variable fonts