Typography superpower with variable fonts and CSS

Ananya Neogi at Hover '21
Sign up for Conffab Pro to watch this and hundreds of other videos for 19.95 a month

Hello everyone, welcome.

Today, we're going to talk about tyography with variable fonts and how they're changing the way we're designing things on the web.

So if we talk about static fonts for a bit, that's what we predominantly use these days.

Using multiple styles means loading multiple fonts files for every single one of the styles that we want to use.

For example, weight, width, italics, et cetera.

This clearly has cost attached to it, like the size, and the latency, and the multiple HTTP requests that will be needed to be made to access the multiple styles that we want to use in our design.

So to combat this performance hit, we restrict the number of styles that designers can use to design for the web.

That compromises with the design a little bit, and that's where variable fonts come in and change out this whole equation.

So you can think of variable fonts as something that's like a single font file that behaves like multiple fonts.

So, it is an evolution of the OpenType specification, and it can - so we can use the CSS to actually access all the styles, all the multiple styles that is contained in the single font file.

Most of you might already know what variable fonts consists of and how the properties work, but we're just quickly going to look at some of them, just so that everyone is on the same page before we look at some of the CSS.

So variable fonts has this concept called axes.

So, what axes does is basically helps us to attribute these different styles that's contained in a single font file - to identify them and use them and manipulate them.

So it has two kinds of axes.

One is the "registered axes" that has width, weight, italics, slant, and optical size.

These are, you could say, as the standard version of these axes, then variable fonts can also have "custom axes," which is what a type designer can design into the type when they're designing it, so these are not standard axes so they can have different names and they can do different kinds of things, and the one distinction that you can make between the registered axes and the custom axes is that the custom axes are always spelled in uppercase, while the registered ones are just the ones that's given names, so you can't change them.

So just going to quickly look at some of these registered axes and how they work.

So the way we define - the way we make use of these axes is by using font variation settings, as you can see on line number 2, that's where we have added our registered axis name, and we're just going to add the numeric value of the weight.

So if you look at this example, when I drag the slider down and up, so you can see how the boldness of the font is increasing and decreasing accordingly.

Some of these axes also has CSS alternatives to it.

So for example, for this - Weight, we can use the CSS "font-weight", and just directly give the numeric value to it.

Now you might ask: "Why is variable fonts in this case so special?" That's because it gives us so much more control - the way we want to design the weight of our font.

We don't have to limit ourselves into just adding the set numeric values that we have today, such as 400, 600.

You can make use of 482 or 603 in this case, if that's what your design warrants for.

So the next one is Width.

As the name suggests it controls the width of the font.

So, in the example you can see it's changing how much real estate it's taking on the screen, and again, we can use the font variation settings to change, to define this and the CSS alternative for that is "font-stretch." One thing you need to remember when using font-stretch is that it takes percentage values, so be mindful to add the percentage value to it.

The next one is Italic and that's pretty straightforward.

It's either 0 or it's 1 that - it could be italic or it can not be italic, that's about it.

And the next one is Slant.

So slant is somewhat similar to italic, you can say that to a lot of degree.

But it actually gives us more control over: to what degree the slant should be.

So in this example, you can see that it gives us so much more control as to what degree we want - the slant-ness of the type should be.

So you can use this to add interesting visual attributes, and maybe do some text animations.

Well, the next one is Optical Size and this is my favorite one.

So a good optical size axis is what makes the type more legible when you're in the smaller viewports.

So, what optical size does is that if I increase this value, you can see that the size has kind of squished together a little bit.

But when we decrease the value, you can see that this has become a little bit more bold, a little bit more legible.

So in a smaller size, you can decrease the optical sizing to make the text a bit more legible, and when we're using it on the desktop, you can make it a little bit more narrow because we have a bigger screen that we can deal with.

So now we've seen all these registered axes, but you have to remember that not all of these axes are going to be in all the fonts, all the variable forms of your choosing.

So how do we see that - what kinds of axes my choosing of font offers? So there are websites like WakamaiFondue.com That's a fun name.

So this website, you can just go ahead and drop the font file and it will tell you all the cool things your variable fonts can do.

But you can also look at Firefox Devtools because it has a panel that's called fonts and it will give you all the details about it.

So this presentation actually uses variable fonts.

So if I open up my Devtools over here and I look at this font tab, so we can see that the font that I'm using in this presentation is called Recursive.

And then it's giving me all the axes that's available.

So you can see that the Weight and the Slant are the only two registered axes that's available in this font.

But then we have these: Monospace, Casual, and Cursive, and these are all uppercase, that means these are custom axes.

So the type designers for Recursive have added three different custom axes of their choosing to this font.

I can manipulate these and you can see how these things are changing, so the Firefox Devtools in this case are really awesome.

So, where do you find these variable fonts? There are many ways to find these variable fonts.

You can go to v-fonts.com.

That has a good amount of fonts that you can choose from.

It's also available on Google fonts these days, and also you can go directly to the font's website, such as recursive.design.

That's the font that I'm using in this presentation.

Now comes the fun part.

Let's look at all the practical uses that these variable fonts allow us to do now that we've done or one-on-one crash course on variable fonts of the web.

So the first step is performance benefits.

So I touched on this earlier in the introduction and this benefit would be the pretty obvious one.

So from a performance standpoint, while variable fonts may be - the variable font file may be - larger than a single instance font file, but they are still much smaller than the sum total of the, of all the font styles that they replace, the static font files that they replace.

Which means that we can substantially improve the page load of our websites or web apps that's using a lot of these font files, especially in very content heavy websites.

So this gives us more freedom to design without limiting to just minimum one font style attached to it.

So now with that freedom of limitation, we have a better way to express our content on the web now and make it more interesting.

So we can add visual interest.

So you can see that this is just one font that I'm choosing and I'm trying to illustrate the range the font gives us by adding an animation, but of course you don't have to add an animation, you can just use a stat - like the static values of it.

So the only thing that I'm doing over here is just manipulating the weight and the width of the font.

So I go ahead by adding the initial value, add in the animation and then in the animation, all I'm doing is just changing the width and the weight, and just by doing that, it's giving us so much more range to express our content in.

So now, so this font is called Movement, and as you can see, this also has one custom axis attached to it and that's spacing.

So on line number 3, you can see it, spelled as "SPAC".

So in this one we see that we have added 120 as a spacing value and that's giving us a certain feed of the font, but then if you go ahead and change the value of the spacing to 100, the font actually changes quite a bit.

So if I go back to see, we can see that the edges are so much more straight, but when I come back to this one, we can see that this has more rounder edges, which is giving us so much more options.

Even if we're using just one font file, it can give totally different expression to it.

So we can truly see that it's one font file and many styles.

So this concept that the variable fonts introduced is actually true.

So now, next up is dynamic typography for responsive design.

So for this, we're going to leverage the power of CSS calc functions, CSS variables, and the viewport units, along with variable fonts, to see how we can truly make our typography dynamic.

So the way we do it is that we add something that's called scale values for our sizing of our text and our line height.

And we also define our breakpoints as usually we would.

So over here, you can see that I have added the paragraph tag's scale value, the line height of the paragraph tag's scale value, and the breakpoint value (such as small, medium, large), or however you want to define these.

So the way that we get these scale values is actually based on a kind of a formula, if you will.

I'm not going to go into depth as to how we're obtaining this, but I have linked all the resources for you to go up and do some reading on how we're getting these values.

So just for the sake of this presentation, I am going to stick with that.

We know that we have these scale values right now.

So the next step is to add that initial font size and the line height, so all we're doing is we're taking those CSS variables and we're just adding it to font size and line height.

And then the next part would be to scale these based on the viewport units.

So next step: we go and we do some fancy formula and then we're done.

Okay.

So I know you might be thinking: "What was that? It was math and whatnot...? So this formula is actually derived from this blog post that Tim Brown wrote quite a while ago.

So what this is doing is, that it's a way to define the minimum and the maximum values of the size and the viewport units and leaving the rest of the heavy lifting - lifting to do - with the calc function and the browser.

So I will not go into details of how this works in a sense of time again, but I highly recommend reading the blog post that I have already linked to on the slide.

But I will try to give you a TL:DR version when I try to break this formula into simple English language.

So what this is actually saying is that: "We would like to scale from the minimum size on the small screen, up to the maximum size on the large screen, starting at the minimum viewport width and stopping at the maximum viewport width." So if this still didn't make sense, please don't worry about it.

It starts to make sense once you spend a little bit of time with it, and I sure did spend quite a lot of time trying to understand this, but the good thing is that once you get the hang of it, you can truly see that it is remarkable how easy this makes achieving dynamic typography.

So, to look at this in action, we're going to look at a demo.

Let's go over here.

So this is a very simple demo that I've created.

I have stripped it down, it doesn't really have any fancy images or anything because I just want us to concentrate on the type today because we're talking about typography.

So if I open up my Devtools just to see all the changes.

So we are going to go into the Responsive Design Mode just to see how the type is changing with our viewport.

So when I go into the responsive mode, we can see that the font size and the line height is moving in proportion.

And that is really important to give a really great reading experience to the user.

So as I scale up, you can see that the fonts are a little bit bigger.

The line height is a little bit bigger because the font size is a little bit bigger.

And now if we scale it down, we can see that all, all these, all the two things are working in harmony to give us a good reading experience.

All right.

So, yes, again, I would reiterate that if the formula still doesn't make sense, please read the blog post.

It has a really good in-depth explanation of how this formula comes about, and that will really help you with the understanding.

So now that we saw that we can scale the font size and the line height, but with variable fonts in the mix, we can not only scale the size, but also properties like optical sizing and grade to improve the experience.

And that brings us to accessibility improvements that variable fonts helps us with.

So I alluded to that earlier.

So we can improve the reading experience with optical sizing on the small screen.

So we can see that sometimes on the small screen, the text is too small, or if we try to increase the size of the text too much, the design kind of distorts and you're left with one huge word on one single line, and optical sizing can improve that experience.

So all we have to do is, again since it's a registered axis it has a set name that is "opsz" so on line 3, you can see that we're using it on font-variation-settings, and initially we have attached a certain optical sizing based on how we want our design to look on desktop, and then we can decrease the optical sizing value as and when we are decreasing our viewport.

So if I go back to our demo that we just saw, so we can see that if I go back to our responsive mode again, you can see that this is - this becomes a little bit more - the text is becoming a little bit more bold, but not exactly.

We're not really changing the font weight, but this is done by the optical size, so it's making it a little bit more legible.

It might not be super clear with the screen presentation over here, but once you interact with this demo on your own, this will be so much more clear and of course you will get the links to all the demos and all the examples that I'm showing here today.

So the next improvement that we can do is we can improve the contrast on dark mode.

So, sometimes when we flip the colors of when you're doing the dark mode, we can sometimes see that the light color on the dark background becomes a bit illegible.

So we can improve that by using "GRAD," and GRAD again is a custom axis that some fonts will have.

So if you're using a variable font that has a GRAD axis to it, then you can use this value.

So just to quickly demonstrate, we're going to go back to our trusty old demo over here.

So I have added a quick check box to toggle the dark mode over here, so I'm going to do that and you can see that the font has become a bit more legible and it's become a bit more thicker - the edges are a little bit more thicker.

So if you could imagine that the white font was in outline, then it would not be as clear as the black font on a white background.

So this is done by using GRAD.

So if you want to see how this is getting affected, we can also look at GRAD through our fonts tab over here.

So you can see that as I increase this, the value is changing a little bit.

Now it again, might not be that visible to this presentation, but if you look at this on your screen, the subtle difference is actually really clear in this case.

So the way we do it as again with font variation settings, and you can of course make use of the media query - the "prefers color scheme" media query, but also you can add a toggle checkbox like I did in my demo.

So with all of these examples, what we see over here is that variable fonts actually gives us back a lot of the granular control.

So the more control we have over how we design on the web, the better we can craft the experience for our users.

And that's it for me, thank you so much! You can get all the slides and the examples at this link that's attached here.

That's tinyurl.com/variable-fonts, and you will get all the demos and all the links that's useful for you in learning variable fonts.

So thank you.

Have a nice day.

Typography superpower with variable fonts and CSS

Static fonts

5 font file icons, arranged horizontally fading left to right

Variable fonts

5 font file icons, arranged horizontally fading left to right. Beneath them a wide horizontal parenthesis facing down, and beneath that a single font file icon representing multiple fonts in one file.

Variable fonts

  • A variable font file is a single font file that behaves like multiple fonts
  • An evolution of the OpenType specification
  • You can use CSS to access all the styles contained in a single font file

Registered axes

  • wdth
  • wght
  • ital
  • slnt
  • opsz

Custom axes

  • GRAD
  • CASL
  • ...etc
Weight
1
2
3
4
5
6
h1 {
    font-variation-settings: "wght" var(--text-wght);
    /* Or
    font-weight: var(--text-wght);
    */
}
Font in use: Recursive
Width
1
2
3
4
5
6
7
h1 {
    font-variation-settings: "wdth" var(--text-wdth);

    /* OR
    font-stretch: calc(var(--text-wdth) * 1%);
    */
}
Font in use: Roboto Delta
Italic
1
2
3
h1 {
    font-variation-settings: "ital" var(--text-ital);
}
Font in use: Jost
Slant
1
2
3
h1 {
    font-variation-settings: "slnt" var(--text-slnt);
}
Font in use: Recursive
Optical Size
1
2
3
h1 {
    font-variation-settings: "opsz" var(--text-opsz);
}
Font in use: Roboto Delta

What can my variable fonts do?

Where to find variable fonts?

Practical Uses

Performance benefits

Better UI design

Interesting visual interest

Hello World

1
2
3
4
5
6
7
8
9
10
11
/* Font in use: Bandeins Strange Variable */
h1 {
  font-variation-settings: "wght" 400, "wdth" 100;
  animation: strange 7s cubic-bezier(0.91, 0.32, 0.43, 1.03) infinite;
}

@keyframes strange {
  50% {
    font-variation-settings: "wght" 200, "wdth" 800;
  }
}

Same font...

Hello World

1
2
3
4
h1 {
    --heading-spac: 120;
    font-variation-settings: "SPAC" var(--heading-spac);
}
Font in use: Movement

...different design

Hello World

1
2
3
4
h1 {
    --heading-spac: 100;
   font-variation-settings: "SPAC" var(--heading-spac);        
}
Font in use: Movement

One font file, many styles

Font in use: Rocher color

Dynamic typography for responsive design

Leverage the power of calc, CSS variables and viewport units along with variable fonts

Demo ↗️

Step 1: Set font size and line height variables

1
2
3
4
5
6
7
8
9
10
11
12
13
:root {
  /* p tag's font size scale values */
  --p-min: 1;
  --p-mid: 1.125;

  /* p tag's line height scale values */
    --p-h-min: 1.2;
    --p-h-mid: 1.4;

  /* breakpoint values */
  --screen-small: 25;
  --screen-medium: 45;
}

Step 3: Scale font size and line height with given breakpoints

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (min-width: 25em) {
  font-size: calc(
    (var(--p-min) * 1em) + (var(--p-max) - var(--p-min)) *
      (
        (100vw - (var(--screen-small) * 1em)) /
          (var(--screen-xlarge) - var(--screen-small))
      )
  );

  line-height: calc(
    (var(--p-h-min) * 1em) + (var(--p-h-max) - var(--p-h-min)) *
      (
        (100vw - (var(--screen-small) * 1em)) /
          (var(--screen-xlarge) - var(--screen-small))
      )
  );
}
blog.typekit.com/2016/08/17/flexible-typography-with-css-locks

Animated image of Olaf from Frozen with questions marks

calc([font-size-min]em + ([font-size-max] - [font-size-min]) * ((100vw - [screen-size-start]em) / ([screen-size-stop] - [screen-size-start])))

blog.typekit.com/2016/08/17/flexible-typography-with-css-locks

With variable fonts in the mix we can not only scale size but also other properties like optical sizing and grade to improve experience.

Accessibility Improvements

Improve reading experince with Optical sizing on small screen

1
2
3
4
5
6
7
8
p {
  --text-opsz: 20;
  font-variation-settings: "opsz" var(--text-opsz);

  @media screen and (min-width: 25em) {
    --text-opsz: 16;
  }
}

Improve contrast on dark mode

1
2
3
4
5
6
7
8
9
10
p {
  --text-GRAD: 0;
  font-variation-settings: "GRAD" var(--text-GRAD);
}

@media (prefers-color-scheme: dark) {
  p {
    --text-GRAD: 0.1;
  }
}

The more granular control we have over how we design on the web, the better we can craft experiences for our users.

Thank you!

Slides & code samples:  tinyurl.com/variable-fonts

Twitter: @_ananyaneogi