[Music]
hello excellent I do have a loud voice
so it probably doesn't really matter if
I have a microphone or not but anyway
this is probably better so that was a
really great introduction so I can just
skip all the stuff about me this is last
year I attended jazz con for ages so
it's really cool to actually be standing
on stage this time but what I'm gonna do
is jump right in and tell you about the
talk today I'm going to talk about
variable fonts we're gonna do a quick
explanation of what they are for
everyone that doesn't know I will very
very briefly touch on performance and
then we'll just look at some ways that
you can implement them to do some
practical things but my favorite demos
are the ones that are a bit fun so
there's quite a few of those so what's
important to know is that I'm a
developer I love to design that looks
really terrible but oh well hopefully oh
wow it looks so pixelated that's so sad
okay well I guess we'll just have to
live with that so I started creating
text effects like a couple of years ago
and during my experiments I started
playing with variable fonts and it
became really clear to me very quickly
that they offer a lot of unique
opportunities that standard fonts just
can't provide us so the reason for that
is that mobile fonts are basically one
font file that acts like multiple fonts
and that's basically the crux of what
they are and what that means is that
where we might have normally had maybe
six different font styles as separate
individual files you can now have all of
that information in the one file instead
that looks not too bad so that's good
the way this is achieved all comes down
to the way that the font itself is
created so a variable font can have one
or more
maxi's and what they do is provide
different variations between different
extremes so in this case we have a light
- a bold weight
now along that axis you can have named
instances like regular and bold which is
things that we're used to seeing in our
code on the web but you also gain the
ability to interpolate between those
values and this allows for intermediate
designs providing much finer control
over the font itself so along with those
standard values you can have everything
in between as well like I don't know 207
and that includes decimal places and
because the axis is interpolated it
means that we can animate between the
values creating really smooth
transitions between the variations but
we're not just limited to a single axis
at a time a variable font can contain
thousands of axes and what you get out
of this is the interpolation isn't just
applied to one axis at a time it's
applied to the combinations of those
axes as well
so if you wanted to have a wide heavy
font or a really narrow thin font you
can have that all within the one file so
in essence a variable font gives us a
single file with a greater amount of
variation and a significant increase in
style choices and they don't just have
to be standard things like font weight
or width it can be something totally
different or a little bit weird like
deco bar this is probably my favorite
font it's by a designer called David
bellow it's the first one that I ever
played with and it has a lot of
different creative axes in it that you
can do awesome things with then we'll
have a look at some demos later now the
way that we use variable fonts is really
similar to how we would normally use
fonts on the web for the most part we
set it up exactly the same way as we
normally would in our CSS using font
face the main difference is how we
define variations for descriptors like
font weight font stretch and font style
so in this example
might have previously set a font face
block for the light version and then we
do another one for the bold version and
so on until we'd hit all of our styles
but with variable fonts you don't need
to do that you can simply define a range
for the font weight so in this case I'm
going to hundred to 700 and then from
here when we reference it in our CSS we
do it exactly the same way that we
normally would but instead of being
limited to values like bold or 700 you
can pick any number between 200 and 700
like 658 now this is really really good
for something like weight because we've
already got a CSS property that we can
use in the land of variable fonts this
is known as a registered axis and all
that means is that it's been
standardized in the spec at the moment
there are five registered axes weight
with slant italic and optical sized and
they're all matched to preexisting CSS
properties but if you want to use
something more custom like the deck of
our examples we're going to need a new
CSS property and that's called font
variation settings now this is an
example of a font that I have invented
called my jello font jello is the name
of my dog he does feature in this
presentation so look out he's very cute
and in font variation settings you can
define as many registered or custom axes
as you want so here I have two custom
axes one is called jello and one is
called fellow and they both have an
Associated number value custom access
codes are defined by the font creator
inside the font and they're always four
characters whereas a registered axis
that's defined in the spec now as I said
you can use registered axes in front
variation settings however it is
strongly recommended that you use their
map CSS property instead so we like font
weight and the reason for this is it's
not really this is kind of like a backup
if the axis doesn't exist because
there's a lot of custom stuff but to be
honest it's way easier to manage your
typography if you use the map properties
when you can anyway and I'm sure people
one
about browser support it's actually
really really good
ie doesn't support it but that's not
unexpected they're not developing that
anymore
so you know it's fair the only caveat to
this browser support is you do need more
modern operating systems so on Mac I
believe it's high sierra some of the
browser's rely on the operating system
versions in order to for it to render if
you are worried about browser support
and you have to support ie still which a
lot of us do you can use the CSS feature
detection to detect for support of font
variation settings and then you can fall
back to a standard font if variable
fonts are not supported so there are
options there for us if we need to
support it in browsers that don't
currently support variable fonts but to
be honest it's pretty good and you're
probably going to get away with it I'm
using them for most use cases so as I
said earlier I did want to briefly talk
about performance because it's a
question people often ask there's a
whole lot of stuff around web font
performance that can impact this I'm not
gonna go into it because that's like 40
minutes of a talk on its own but
essentially everything that you apply to
web fonts on the web now also apply to
variable fonts but there are a couple of
things that I wanted to specifically
mention because I get asked about it a
lot the first one is the number of font
requests and the second one is font file
size so often when we think about
reducing the number of font requests to
improve our font performance it means
that we would plan our typography
choices and we'd weigh up the cost of
design over the cost of performance and
this is why we have that rule where you
can only have like three fonts in your
website that's an employee's limitation
because of things like performance but
because variable fonts can contain all
that information in one file that means
we've immediately reduced the number of
font requests simply by using a variable
font however if all of that information
now exists in one file instead of three
what's that going to do to file size
so that brings me to file sizes you'd be
right in assuming that a variable phone
is going to be larger than a standard
font typically not always but typically
so I want to give you a bit of a
comparison I'm gonna use source sans Pro
which is on github
the single weight of source sans Pro is
approximately two hundred and thirty
four kilobytes it varies a little bit
depending on the style but about that in
the OTF file version now if we use a
more efficient front weight format like
wofe two that will drop down to about
one hundred and eleven kilobytes that
still seems like a lot but keep in mind
that source hands have like lots of
language characters and stuff in it so
you can subset this to make them even
smaller I'm pretty sure when I subsetted
this to like English characters it came
down to sixteen so that is always an
option now the variable phone the ODF is
very large it's four hundred and five
kilobytes but the wolf 2 is only a
hundred and twelve which is only one
kilobyte more than a single weight and I
get a lot more options with that so to
me in this case if you're using
efficient font formats you get a lot
more design opportunity with very
minimal impact to performance but as I
alluded to this is obviously going to
depend on a font a font basis it's not
always going to be better to use a
variable font it's not always going to
be better to use a standard font so you
do need to do your research and check
this stuff out beforehand if anyone
wants to talk about parable font
performance come see me afterwards I
haven't done a presentation on it before
so we can have beautiful in-depth
discussions about it
so we talked about browser support we
kind of know what they are hopefully
talk about a little bit about
performance and how we can use them in
our CSS we're all across that with that
in mind now we can start to shift our
focus we no longer need to really trade
off design for performance in my opinion
variable fonts are a really great way to
move past that and we gained much more
flexibility in our design opportunities
designs which would have previously been
a really
burden on performance or impossible
because of technical limitations like
the font weights or whatever not
existing
they're now completely possible and we
can start to forget about a lot of the
perceived limitations and figure out how
we can use this technology to create
better or more interesting experiences
for our users and the tone and the
intent of our words can be more
effectively represented with less worry
over the impacts of loading in too many
font weights and more importantly and
this kind of goes towards the first
presentation is that we can start to
embrace the learnings and the growth of
print design I am gonna add here
the reason I'm not a designer is because
of stuff like this it's really ugly but
it's so cute so I've left it in that's
my dog's Instagram too by the way should
follow him he's very cute well unlike
print design right we can benefit from
the flexibility and the interactive
nature of the web because variable fonts
can have an interpolated range of values
we can create animations or transitions
with the text itself without relying on
things like SVG or canvas or you know
complex JavaScript stuff and we can
achieve these effects using techniques
we might already be familiar with like
CSS animations transitions or JavaScript
events like viewport resize scroll
position sensor API that kind of stuff
so what we gonna do now is we're gonna
look at how we can animate and interact
with variable fonts to create things
that are practical to use but also a
little bit fun and we're going to start
with that grass effect that I just
showed you so the grass or grow effect I
use a font called deco var which I
showed you earlier I'm going to use two
of its axes one is called inline and one
is called skeleton worm so this is what
inline looks like on its own it's kind
of like a hedge it's pretty nice I put
my clicker down I should've done that oh
yeah and this one is skeleton worm so we
add its maximum value of a thousand it's
like little novel things now when you
combine these two
that's how we get the leaves from the
effect so once we've set up that base
CSS with the font family and our two
axes we can create our animation now I'm
just going to use a keyframe animation
it's got starts at zero we set both
inline and skeleton worm to their
maximum values of a thousand at 50% we
set skeleton went back to zero and then
it's just going to loop back round and
what this will do is we'll start
expanded it'll disappear and then it'll
come back out again we add the animation
to our h1 it runs infinitely it's called
grow four seconds and that's it that's
how I made that all I did was add a
little bit of extra CSS for texture it's
a couple of tax shadows and a background
image for the most part the heavy
lifting is done by the font I'm a bit of
a lazy developer the least I can write
the better and variable fonts make this
stuff so easy because they've already
done all of the work for you in the font
itself so with just a little bit of CSS
you can make all sorts of things you can
do writing text this is a font by
underwear this one's Dec over again this
uses blend modes this is a simple one
using a hover state with transition
changing the weight as you hover over it
it's called gingham I don't really know
how to describe this one but it's cool
this is my favorite demo and the reason
that I love this demo it's a daiquiri
bar again daiquiri bar is like the best
font David bellow is the best what I
love about this is if you have a look at
it it's got a really long text shadow
applied to it but what it demonstrates
is that as you modify the variable font
the text shadow disappears with it
because we're actually changing the font
itself we're not just applying effects
over the top of it and I think that is a
really beautiful and perfect
demonstration of what makes variable
fonts so different but it's not just
that they're beautiful or they're cool
or any of that kind of stuff
what they demonstrate is that as
developers and designers we can control
the font itself and that means that
variable fonts allowed typography on the
web to adapt to the flexible nature of
our screens our environments and our
devices and there's currently a lot of
work being done with CSS media queries
the level 5 spec it's in draft at the
moment but it aims to give us control
over our designs based on environments
like contrast and color schemes and even
though it's in draft stages there's one
which I'm sure some of you know about
which we can play with called prefers
color scheme and dark mode I'm going to
show you a really cool example I've just
talked it up I hope you still think it's
cool anyway what I've got here I'm using
a font called Qi it's by owner type code
it's got a axis called temp I'm gonna
set that at 0 to start with mounting a
transition so you can see it animate for
demo purposes but then we use a media
query of prefer color scheme and we
check for dark and if it's in dark mode
I'm gonna change the access to a
thousand this is what it looks like
so as you switch to dark it oozes cuz
it's dark right and when it goes back to
light it goes back to the normal state
that looks so bad on that screen at
least it kind of works with the ooze but
sorry the interface is not great but we
can apply that kind of concept to our
typography to adjust all sorts of things
like screen widths and that might allow
us to change the font weight based on
whether the screen is larger or smaller
or other things like width and optical
size as well and where the viewport is
wide we might have more detail or it's
small line or more confined space we can
reduce the width of the font and we can
make the most of different JavaScript
events like resize scroll Mouse move and
we can create all kinds of interesting
storytelling and experiences on the web
I spent more time trying to figure out
what word to put in this and they did
writing the code for it to work I really
like this example
it's not everyone else's favorite but I
think it's great now the good thing
about these kinds of examples is that
once you have the formula for modifying
the font you can apply it to basically
anything and I'm going to show you what
that formula is so that you can go away
and you can make all sorts of fun things
with variable fonts so what we're going
to do is if the font if the viewport
size is big or small like as it changes
we're going to change the font weight as
a simple demonstration the problem is we
might have a font weight of say 200 to
900 and a viewport size of 320 pixels to
1440 pixels so we need to align these
two sets of values which are not only
different ranges but also different
measurements so what we're going to do
is start off with our minimum and
maximum access and event values which is
what these numbers are so two hundred
and nine hundred for the font and 320 to
1440 for the viewport it's basically
setting the start and end points so that
it doesn't just go on infinitely so now
that we've got our minimum or maximum
values we're going to get the current
viewport width so the current event
value and we can do that with something
like window in a width for example now
once we have that what we want to do is
change the pixel values to something
more useable so we're going to convert
it to a decimal place so what we do here
is we take the current size that we just
set with window don't inner width and
then we minus the minimum size of the
viewport and then we divide that by the
maximum minus the minimum and that's
going to give us a value between 0 and
0.99 which we can then use to determine
what our font weight is going to be so
we take that new decimal and we multiply
it by the minimum weight minus the
maximum weight and then we add the
maximum weight back on again what that's
going to do is give us a value between
200 to 900 based on the viewport size
then you can update the value in your
CSS however you normally would I'm using
CSS custom properties
I have a custom property called weight
so I'm basically saying update my custom
property of weight with my new
calculated front weight and then that
will update it in my CSS so you can
chuck that in a function or something
like that and then what we're gonna do
is add an event listener for resize
Chuck our function in there and what
that's going to do in its simplest form
is change the font weight based on the
viewport width now you can do all sorts
of things for performance and stuff but
in its simplest form that's what it does
and it might be something like this so
pixelated so sorry now what I'm doing
here is I'm actually changing the font
weight based on the viewport weight so
as it gets smaller the front weight gets
heavier and I'm changing it at different
rates depending on the paragraph but
what I'm also doing is changing the
width of the headline so that it doesn't
wrap onto a new line and what this means
is that I can maintain the integrity of
my design rather than just wrapping it
onto a new line and stacking everything
and I think this is really valuable and
really really useful when we're talking
about all of the different screen sizes
and devices that are out there now and
as I said this code can be used to
change all sorts of things when I made
this I didn't associate it with the fact
that my phone is completely smashed but
it's actually quite funny in hindsight
so this uses the device position and
orientation or we can do something
really interesting
this one will respond to audio input so
I'm gonna switch in a minute but um
there's a couple of things I wanted to
mention about it special thanks to Ruth
I don't know if she's here yet but she's
gonna be here doing stuff tomorrow I
originally wrote the code for this with
a library and I didn't think it was
quite right and she gave me some new
code for it which is super cool all
right let's try switching
so I'm just gonna let it use my
microphone yay I have a really loud
voice so it triggers it oh I probably
shouldn't have made it so sensitive but
as you can see what's happening here is
it's responding to the sound of my voice
and it's taking that audio input and
reacting accordingly and this is really
interesting for things like
conversational you eyes so that you can
visually represent the tone or the
intent of a person's input so like if
they're really loud maybe it's like
super bold or if they're really quiet
maybe it's you know really thin and I
just I think this is like a really cool
future possibility for us as things like
the Google home and Alexa become more
and more prevalent so what's next this
is really cool
one moment please so I'm just gonna
where's my mouse switch back over I'm
gonna go full screen for this one so
this font is called wool which I just
heard some of you say bye scribble tone
I kind of wish they called it slinky but
whoa kind of wax
what this is doing is it's changing
based on the mouse position and it's got
three axes that you can modify there's a
vertical horizontal and then there's a
rotation and I'm just passing the X&Y
coordinates or to the variable font with
that code that I just showed you to
update the axes I really like that
example because the fonts so cool the
thing to note about this is that
essentially again all the hard work is
done in the font like that is an
incredible creation what they've done
there and it's just simply spectacular
this is a good opportunity to bring
yourself closer to people who create
fonts because I kind of feel like at the
moment we're very separate but now that
we can start to control the font in our
code and on the web I think this is a
really good opportunity to come together
and like
on things and solve problems together
but we can also do some other
interesting things like improve the
legibility of our text with new features
that allow us to query the
characteristics of the users display or
light level so this demo that I'm going
to show you it currently only works
behind a flag so the support isn't great
but it is a good demonstration of the
opportunities for the future what I'm
gonna do first is show you a little bit
of code so I didn't show you this before
but this is essentially what the CSS
looks like with the custom property the
font I'm going to use is called tiny and
it's what I'm doing is passing a value
to my custom property and then updating
it in the font weight value we set up
our default base ranges just like before
but instead of viewport width we're
using an ambient light sensor value and
then we're going to set up the ambient
light sensor so in this case we check if
we have access to the ambient light
sensor if we do we create a new instance
of that sensor and then what we can do
is start to gather readings from the
sensor using the on reading event
handler now the reading frequency is
decided by you you can pass an optional
value to the sensors constructor and
that will specify the number of readings
per second I'm not going to do that for
simplicity but you can do it and then
what we do is we pass that same function
that I showed you before I've called it
fluid access variation with all of our
values including the sensor dot
illuminance reading which is what we get
our current value from and then the
final step is telling the sensor to
start so the function with the values in
it manually might look something like
this but now I'm gonna show you what it
actually looks like this is probably I
say a lot of demos are my favorite but I
think this one really is my favorite a
promise
all right I'm just gonna get my handy
device here I'm gonna change the light
input so sorry if I'm shining my light
in anyone's eyes in the front row the
perils of the front row so what I'm
doing is it's detecting a change in the
light around my computer laptop sensor
and then the font is responding to it
now this is like really cool right it's
it's responding to the users environment
and you can use this to change the way
things are represented in low light
environments to improve legibility
accessibility and usability of your
sites but also and this is fun for me
you could create some really cool
like storytelling experiences like if it
was really dark you could make something
like cool thing where it gets all dark
and creepy I'm all the reverse of that
unicorns could appear to make people
feel safe unicorns I wish I wore my
unicorn pants instead of MySpace ones
I'll have to like work that out next
time hang on one second why switch back
cool so basically it's only because
variable fonts give us this more greater
control over each of these elements that
we can start to fine-tune the different
font characteristics to maximize the
legibility the readability and the
accessibility of our website text and
while they might seem a little bit
trivial and you might be like well I'll
never use that their demonstrations of
the possibilities and like I said like
this isn't just about fun stuff it does
give us an opportunity to respond to our
users environments and at their unique
circumstances it's a level of control
over fonts that's unprecedented for us
and I hope by the end of this conference
you'll agree but in my opinion it's
never been a better time to be a
developer or a designer on the web
variable fonts which is one of the many
things that open up doors that have
never existed for us before and we can
combine these things in any number of
ways
to think more creatively for our users
and to solve problems in more creative
ways and with variable fonts at the very
least we have the opportunity to improve
performance but at its best we can make
websites that are more usable more
accessible and more meaningful and that
to me is what gets me really really
really excited about the future of web
typography so I have some resources
which I'll share out should follow Ruth
for her awesome
audio stuff um specifically though I
made this website where are we
it's called variable fonts for
developers here's another cool fun Hey
I forget what this one's called I should
know this because I made it the other
day it's got this has kicked in mobile
version sad whoo the aspect ratio of
this is very low anyway it's got
tutorials for how to make the light
sensor demo and the gray demo and I will
add a whole bunch more on here in the
next few weeks there's also a getting
started page which will go through the
basics of setting up and using variable
fonts that you can go through and have a
look at if you want
it's called variable fonts dot dev
putting this microphone down and
switching is really hard thanks everyone