we're gonna be talking about responsive
typography with variable fonts and what
I mean by responsive typography isn't
like traditional responsive web design
where you move a browser and stuff
change
more about how we can make how
typography respond to various inputs
different API sensors that kind of thing
but first what I'll do is explain what
variable fonts are before I do that my
name is Mandy you can find me on Twitter
mandy underscore Cerf you have any
questions things don't make sense my
dams are open
most of my demos are up on koi pond at
Mandy Michael so you can go and check
those out later they're in a collection
this is my dog jelly you will find out
why this is important why I had to tell
you that my dog's name is jello because
if I didn't things would get very
confusing later so I wanted to explain
how I fell into playing with variable
fonts a couple of years ago I started
making text effects with HTML and CSS
and I came across variable fonts as a
result of making text effects and it
became clear to me very quickly that
variable fonts offer us some unique
opportunities that standard fonts have
never been able to provide us and the
reason for that is that a variable fund
is one font file that acts like multiple
fonts and what I mean by that is at the
moment when you're loading fonts into
your site say you have I don't know six
font weights you would have these as
separate individual files and you would
load them in separately with a variable
fund all of that information exists
within one file and the way that this is
accomplished comes down to how the font
itself is made so a variable font can
contain one or more axes and each of
these axes represents different
variations of extremes for a different
style so for example a weight axis might
range from a light weight to a really
heavy or black way now you can still
have all of the standard stuff in
between that you're used to like regular
bold that kind of thing they're known as
named instances
you can also interpolate between these
values which means you have access to
all of the values in between as well
this means that we can animate between
the styles which is something that we've
not been able to do with fonts before it
would be really janky because you
couldn't get those smooth transitions
but we're not just limited to a single
axis at a time a variable function
contains thousands of axes and you can
interpolate between the combinations of
the axes as well so whether it's weight
or wear like standard stuff like that or
if it's something a little bit different
this font is called de cobre it's by
David Burt furlough it's an experimental
variable fund it's one of my favorites
because it has a lot of creative axes
that you can play with
now I'm going to show you some examples
with Jack over a bit later but before I
do that I wanted to get the practical
implementation stuff out of the way that
people always ask first thing browser
support you can totally use them now
unless you have to support Internet
Explorer if you do have to support
Internet Explorer you can use CSS
feature detection to fall back to a
standard font so you know that there are
ways around it the only caveat to these
green ticks is that for Firefox you need
to have high sierra and above on a Mac
for example because Firefox relies on
the operating system to render the
variable fun chrome does not so you know
I see errors a couple of operating
systems ago so that should be less of a
problem but it does require more modern
operating systems to render the
specification
when it comes to using variable fonts
it's the same way that we use fonts now
we use font face the main difference is
how we render sorry how we define
descriptors oh sorry the variations for
descriptors like font weight font
stretch and font style so with a
standard font say you had a regular
weight and a bold weight you would do
one font face block for regular and one
font face work for bold and you would
keep doing this until you had all of the
the styles that you need with a variable
font you just have to define a range so
in this case 200 to 700 and then when
you reference it in your CSS you can
pick any number from 300 to 700
including decimal places so 658 point
seven five six is a random number but
you can pick anything
now this is really really good for
something like wait because we have a
CSS property for it this is known as a
registered access and all that means is
it's defined in the specification there
are five registered axes at the moment
weight with slant italic and optical
size and they're all matched to
preexisting
CSS properties
if you wanted to do something custom
like deco var which I just showed you we
need a new CSS property and that's
called font variation settings
now font variation settings will allow
us to define as many registered and
custom axes as we need and the way that
you use them is you define a four
character string which in the case of
custom axes is determined by whoever
made the font so in this case me which
is why it says jelly and then you give
it a associated number value and you can
just separate these by a comma and add
as many as you like you can use a
registered axis in font variation
settings for something like weight it is
w ght however I would recommend that you
don't there are some bugs in front
variation settings but the main reason
is that it's just harder we already know
how to use things like font weight and
font style and if you're doing fancy
stuff font stretch on optical size so
don't change what you're doing already
just to use a different property keep
everything the same and then when it's
custom use font variation settings for
that
the army it's pretty much the same as
what we're doing now with a you know a
couple of slight changes when it comes
to fonts on the web there's a whole talk
in that for performance on its own
or a variable font there's a couple of
things about them that does make them
quite good for performance but they're
still fun so you still need to have a
good font performance strategy things
like font display subsetting compression
that kind of stuff there's two things
that I wanted to mention about variable
fonts though that a good for performance
they're kind of unique to the fact that
they're variable fonts and the first one
is reducing the number of font requests
so one of the ways that we maintain good
fun performance is trying to not request
as many fonts to download
at the moment when we think about
reducing the number of front requests
we'd weigh up the cost of design over
the cost of performance and we'd have to
justify the cost of adding new fonts
before we add any more styles in because
of the impact that it would have on the
performance of the site but with a
variable fund because all of the data
can exist within one file simply by
using a variable font you reduce the
number of front requests just because
that's what it does
so not only do we reduce the front
request but we also gain the benefit of
all of the interpolated bays as well
giving us more design opportunity of
course the problem then becomes if all
of the data is in one file what does
that do to file size people like it must
be huge right
my answer to this is not necessarily in
my experience that's my terms and
conditions variable fonts are either on
par or better than the combination of
your standard font weights for example
that you might be loading in your site
just generally and an example of this is
source sans Pro so this is the file
sizes for the wofe two versions
a single weight of source and SPRO is
111 kilobytes the variable point is 112
the variable font has that single weight
plus all the other weights plus all of
the interpolated values so for an extra
kilobyte you get like a significant
improvement in design opportunities now
sauce ants is a big font it has lots of
language support so I would subset this
and standard fonts do subset a little
bit better than variable fonts although
not significantly but even if you had to
weights a regular and a bold which is
pretty common the variable font is still
smaller than the two standard weights
combined so you can get some good
performance benefits by switching to a
variable font
but this is obviously going to depend on
the fonts you use your website stars
what you're using so like don't quote me
on this and come back to me later and be
like Mandy you said that my performance
would be better if I use variable fun I
can't tell you that in every scenario
but there's an opportunity there that it
might be better
so at this point what I want to to get
into is the fun part this is a bit that
I like in my talk we've done all of the
sort of serious housekeeping if
performance can be better even let's
just assume our performance doesn't
change but all of a sudden we have a lot
more options for our styles in our fonts
much more flexible choices this means
that we can start to shift our focus we
can experiment with creating better
experiences for the people using our
websites and creativity can determine
our choices we don't have to start to
trade-off design for performance we can
have both
this is something we don't often get
right always like oh no you can't have
an accessible website and a beautiful
website or you can't have a performant
website and a beautiful website I'm
telling you that you can variable fonts
will allow you to do that but also just
generally you can like if someone tells
you that they're wrong so for example
this uses 13 different font weights many
of which don't exist in the standard
font so you can see that we kind of
start to gain some more flexibility
designs which would have previously been
a very heavy burden on performance and
now completely possible
this means that the tone the intent the
rhythm the meaning of our words can be
changed and they can be represented more
effectively with less worry over the
impact of loading in too many font
weights this is what I refer to as jello
Epsom and I use it quite extensively
it's pretty much just words that rhyme
with jello and a little bit of story
about about him so you get to learn
about him as you go speaking of jello we
can embrace the learnings of print
design right when we start to do this we
can combine variable fonts with things
like CSS grid and blend modes and shapes
and clip paths and textures and all of
those great things and we can represent
our content in more interesting and more
engaging ways but unlike print design we
can embrace the interactivity and the
flexibility of the web because variable
fonts can have the interpolated range of
values we can create animations or
transitions and we can do that with
techniques that were probably already
familiar with like this one
this is a h1 and some CSS it's editable
selectable searchable accessible via a
screen reader you can copy and paste it
and it only requires a little bit of CSS
to make the actual animation work
previously if we were going to do
something like this it would have to be
SVG or canvas or something like that the
CSS to do that is this I have a font
family depo bar by David Bailey David
did does he's amazing he deserves all
the credit in the world for this awesome
font we have an animation property runs
infinitely keyframe I've just called it
grow it's got two states we have two
axes for this effect to work one's
called inline and one's called skeleton
worm David named them I don't know
skeleton worms starts at zero and then
goes to a thousand in the next keyframe
and then it just loops back round and
literally that's it I added a bit of
extra CSS for
texts y'all bought eats a background
image and some text shadows the
heavy-lifting is really done by the font
here
David kind of did all the work for me
and I just had to swoop in and add a bit
of CSS and then share out this awesome
demo on Twitter and wait for people to
go mm-hmm which they did and I was very
excited about but I think this is really
amazing doing this with text is
something we've never been able to do
before and there's lots of stuff that
you can do with text and variable fonts
with just a little bit of CSS maybe a
bit of JavaScript this is a handwriting
font by a foundry called underwear who
are doing really awesome stuff with
handwriting you should check them out
when I started making text effects
originally I would layer font a lot but
the problem with that is that you're
loading multiple fonts in just to get
one effect but with variable fonts it's
only one font and you can layer things
to create the effects in a very similar
way
you can do hovers and transitions with
your weights or your wits and which like
I said earlier is something that we
weren't able to do before
um I'm not really sure how to describe
this I just think it's really cool it's
called wind VF every time I do this talk
I'm like I'm gonna figure out a good use
for this and I still still haven't yet
you can create weird things like this
this is actually a Google font from the
v2 version of the Google Fonts API they
have variable fonts there's about a
dozen of them so you can experiment with
them with google fonts as well I have a
blog called variable fonts Deb that has
a tutorial on how to make this so you
can go check that out if you want to
have a base
or you can do something like this this
is deaf over again and this is my
favorite demo and the reason that I love
it is because I love how the text shadow
disappears with the text it's very very
beautiful and I just like to look at it
for a long time when I first made it
chrome did not like it at all
originally it would make my laptop get
very warm but they have fixed the
performance of it now so it doesn't get
as hot anymore which is nice as hot I
said yeah a little bit
so this demo this is marshmallow my
dragon
away from that mic so when I started
making text effects
I eventually got bored of the fact that
they were just there so I started
experimenting with alternate inputs if
this doesn't work I have a backup of a
button but that's boring so I'm going to
say a word
to marshmallowy and he is going to
breathe fire in that word using my
awesome variable fun
byah
so this uses Dec over again it's like a
bunch of axes and what I love about this
demo in particular is that I always
wanted to create via text but I could
never get it to look like fire so
instead what I did is I made the rest of
it look like the fire text I could make
but I like how it kind of the text
itself becomes part of the illustration
and the interactivity and although you
can do this with canvas and SVG we've
never really been able to tie our actual
content into designs it's always kind of
added on as a feet is like a layer and
it doesn't blend as well into the
background but with variable fonts you
can start to tie those things together a
lot more effectively Thank You
marshmallow that was spectacular
so it's not just that these are
beautiful or cool effects right what
they demonstrate is that as developers
and designers we can control the font
itself and that means that variable
frontal our typography on the web to
adapt to the flexible nature of our
screens our environments and our devices
this means we can also make the most of
things like dark mode for example to
change the way our fonts are represented
in different color schemes or
environments so for example we could
change the axis of one of our fonts in
prefers color scheme media query
and that could give us something like
this
it oozes because it's dark mode right
I made this at Halloween and thought it
was hilarious I still think it's
hilarious so this is a bit of a silly
example but more practically we can
modify the contrast and the styles of
our text to ensure better legibility
when we think about color contrast and
dark modes and things like that
we're usually thinking specifically
about color and that's obviously
important but the colors that we use can
affect the way our text is read and how
legible it is so you might actually need
to change the weight a little bit or the
width a little bit or the optical sizing
to make it more legible in a darker
interface but also if you think about
this from a user preference perspective
if a variable font is available to
developers and designers it also means
it's available to our users so for those
people that need to make custom
stylesheets for accessibility reasons it
means that they can customize the way
the fonts are rendered to suit their
specific needs and that's very exciting
to me I like the idea that we can give
our users options for their own
preferences and I know there's a
variable font being developed at the
moment that helps people with dyslexia
to change the way that let how far
letters are apart the shapes of them so
that they can read content better and
this is very important for critical
interfaces or public websites like
government hospitals those kinds of
things so rather than designing for I
guess the average you can give people
the opportunity to customize it to their
needs but also it means that we can
change our design and our typography to
adjust to things like screen width that
might allow us to tweak font way with
Optical size or other axes to be more
readable on larger or smaller screens
so whether viewport is wide we might
have more detail or when the viewport is
smaller you might want it to be heavier
so it's easier to read or I mean if you
want things to fit in a confined space
like a box you might be able to do that
too I'm sure you can think of some good
examples of where that might be
applicable another example is when you
have designs which are designed to fit
as a certain breakpoint in this case i'm
reducing the width of the heading as a
viewport gets smaller so it doesn't wrap
onto a new line this means i can
maintain the integrity of my design and
i can determine when the text is going
to wrap or stack on new lines now I do
this with a bit of JavaScript and I want
to show you how it works because once
you have it you can do a lot of cool
things so we need a couple of things the
access range so in this case 200 to 900
font weight and the event range so
viewport for this 320 to 1440
we get our current viewport with window
don't in a wit or something
then we need to convert that to a
decimal so we take the current size we
minus the minimum we divide that by the
maximum minus the minimum size and that
will give us our decimal
we type that decimal place we multiply
it by the minimum weight minus the
maximum weight and then we add the
maximum weight on
GSS however you want to do it I'm using
CSS custom properties because they're
amazing whack it all in a function it
looks something like this don't worry
about the code I will share my slides
later there's also it's all in fun
github as well so you can just copy it
from there and crouppen once you have
this put it in an event listener for
resize in this case and that's how you
make it adjust to the viewport now as I
said you can pass any event or access
range into this so you could pass in
scroll events this uses Chi by I know
type clue took me longer to figure out
what word to put in this than it did for
me to actually write the code but bloop
I think nailed it you can tie it into
device orientation it's funny that my
phone is cracked in this but that wasn't
intentional
it's actually way worse now which is a
bit embarrassing or this one I love this
one I made this last year this changes
the font weight and a transform of each
individual letter
there's this one so now this wasn't
coming up very nice on this projector
but I'll see what it looks like
yeah so this one I might tweet the link
out so you can see it so it looks better
it's cold whoa
bye scribble tone and it uses a mouse
position to change the angles and the
orientation of the axes in such a cool
font where's my mouse there it is
so we've also got one like this this
uses the Web Audio API and it listens to
the sound of my voice what I'm going to
do before I explain why this is cool is
get all of you to go whoo yay so why I
think this is cool aside from the fact
that I like people to woo at me when I'm
onstage is that if you think about
speech-to-text api it's like or Google
home Alexa those kinds of things when
they convert our speech into text you
kind of lose the tone in the intent of
your words but if we could combine
variable fonts with Web Audio and other
technologies we could start to represent
what we're saying in much more
meaningful ways so we don't lose that
tone and intent so the messages that we
send to people through these speech
api's can actually convey what we want
rather than people may be
misinterpreting what we're saying
but I think that's super cool I'm just
going to stop that so it doesn't keep
running in the background um so this one
I'll just get my prop here my broken
phone this one uses the ambient light
sensor so I just put the light up to my
laptop and this is the same technology
that causes your light your phone to dim
in low-light environments and what is
really cool about this is that if you
think about the fact that we don't
always sit inside an office with perfect
lighting sometimes people were using
tablets and moving indoors to outdoors
you might want to change the way your
text is rendered to be more readable for
critical interfaces you might want to
make sure that it's whatever situation
they're in they can read what you want
them to see so sometimes it might need
to be heavier rather than really thin
and this one's called tiny and I just
think it's a good demonstration of the
effect so you can make things more
usable and more accessible with these
kinds of technologies or
because this is me you can also create
really interesting storytelling this
one's called blooming GX by type Achuar
Arthur who makes this fondant makes the
most incredible variable funds you'll
ever see in your life it actually
renders better on firefox but the
ambient light sensor doesn't work in
firefox so I couldn't couldn't show you
but there's a lot of opportunity here
for creating experiences which allow
users to to experience our website based
on their specific circumstance and their
specific experience and I think that's
really exciting like we don't have to
keep designing things that work a
specific way for every person that ever
visits our website we can create
something that's just for them in the
moment that they're in at the time that
they visit our sites
and finally this Arthur made a jelly
font so that you can pop jello in font
form this is probably the happiest I've
ever been in my entire life that my dog
now has a font
absolutely delightful so it's only
because variable fonts give us control
over each of these elements that we can
fine-tune font characteristics to
maximize things like legibility
readability and accessibility of our
website text and I know that some of
these examples might seem trivial but
what they are are possibilities we're
demonstrating the options that you have
variable fonts are still very new and
this is a level of control over our
fonts that are unprecedented we have
never been able to do this with actual
text
but mean this is an exciting place to be
in on the web we have technology
developing all the time new sensors new
API is new CSS new JavaScript and we
have more opportunities than ever to
combine create and present content on
the web in more creative more meaningful
more purposeful and do so in a more
performant and accessible way there's no
reason that we can't have all of these
things and build amazing experiences for
our users so at the very least you could
create a more performant website just by
using a variable fun that's cool it's
also you know a little bit boring
but at best we can do all of these cool
amazing things and start to create
websites that are not just for everyone
to feel the same experience but to give
them something that suits their needs in
the moment that they're in right now and
I think that's really exciting and
that's why I get excited about the
future of web typography with variable
funds if you want variable fonts B -
fonts comm is the best resource my blog
variable fonts dev hasn't been updated
for a while but I will be doing that
again soon and these are some great
people to follow you on twitter thank
you very much
[Applause]