thank you very much so yes I'm going to
talk and kind of build on some of our
our themes that have been emerging today
a little bit about how we go about
participating and so this is either a
really design focused technical talk or
a very technical design talk
choose-your-own-adventure here that's
just fine so I do spend a lot of time
playing around with variable thoughts I
have since day since they launched and
one of the recurring themes for me is
this notion of participation meeting
people from different browser vendors
different different font companies and
trying things experimenting and
providing feedback and so for me as a
designer and a developer who's worked on
the web for actually 25 years and my web
career is probably older than half the
people here but that that has led me to
be able to participate more than I ever
have before just by speaking up just by
going and commenting on issues and
trying things out and providing some use
cases and I'll show you some of those
things today really most people just
know me as a walker of these two so
they're gonna come back and help me kind
of explain a couple things but so I
spend most of my time working on type
and typography and design systems and
and for browser vendors and that sort of
thing writing content about it trying to
educate people about it but I've had
people in Australia ask me first how
Tristan's doing so that's Tristan on the
left and it's his cousin Tillie on the
right and they'll be back to explain
some things later on so the reason why I
think this stuff is so important there's
there's lots of reasons for performance
and everything else but type is the
voice of our words it's how we hear what
we read and and so all of the tech stuff
fixing performance problems with font
loading
that's the Gateway to actually get in
and do better typography in the first
place and this is one of the reasons why
so when this quote came across I was
like the day before I was giving this
the first version of this talk for the
first time and and I had to work this in
because I think Nina's notion of
friction in design what creates that
interface between what I put on screen
and what you read that's what makes it
memorable and sometimes you want more
friction sometimes you want less butt
type is the way we can modulate that and
I think that's really fascinating so
what I want to look at is actually
combining several different CSS
techniques to create more interesting
and fluid typography and then we can
also tie in some other emerging features
that will help make that typography more
interesting and more useful in more
scenarios to more people so there's
three things that we're going to talk
about primarily and that is CSS custom
properties or variables the ability to
do calculations with them and pairing
that with variable fonts so variable
fonts I hope is something that you've
all at least heard about but if not I'm
gonna explain a little bit more about
what they are in a minute so looking at
what we have on screen
I thought the Odyssey might be a good
way to talk about the way our journey on
the web has evolved and I wanted to try
and present it in a slightly different
way so we have a heading and instead of
assigning it in an explicit color we
could sign it a variable for that color
so we might change it later on and and I
think that will have some interesting
use cases for that and so this is
totally not showing things properly
sorry okay
that's what it's supposed to look like
and so we have the color assigned and we
want to start to change those things so
we changed that variable assignment and
so now we have a different color heading
we might also want to do a calculation
on the size so that we could then change
that base size later on as we start to
scale it on different screen sizes so
we've now done things
changed the size and that actually
altered the flow of the text a little
bit so we might want to actually assign
a variable to the weight as well so as
size changes we might impact that so
here's where the variable fonts come in
so we have that single asset that we can
then use in a greater variety of ways
and this is actually where I want to
pause for just a second and bring up the
idea about when we read advice about
things we do on the web we need to think
about why that advice exists in the
first place
so I see a lot of people writing about
what is good typography and a lot of
people will talk about and these are our
experienced designers and we'll talk
about good typography being only using
two weights of a font that's actually
not good typography at all that's
convenient for performance and that has
been sort of codified as a way we should
do things because of the reality of how
we serve things on the web so it makes
for a better user experience if you get
content on screen and you're only
loading two assets that's a smaller
amount of data so that makes sense but
that's not actually good typography a
single weight of a typeface as you
change it in size will become more or
less clear and easy to read if you can
modulate that weight a little bit at
every different size you'll get clearer
and more legible type so there's reasons
why we might want to do this sort of
thing and I also wanted to show that
some of these ideas work equally well in
the context of a design system so it's
not something that is purely for one
block long form copy but when we take
this thing and we've got our card so I
don't have a box around it but you know
cards are a theme we know we are gonna
use sub-grid on them and everything and
we have them here in the bottom part of
the layout but if we stick them over on
the side maybe we scope the change in
size or scale of that typography to
where it's placed in the layout so again
we don't have to write any new markup
all we have to do is tweak some of those
size variables and that can be dependent
upon where things are placed and that's
really kind of interesting but let me
come back to variable fonts because one
of the things that I've learned is every
time I think I've been rattled
about them enough I'll go to another
event and people don't actually know
what they really look like so when you
load fonts you typically have a whole
bunch of different files that you need
to load in order to get all the
different weights and variants whether
it's with weight italics all that sort
of thing but a variable font actually
brings all of that together in a single
file so now you're loading one asset
which is bigger than a single static
file but not so big as what you want to
combine and it gives you then access to
the whole range of that set of weights
or widths all at once rather than having
only one or two so Tristan and Tilly
again will help me out where we have
variable size collies and you can have
that single font file that you're
loading and then playing around with all
these different characteristics and I
hope you'll pay attention to some of the
classes that have been applied here to
make sure that we're really focused in
on exactly what we're talking about and
these axes are ones that are chosen to
be exposed by the type designer they're
not distortions introduced by the
browser they're only what is native
inside the font itself so you'll see a
lot of different variable axes exposed
and and we're still kind of learning
what some of those axes might be but the
more common ones that will be useful to
us for you I particularly will be things
like width and weight it just creates a
lot more opportunity but we also don't
want to forget that we also have slit
now we have all of these things
available to us but one of the things
that is often overlooked in a responsive
design is how that typographic scale
needs to move and change based on screen
size so when you have a small screen you
have less distraction and less space for
that content to show up so you don't
really want to have the same scale
between heading and body copy on a big
screen and a small one so when you have
an h1 that's still appropriately sized
do you understand that that's the title
it's the most important piece of
information on the screen we're going to
start to scale this using all of these
things together we're going to set
a bunch of variables for breakpoints and
minimum and maximum sizes for in this
case the paragraph size and line height
and so these are the things that we're
going to move around and scale based on
that screen size rather than using
explicit breakpoints to change things
all the way along we're going to start
to do this a little bit differently
we're going to use some of these
calculations so as it changed what
happened there was the font size and the
line height started to change with it
and so as the screen got bigger we
started to use stuff like this and I
know that's a lot somebody who's Greg
from the edge edge team last night said
are you gonna put that really stupidly
long formula up on the screen and I said
yes yes I am multiple times but I'll
explain it so this is kind of what's
going on and this is based on a
technique that Tim Brown wrote about
awhile ago called CSS locks now some of
you have probably played around with
viewport width units to size text and
that's really interesting and it helps
you size text based on the size of the
window but it has a couple of problems
and Estelle while was the first person
that pointed out to me that when you use
purely viewport units to size text you
can't zoom it so you've created this
huge accessibility problem because it's
based on the window not page zoom so
when you calculate it and introduce
another unit of measure the end result
can still be zoomed so that alleviates
the accessibility issue but you also
want to stop it from getting too small
or too big so this is where the lochs
idea comes in you can assign a minimum
and maximum size and then tie it to
different break points so that it will
get no smaller when it's on a very small
screen and no bigger when it's on a very
large screen and it gives you a little
bit more control without having to worry
about everything in the middle so
effectively you're still using
breakpoints but only at the low end and
high end of where you want it to start
and stop scaling and so this is what it
looks like in story form so please take
this item and scale it from this size up
to this size starting at this screen
size and ending at that one so we start
to replace these values in the formula
gets a little bit simple
and this is about the point where I
throw my hands up and walk away because
browsers are better at math than I am I
didn't really take any college math
either so that's as this is as far as I
go
but browsers are really good at it and
that's fine and you don't ever have to
rewrite it so I use that exact same
formula I've taken that around from
dozens of different demonstrations and
workshops it's in production in several
different websites a couple of which
I'll show you later on and we're then
going to see how that actually looks in
the real world so we take all these
things and we put them together and
instead of having only a couple of
things happening we're actually going to
tailor a whole bunch of things here the
width of the text the weight of it the
size the line height all of those things
are going to scale nicely as we go from
small screen to large and now why might
we want to do that on small screens we
have fairly choppy line lengths when you
have the text size set at a good
readable 100% size so rather than make
the body text smaller we could make it a
tiny bit narrower if you have a width
axis and that will fit more characters
per line and give you a little bit more
even reading experience without really
sacrificing the legibility so we're
doing a whole bunch of other stuff we're
setting variables not only for the size
and line height but we're also setting
it for width and we're doing the same
kind of thing as we scale you'll notice
that not only what's going to change
here is the width the weight and as well
as the line height and the size as the
scales so it's appropriate for the
device size it gives you a good clear
reading experience optimized for the
size of the screen upon which it's
viewed and that's really important
because content is will whole point of
what we're putting on screen unless it's
a game or the kittens the kittens should
just be at a hundred percent right well
dogs not cats anyway so here's another
example of this in action so this is a
page that I designed for monotypes
introduction of
the FF meta is their first variable font
lunch and so this is just an embed
that's a real real web page all the
stuff that you're seeing here our actual
production fonts or most of the
reproductions some of them are
open-source but everything that's on the
screen here is from one file so a single
font file 84k replaces 18 separate files
to pre create this beautiful range of
typography now I say beautiful range I'm
not saying beautiful typography I happen
to like it but I don't want to imply
that that judgment is absolute and so
that also moves and scales really nicely
so this is using a lot of the same ideas
on the slightly earlier iteration but it
doesn't have the width but it does
create an interesting layout and
solution-based appropriately for the
screen size that it's on this is another
quote from Tim Brown because I think
this is really important and this is a
theme that I've seen emerging at a bunch
of events in different talks this year
where we need to remember that we're not
dictating the experience to the user
we're giving them an experience which
they can then choose to take or not and
they can override it with user
preference they can override it with
page zoom and increasingly we want to be
mindful that we should give them the
ability to fine-tune that experience
based on their needs it might be ambient
light it might be low vision it could be
different kinds of cognitive issues that
made that they may face so why not use
CSS and a little bit of JavaScript so
I'll include everybody from tomorrow and
Sunday as well that we can improve this
experience with a few simple things to
give people the choice about how they
want to take in this content so one of
the things that has become pretty
popular as the idea of using light and
dark mode so it's built into a lot of
different operating systems now it's
oddly enough not available in iOS and I
was
kind of surprised about that but it does
work it's shipping now the respect for
that in a media query is built into
Safari and Firefox and if it's not
shipping yet in chrome it's just about -
it does work if you have a flag set it's
it's working in my browser anyway and so
if I wanted to just pop over to my
system preferences and go back here it's
under general and if I just select dark
mode I didn't change anything in the
code I just have a few things in a media
query so that if the user has set that
preference I can invert a couple of
things and it's really easy to do based
on the absence or presence of these
variables so inside the media query here
prefers color scheme dark then all I
have to do is replace a couple of
different values for those variables and
it just inverts the whole color palette
and as an experiment I added this to my
own website last week and it took me
about 20 minutes to go through and find
all the places where I needed to swap
out those variables so it's actually was
kind of an incredibly easy thing to do
and if I go back here what I want to do
is actually I cheated a little bit I
have a class on here as well but watch
what happens when I enable the dark mode
I'm also increasing the grade of the
text slightly that's another variable
axis so it increases the weight subtly
without shifting the space around the
letterforms
and I also increase the letter spacing
so a couple of small tweaks to the
typography using basic CSS and this and
the variable axis creates that better
more tailored reading experience in that
inverted light mode which for some
people is the difference between being
able to use the computer and not so it
really does give us to try and and make
sure these things are available so going
back here there are other cases where we
might increase grade of text and this
for people that have either low ambient
lights
or they have low vision meaning they
need a little bit stronger contrast in
order to make out that fine detail well
again we can tie into without inverting
the color mode we can still create a
slightly more readable experience we'll
go back and forth a little bit there you
can see I'm doing the same kind of thing
like increasing the grade opening up the
letter space in just a little bit it
creates a more legible experience for
someone that that needs that extra
little touch we can also play around
with font size so again we can in this
case all I had to do is redefine the
scaling values the low and the high end
and then everything else kind of moves
along with it we can also do things like
address crowding crowding is a
particular subset it's a condition that
a subset of people that have dyslexia
suffer from and actually learned about
this from Kevin Larsen from Microsoft
advanced reading group did a really
great talk about this research and what
they found was that in people who suffer
from crowding and it's it's not
everybody with dyslexia it's a subset
what they discovered was that if you
could increase the word spacing and line
height they could increase reading
cognition by 50% that's a massive
increase for people that is again the
difference between getting something
from your site and not it's opening and
closing a door to people to learning to
experience to entertainment you name it
with really simple stuff so again word
spacing line height modify those two
variables make it easy
put these controls in the hands of the
user so what that might that look like
well if we could actually just put a
little panel off to the side on our
website and all it does is toggle some
classes on and off that will trigger
those little bits of CSS we can then
again put it in the hands of the user
allow them to control that experience it
doesn't take much time for us the net
cost in a project is zero I'm not
kidding I mean like this is a tiny
amount of effort to put in across the
scope of a whole project that will then
make the difference between I can use
this site
or I need to go somewhere else and we
want people to be able to use our sites
so I think it's really important that we
keep that sort of thing in mind and the
other thing that we might do again
because this is a lot of effort to
create great typography we want to be
able to reuse this effort as much as as
we can we can then extend it a little
bit more to make the whole system itself
Thema ball so we could actually use this
stuff over and over on other projects by
using a variable for the font stack
itself so as this stuff moves around in
scales we could also based on grid
placement we can actually shift around
what values we apply but we could also
change the entire look itself and that
might be by just adding a few more
variables that are tied to the font
stack that we enable which one is
primary and then tie things to screen
size light modes all different kinds of
things that we might be able to do but
that makes this whole system a series of
files we could drop into any project so
that you know we want efficiency we want
to work in design systems we want to be
able to replicate all this stuff then we
want to be able to get the most out of
it that we can so we figure this stuff
out in a system we take it from one
project to the next I can tell you from
experience now over the last couple
years that it has saved me a ton of time
and it has enabled me to bring all this
into a production system for one of the
larger states in the u.s. so that brings
me to this georgia gov and I was asked
to come in and work on the typographic
system for all of their state agency
websites so this is one platform one
pattern lab instance in Drupal and we
were able to take all of the ideas that
I've been showing you and build that
into this whole system and so we have
everything here so this is the this is
an actual copy of the pattern lab that
exists for all of the sites and if I go
play around with all of this you can see
the scaling happening live everything
it's all the same kind of math
I'm using app supports it's delivering
static web fonts for ie11 variable fonts
for everybody else so that's another
little plug there the browser support
for variable fonts every shipping
browser I 11 still does not support it
so that is a reality but using ass
supports in your CSS will enable you to
bring this into your project safely and
use it in production and it's actually
not that hard to do to add in a block
that just redefines the variables font
support and just layer it into your the
rest your project so they've just
started launching these sites we've been
working on this for the last eight nine
months or so and so now they've got a
couple of different live websites that
it's all in Drupal so they've got lots
of flexibility to build the different
content types but they've actually
started to roll this out now and this
will be powering 80 to 100 websites
across the entire state of Georgia so it
is very much production-ready it's
really nice to see and they're not the
only people doing this so IBM fairly
large company I'm guessing most of you
have heard of them they just released
Plex sans a couple years ago and is a
beautiful family of typefaces that they
made open source and that's core to
their entire identity well it so happens
just about a month ago they released a
variable font version of blech sans 16
files totalled 960 K in a weight range
from 85 to 100 percent weight range of
with range from 85 to 100 a weight range
from 100 to 700 and italics so all of
that stuff replaced with two files at
233 K now you might think that's still a
lot to load in font data but it's
cashable and it gives you an incredible
range of stuff and it's a hugely
internationalized font so if you were to
localize it just for say Latin one
extended you'd bring down the number of
glyphs in there and you'd have an even
smaller file so you get a tremendous
amount out of that and I just want to
show I know other people
have been kind of carrying on about the
Firefox dev tools but man they are so
cool so one of the things that I know
you're not going to be able to read that
that's okay the font panel so I'm gonna
actually get out of this mode so you can
actually see it on screen here so if I
exit my full screen and inspect this
again what I want to show you is I have
selected that first line of text and if
you look at the font panel over here
you'll see that it shows you what font
has been selected and what's what's
enabled there it gives you the basics of
size and line height and whether or not
it has italics or not but it will also
expose the any available axes in the
variable font so in this case we've got
width and weight and I can now play
around with that live in the browser so
this comes up a lot when I'm working
with both designers and developers who
have to work together this is a
conversation facilitator this allows a
designer to go into the browser and look
at a test harness of a page or an
existing existing mock-up or early
iteration or maybe a build in a PR and
play around with the type get things
exactly the way they want it and then
they can just click on the changes tab
there's another really awesome little
tidbit in in Firefox dev tools this is
where all of the changes that you've
just made in the inspector are going to
show up so then you can just copy that
and hand it back to the developer and
say here so if you can't code it
yourself or if you just want to use
these shortcuts to kind of play with
things and then you can always see
everything that you've changed font
values padding alignment all of these
different things that you've been
playing around with this is where it
accumulates so then you can figure out
everything that you've changed which is
just really fantastic so that's my plug
for Firefox dev tools and and I will do
want to say out loud that people from
both chrome and the edge team have
approached me and had conversations with
me this week about wanting to improve
the
and other browsers as well so
competition is good people really do
care about this stuff you're gonna see
more of these incredible tools coming
from different browsers as well and
that's just going to make our design
life that much better so big round of
applause to the dev tools teams that all
the browsers
[Applause]
one more thing as part of my work with
the w3c what we've been chartered with
right now is something that's really new
and I want it's it's still a year two
away before it ships but this is a bit
of a tease because it's so important
about font performance in the first
place that I wanted to give you a little
advance preview what we're working on is
something called progressive font
enrichment and don't worry I've got a
link to a noticed page that has all of
this stuff on it with tons of links and
resources so you'll easily be able to
kind of check all of this stuff out but
this demo is live on the web so this is
real stuff that I'm showing you and we
have the ability to take a look I'm
gonna choose a variable font where'd it
go
this is there it is sorry
and so the idea is we want to be able to
download only the amount of font
information that you need to render the
page rather than having to do this on an
every page basis we want it to be
cumulative so you look at the first page
of your website and it downloads the 47
glyphs of font data that are required to
render that page when you go to the next
page it might only require 12 more so we
want to rather than throw these things
out we're talking about dynamically sub
setting the font but then building it
back up in the browser and that's really
kind of incredible
yes well just wait till you see it in
action
so I'm just gonna copy the first two
paragraphs and this is this is a long
page there's a lot of text here this is
the entire first book of the Odyssey so
I'm gonna take the first two paragraphs
and go back over here and I'm making a
couple of choices about which sub
setting tools this is this is a totally
experimental thing this is basically
here for us to test research while we're
working on the specification and I
pasted those two paragraphs in I add
them here's my demo content
there's what's happening so there's the
full font would be 21 K that's what
would get sent today with that font and
what was served for this page is down on
the incremental transfers line see so
it's a third one down that was six and a
half K was the only amount of font data
that was sent so that's you know almost
25 percent or so instead of 100% of the
font file so let's go back and grab the
whole rest of this first book so I'm
gonna select here go all the way down to
the bottom so I'm selecting a whole lot
of text but let's see what that does in
terms of the different number of glyphs
so I've copied that I'm gonna go in here
add this and here we go 3.7 K so still
even with all of that text we're only
serving half of the whole font file now
this is peanuts when you're looking at
wet western languages this is not where
it matters although it's still going to
improve things when we talk about those
variable fonts think about that one from
IBM instead of 233 K we might be serving
12 but think about Arabic typical Arabic
font could be two and a half Meg's or
something in CJK Chinese Japanese or
Korean that might be 16 Meg's or might
be 20 so again this is the difference
between being able to use it and not and
the font directly relates to readability
so system fonts are fine but they may
not be the most legible or the most
appropriate so web fonts really are
important and this is why we want to
make sure that we have these kinds of
things available again this is
participatory this will all be going as
soon as we have enough research here
it's gonna be all on github everybody
gets to comment everyone gets to test
things and participate so this is why
it's such an exciting time to be working
on the web because it's easier for all
of us to participate than it ever has
been so that was what I wanted to show
you with this demo bit here
so I'll speed past those again I wanted
to give you access to things so there's
lots of different variable fonts that I
used in this presentation and where you
can find them some of them are open
source some of them are commercial some
of them are some data but if you want to
take a picture grab this last one that
linked down on the bottom has all of
this stuff available and you can also
sign up for an email newsletter that I
do every week about web typography where
a lot of these conversations start and
thank you very much
[Applause]
[Music]