“Variable fonts allow us
to be more intentional.
They give us the ability
to create a more
compelling experience
that’s tailored to what
the user needs”
Interview
problem of serving web fonts. “One of the
issues has been the amount of data that
has to be downloaded,” Pamental points
out. “So we’re working on an open
standard called Progressive Font
Enrichment, which is based on some work
that Adobe, Monotype and Google have
been doing. The idea is that when you view
a page, the server will dynamically subset
the font to download just the glyphs
needed to render that page. When you
then go to the next page on the website,
it will serve only what wasn’t already
delivered and patch the font file on your
system. The more pages you access, the
more of the font you end up downloading.
Viewing a site will be faster to start with
and get even faster with every subsequentpage view as less and less font data needs
to be served. It’s going to make the
performance question disappear because
no one will ever have to load the whole
font file. That’s a tremendous addition to
our toolkit!”
The solution would reduce the overall
download from around 100kb to 200kb of
font data for a Western language website
to just 10kb to 20kb, while subsequent
loads might only be three or four kilobytes.
It becomes even more significant for
Arabic and Asian sites that typically would
need font files that can weigh in at 2.5MB
or even 20MB for languages like Chinese,
Japanese or Korean. Previously, these sizes
have meant that some sites were simply
not able to use web fonts and better
typography but this could all change.
Initial results look promising and
Pamental is confident that we’ll see some
improvements soon. Couple this new
capability with variable fonts and the
combination could end up having a
significant impact on the design of
Western and non-Western language sites
alike. As Pamental writes in his newsletter:
“After years of promise shackled to
performance constraints, this will be
nothing short of revolutionary.”think that’s what’s going to happen this
time with variable fonts too.”
The design, technical and performance
benefits are clearly a game changer but
in his conference talks, Pamental now
also covers how you can combine variable
fonts with other CSS capabilities like
custom properties, calculations and grid.
“That’s where they’re getting even more
exciting,” he enthuses. “It allows us to
create a whole typographic system that
scales. Instead of having a lot of fixed
breakpoints, we can use maths. It works
really well in design systems. We can
quickly and easily tweak the system by
reassigning a couple of variables. When
we drop a component into a different part
of a layout, for example, we might just
need to change the low and high scaling
values and everything still moves
together. Another example is light modes,
the ability to invert the contrast of the OS
and all applications that support it. When
we set text and background colours and
use custom properties and a media query,
we can invert that colour palette with two
or three lines of variable assignments and
that’s it!”
This technique can improve both
readability and accessibility (for example,
for users who have low vision, light
sensitivity or chronic migraines), which
is another great benefit of incorporating
variable fonts. “They allow us to fine-tune
the typography or put the controls in the
hands of the user to let them fine-tune
it,” Pamental explains. “This is one of the
things I’ve been playing around with more
and more: what kind of controls can we
create that would allow a user to request
greater contrast. A surprisingly high
number of people – around eight per cent
- use some form of high-contrast mode
in Windows when it’s available. That’s a
signal. As a designer I want to make the
system work for everybody but I can’t
possibly know what everybody’s
requirements are, so I want to design the
system to have some flexibility and let
the user select the light mode and the
contrast level, while ensuring that the
design’s integrity stays intact.”
Pamental is also an invited expert on
the W3C Web Fonts Working Group, which
is currently tackling the performance
Phot
o^ FITC^ WebU
nleashedbyB
riande^ Riv
era^ Simon