Bianca Berning: Hi, everyone here. It‘s super nice to be back. It‘s my first in-person conference again, so this is very special to me.
Apologies in advance to Andrew and Scott, then, because I have a very German accent, so he might get things wrong. I also tend to mumble. So, if the captions are not right, I‘m very sorry. It‘s my fault. It‘s not Andrew‘s fault.
I‘m going to talk about VF what the fuck. Just for all the German speakers, I don‘t mean Verkehrsfunk (What the fuck?) even though that would probably be fun as well.
I‘m actually going to talk about variable fonts. I‘m a typeface designer. I live in London. I grew up in Germany. I actually did my diploma (back in the days) in Krefeld, so right around the corner.
Bianca: Which it‘s really, really nice to be back in the area. But then I went on to study typeface design, my master‘s in Reading, and then I got stuck in the UK. Since they closed the borders back to the EU, now I can‘t even get out of there anymore. But yeah. No, it‘s all right there.
Variable fonts, this is a topic that you probably know about, especially if you‘re following this conference a little bit. There were other speakers that probably already talked about this.
It‘s been around for five years now. It was introduced in September 2016 as a concept and, since then, took really off really quickly within the type design world and then a little bit less quickly with the Web developers. So, I thought I‘d take the opportunity and go back and look at where we are with this now.
I‘m going to start from the very beginning, so nobody here is lost. I‘m going to talk a little bit about what variable fonts are to begin with.
If you design your website and you have this lovely recipe website, for example, you probably want to use different kinds of fonts. If you are using fonts that are not already in your system (system fonts), they will have to be loaded onto the user‘s machine whenever they go to the website. Actually, only just for the first time. Then they‘re cached.
There are two--
Sometimes, it just takes a little while until these fonts are loaded. You all know this. There are two ways, again, to bridge this time. One of them is called the flash of invisible text, and everyone knows that it kind of shows other elements on the website already, and then, suddenly, the text pops up once the fonts are actually loaded on the user‘s machine.
The other one is called flash the font style text, which you also probably know. It‘s this thing where Arial pops up most of the time, and then it kind of gets substituted once the fonts are loaded.
If you are anything like me or 53% of mobile users, you don‘t even wait that long. If there are a lot of things loaded onto the website as not appearing immediately, I walk away. I don‘t even think that I wait three seconds at all. Apparently, a lot of other users don‘t do that either.
What can we do in order to do this? People have their needs. On the very bottom of this pyramid, you can see that obviously if the website doesn‘t load, people walk away. But once the website loads, the most important thing for them is that they can easily find what they are looking for. Then, obviously, there are other needs as well that are a little bit lower on the priority list.
What do we think about variable fonts? How can they help us retaining our users on the websites? There are a few different ideas to variable fonts. One of them is the functionality side, which I‘m going to tackle first by going back to how we usually are served fonts.
If I go back to my recipe website and I want to use three fonts from the same family, there‘s a hairline font, a regular, and a black weight. Usually, I would (without variable fonts) have three static font files that I would have to make available somehow to the user, and they would have to download it (not with a click of a button but in the background) onto their devices.
If I look inside these fonts, the biggest amount of data inside the fonts is actually descriptions of the outlines of the letters. Here you can see on the left-hand side is what‘s needed in order to describe the outline of a lower case N in the hairline weight. You can see it‘s kind of like coordinates. There are X and Y coordinates in there, and then there are descriptions about the curve that are attached to these coordinates. This is what describes one letter in one weight.
If I look at the regular weight, it kind of repeats itself. You have different coordinates, but the system behind it is the same, and the same for my black weight lower case N.
If I look at them right next to each other, you can start seeing a pattern. If I pull up the outlines again, it‘s even more obvious. You can see we always have nodes on the top left that are connected to something that is right next to them on the right-hand side. It‘s a straight line in between. Then we have the same number of nodes, the blue points in all three weights. Somehow, this can be linked together.
This is what variable fonts basically do. Instead of using three different files in order to describe outlines that are already related to each other, what they do is kind of link those together.
In a variable font file, if you have an open one, you will see that (for each letter) there‘s going to be a default outline described once with those coordinates, and then the rest of the data is just instructions to where we want those nodes to move depending on where we are on an axis.
This is basically variable fonts. This is why it‘s more efficient to use variable fonts over static fonts. If I go back to my recipe website and highlight the ones that are using the same fonts, you can see the running text and the ingredients on the left-hand side that use a regular weight. We have a different weight for the headlines. We have a different weight, again, for navigation.
As a typographer -- which I was before I was a type designer -- I want to lead the eye of my user. If they go to my recipe website, I want them to see (first of all) what kind of recipe do we have, so this is a really big headline. Then I want them to find things easily, so my navigation is moved to the top and has a little bit of a highlight because it‘s in bold. Then I want them to find things easily, like ingredients, and also how to cook these kind of recipes. A little bit lower on the hierarchy are related guides, so they go on the right-hand side because everyone is starting to read from the left, from the top left to the bottom right (usually).
What I‘m doing with typography is really lead the eye of the user. I do that by using all kinds of different weights.
Obviously, if I didn‘t use a variable font for this one, but instead static fonts, all of these would accumulate a lot of data that you actually don‘t really want the user to download because it would delay the website and they might walk away, especially if they‘re on a bad network.
Instead, I can substitute all of these with one variable font. The file size savings -- this is just an example -- it depends on how many weights you obviously are replacing and what is in the variable font file.
Yeah, going back to this, actually, maybe let‘s have a look at this.
On the top, you can see we are using an extended weight, light, and we are using a condensed weight -- the third one -- and then we have different kinds of weights. We need quite a complex variable font in order to cover this design space. This is what we are looking at here.
If you are on the bottom left, you can see the design space that I need for my website. I need different weights, but I also need different widths. I need something narrow and then something wide. I‘m looking at a design space that I set up with my extremes, so I have something on the top left that is very narrow and thin (hairline, actually) and then, on the same row, we have something that is still narrow but black, and then on the bottom, you can see there is something that is white and hairline and white and black.
This is basically me defining my design space. This is how far I want to push things in my font, and this is how far I need these.
For fun, I also do this in this kind of typeface with italics as well - repeat the same process, but maybe I want to use italics on my website as well.
Usually, we would look at outputting things from this design space, esthetic font files so we have things like a light, narrow, and then a hairline, light, a regular, and a medium - the typical font weights. The beauty with variable fonts is that you can actually get everything in between as well.
I actually got into type design because I was always unhappy with what I had. [Laughter] I think this is me described in three words. I was never happy with the weights that I got. I always wanted something a little bit heavier than regular or a little bit lighter than medium. It never set right.
I found a font that I wanted to use in my project, but then I didn‘t like the dots on the I or the height of the ascenders or descenders, so I got into type design because I wanted to get into the space where I can just manipulate things easily for my projects. With variable fonts, to an extent, this is actually possible.
If I don‘t want the regular and I don‘t want the medium, I kind of want something in between, now with variable fonts, this is really easily accessible. I‘m not restricted anymore to what the type design weight is available. So, I guess if variable fonts had been there 15 years ago, I would have never gotten into type design.
While we were talking about axes, which is the bottom right here -- so we have (in this typeface) a weight axis, a width axis, and an italics axis -- I thought I‘d explain quickly what kind of axes exist in the variable font world.
The variable font specification was written by people who oversee the OpenType specification, so that was hosted mostly by Microsoft, but Apple, Adobe, and Google also input, and then they invited some independent foundries. I was on the board as well to just input a little bit on what the users actually want.
We defined five axes that are available by default in the specification. Everything that is in the specification is also going to be supported by people who support variable fonts. The axes that we decided are going to be important (typographically important to people and are often used) are obviously the weight axis because I think this is probably the most used one. We have everything from hairline to black and everything in between. This is one axis that is in the specification.
The next one is the width axis. Again, something that we just saw as something narrow and something white.
Then the next one is the slant axis. You know this from just using any kind of font. You sometimes have an upright and then you have an italic of sorts. It usually is in the region of 10 to 12 degrees angle. In a slant axis, you can axis it and define the slant that you want for your project.
You are not restricted anymore to the 12-degree axis. You say, ‘Oh, my God. It‘s way too steep. I don‘t want that.‘ You can actually have input there as well.
Then there‘s an italic axis, which looks exactly like the slant axis, but it‘s not. This is if typographers don‘t want to give control over everything away. If they want a very defined angle for the italic and they don‘t want people to mess around with that, they can make it binary, which would be the italic axis, so they have an upright and italic.
For this kind of typeface, it probably doesn‘t make that much sense because it‘s actually not a true italic. It‘s just a slant. But for this kind of typeface, it would make a lot more sense because you can see that there are actually variations within the letters. The A, for example, changes from a double-story A into a single-story A. It‘s much more cursive.
The I and the R and the L, they change the bottom serif, for example. If you imagine both of those sitting on two ends of an axis and you wanted to just slide your slider along, the intermediate instances that you would get would be completely mangled up, so we don‘t actually want users to have those. That‘s why the italic axis is binary.
Then the last one that is specified is the optical size axis. This looks like fun, but it‘s actually very, very important typographically and makes a lot of sense. In an optical size axis, you can control what the design looks like within the family depending on the sizes you are going to use the font in.
On the top, for example, we would have a really nice design. It has really intricate details. It has these hairline horizonals and really quite bold vertical parts in the letters. You can use it in really large sizes.
If you were to use this in smaller sizes, you can simulate that. But, just squinting at the screen right now, you will see that all of the hairline elements actually fall away. This is not suited at all for smaller sizes, so what the optical size axis does is compensate for these kind of things.
If you use a font in smaller sizes, you want to beef up those hairline elements, for example. You want to make the ledgers a little bit wider. Sometimes, you want to increase the X side as well just to make everything a little bit more legible when you have it in different environments.
Within a family, you can make these adjustments, put them in an optical size axis, and then when people use it, they can define, ‘Okay, this is a caption. I need to have that extreme of this optical size axis,‘ or ‘This is a headline. I use it in large, and I want this really nice, thin element in there.‘ Then they can choose that instance of the axis.
Then everything that is not specified is a lot more fun than that. You can have custom axes that you just define yourself. This one is an example of melt axis. This is a font that we designed based on melting chocolate in the sun. Basically, what it does it just melts away. It has the melt axis.
The thing with custom axes, as I said early on, is that you can‘t control exactly where it is supported or not. If you have an app, for example, that you designed yourself, you have control over everything in the background. This is fine to use. This is good fun. But don‘t count on browser support of these kinds of things by default.
While I was talking about integration, maybe it‘s good to have a look at where we can use variable fonts. This is a bit of a hit and miss with applications. Our design applications are kind of okay with this.
Adobe, they were on the board, so they knew this was coming. They were really quick implementing it in Photoshop and Illustrator. For some reason, InDesign took a while, but it‘s there now.
It still doesn‘t work natively in After Effects, even though that would be the one application where you want to have variable fonts in there, but it‘s not there yet. There are some, like Hexaround, plugins that you can use in order to make it work, but it‘s not natively supported yet.
I always tell people (for the last two and a half years now) that it‘s about to come to Figma because that‘s what they told me, but it‘s still not there. So, I‘m just going to tell you the same. I think it‘s about to come there.
Sketch is supported already, but it‘s kind of a hit and miss. It‘s never ever going to work in Office. I don‘t believe so. They are still grappling with kerning, trying to make that work, so I think this is on the very bottom of their priority list at the moment.
Browser support is much, much better -- apart, obviously, from Internet Explorer, who just couldn‘t care less. But all of the others are supporting variable fonts for some years now, so it‘s not even just on the latest version but it‘s been supported for a while now. If you want to use variable fonts on the Web, it‘s relatively safe to do so. Obviously, if you are concerned about people not updating their browsers regularly and looking at your website from older browsers, just have a fallback strategy with a static instance as you get them anywhere if you buy any kind of variable font that you want to use.
Yeah, that‘s very good news, especially since I started the talk with the whole advantage of variable fonts on the Web. So, go use them.
The way you do it is to kind of like link the fonts relatively easily. You just give it a URL and link the fonts, define the font family, link the header tag, and then, you can see here, you can apply the font variation settings. It‘s relatively easy as well.
In this instance, this is a font with these two axes: weight and width. The abbreviations are there. Then the numbers next to it are like the instance on the axis.
The range of axis depends on what the font developer makes available to you. For the weight, it‘s often 100 to 900, which 100 will be the hairline and 900 will be a black. You can go for the usual ones like 400 is usually regular; 700 is usually a bold.
You can just do it as you usually do with your font-weight settings. But as I said, everything else is accessible to you as well, so if you don‘t like the regular, you don‘t like the 400, go for 422.
I wanted to delete this slide. I wasn‘t sure if I wanted to talk about the cost of variable fonts. But I get a question a lot where people ask me, ‘Oh, so it‘s much, much easier to design fonts now for you,‘ and it really, really isn‘t, and you still have to pay us for fonts. [Laughter]
Basically, as an industry, we haven‘t really decided on how to price variable fonts yet. There are two arguments. One of them is, ‘Oh, it‘s just one font file, so I should just pay for one font.‘ The other one is, ‘Yeah, but you get access to a whole family of fonts, so you should pay for the whole family of fonts.‘
Neither of this is fair. Paying for just one font file is not fair to the type designer because we still put in all of this work; the same amount as we would for a whole family. But it wouldn‘t be fair on the user either if we charged for the whole family because how many people are realistically going to use the whole family?
Yeah, just looking back at a usual static font illustration, maybe perhaps a little bit of putting an insight into how we are designing these kinds of things. It‘s really by defining our extremes, as we did earlier on, which is, okay, I need everything from hairline to black, everything from narrow to wide. This is how it works as well.
For fonts, we are designing specifically for people who ask us to do those. I think most of us would go by effort. So, as a designer, I was trying to estimate how much do I need to put into this and how many weights do I actually have to design?
IN this instance, for example, we have a relatively small design space. I think it‘s just like regular to bold, which interpolates really well. So, I just need to draw all of the letters in the regular weight and all of the letters in the bold weight. Then everything in between is probably relatively good to use and I don‘t have to touch it up.
If my design space is much, much larger, so I have everything from hairline to black, it‘s a little bit different because the black, as you can see, is a little bit distorted. If you look at the hairline on the left-hand side, you can see it‘s almost mono-linear. There‘s no compensation happening. There‘s a lot of space there to actually define the outline. As a type designer, I need to work a lot more on the black weight where I don‘t actually have that much space for the strokes.
You can see the connection between the stem, which is the vertical part on the left-hand side of the letter, and the shoulder, which is coming out of there. In the black, you can see there‘s a lot of tapering happening, which is obviously not happening in the hairline weight.
If we were to just omit the regular weight and try to automatically interpolate those two weights, the regular weight would be much, much more distorted because we are doing so much compensation in the black weight, and it wouldn‘t be a very good regular weight. It would look distorted, but it would also not be as accessible and as readable as we want it to be for our users that read our body copy.
We need to have an intermediate weight in between, kind of like a tent pole to hold it all up. Obviously, if I have to draw three whole fonts instead of two fonts, that‘s probably going to come with a little bit of a price increase.
If you go to people‘s websites to download variable fonts, there are different strategies. Some people are working variable font first. You go to their website. You download your variable font, and you get the steady grades together with it.
Others are sub-setting some of those fonts, so in order to just make it more accessible to users, they don‘t give the whole space. But if people just need the space between the regular and the bold, they make it an option to download only the space.
Others are doing it the other way around. They go, ‘Okay, if you buy the whole family, you get the variable font for free.‘ Yeah, as I said, there‘s no consent on how we are pricing these kind of things. Then there is obviously this difference about people coming to us asking or commissioning us to do this for them, which is relatively easy to estimate our effort and cost.
For library fonts, things that we just set on our own website or reseller, it‘s a little bit more tricky. Just like everything in the font world, it‘s just not very united. There are a few, if you ever looked at end-user license agreements, they‘re all different from foundry-to-foundry.
It‘s very difficult to actually look through this and find out what you can and can‘t do with the fonts. The same for the prices. You need to go to every foundry‘s website in order to find out what you can and can‘t do.
Yeah, it increases, obviously, if you add more variables to this. In this case, if you add another axis, like the width axis, you would have to draw more instances of the font in order to just hold up all of these tent poles. Yeah, it would probably be more expensive in this case as well.
Yeah, the part that I really want to talk about, this is all that happened in the last five years. People are still not using variable fonts as much as I would like. I think it‘s a very good thing to do, but it‘s not quite there yet. I think people are a little bit hesitant.
We have a lot of people come to us for fonts where we explain variable fonts, they are very excited, and then once they have the font and they give it to the Web developers, they go, ‘Oh, I‘m not sure yet.‘ So, they have it in the drawer, but to use when they think it‘s safer. But actually, it‘s there. You can use it, and it makes a lot of sense functionality-wise. In some instances, obviously, also because it‘s just more expressive.
I have some examples for you. This one is a really lovely one. It kind of uses the idea of the optical size axis but for dark mode settings. If you ever designed an app or a website that you can toggle into dark mode, you know that when you have this white text on a black background instead of the reverse, the light kind of shines a little bit through. You have this halo effect, so the letters actually look bolder than they are because you have light shine through the letters, basically.
In order to compensate for this change in weight, if you don‘t want it, there is something that we call the dark mode axis, but it really just does what the optical size axis does. It decreases the weight when it is enabled, but it doesn‘t change any of the proportions of the letter.
This is really beautiful for using in navigations and user interfaces because no text will reflow. Your buttons are not going to change. It‘s going to look exactly the same on and off. But depending on whether or not the user is in dark mode, this is a really, really useful feature, I think, in order to compensate for these things.
Again, if you use this font, it‘s not going to come with an extra file size, so Web performance is not an issue here.
The next example is just responsiveness. We talked about this for the last 15 years now, but this is actually a really good one. If you resize your window, why not resize the font?
What you don‘t want to do is just create any kind of reflow in the text because nobody wants to read like that. What you can do, like we did here in this example, is just use the width access. If you resize your window (in this case), also use a different instance on the width axis.
This is a really lovely example from the very beginning when we started with variable fonts. It‘s a developer. Well, you‘d probably find him on Twitter under Aetherpoint. He basically used one of our fonts. What he did is, on the top is a static font and on the bottom is the variable font.
He used it in AR and filmed the position of the font and himself just moving around it. You can see, on the top, the steeper the angle is towards the text, the more difficult it gets to read because, obviously, you have a little bit of perspective happening there. The letters actually cram together a little bit.
On the bottom, it‘s the same font but as a variable version. All he uses there is the width axis, again, and he expands the letter a little bit as he moves towards it. It‘s legible in a longer way.
This is something he mocked up relatively quickly just to prove a point, but I think this is going to be quite interesting for things like gaming (VR gaming and AR gaming) and also AR in public settings. If we ever come to a point where we all wear our little AR glasses in the city and want to read the street signs, I think this is quite a nifty feature.
This is a website that uses a variable font and makes the best, most logical use of it (functionality-wise). They are not screaming for attention. They are using it in a very understated way. Basically, they‘re using a lot of different weights for the navigation, for the headlines, for sub-headers, and just pull out some information. Even captions you have in there that do exactly what I said earlier. They lead the eye of the reader.
If you look at how they are doing this, it‘s basically one font file that is in there. Then they chose one instance on the weight axis and one instance on the width axis that they like. For example, this is, I think, the running text. That is all. If you go there, all fonts on this page are just one system font and this one font with the three axes: weight with an italic.
Why I‘m showing this is because a lot of people, I think, initially, thought that variable fonts is just something for graphic designers who like fleshy things and moving images. Really, I think the intention and the best use of variable fonts is in this way, just using the functionality of it, serving one font instead of multiple, but getting all of these typographic niceties with it like being able to use more weights than we previously could.
I mean we always could use a lot of weights, but people wouldn‘t go to our website because it would load slowly. Now, we can just have different weights, different widths, italic versions in there, and it doesn‘t come at the cost of Web performance.
Yeah. I think I said everything I wanted to say about this one.
Then I‘m going to end up with some more fleshy bits as well. This is the typeface that I showed earlier with the melt axis. I‘ve just brought it back because this is something I‘ve seen very few examples of, but every time they do come, this is really good fun. Sometimes, you link your variable font to live data.
For example, you imagine having data about the weather in Dusseldorf. You go, ‘Okay. Depending on how hot it is, I want a different instance of my variable font on my digital billboard somewhere.‘
Or -- I don‘t know -- other weather data. Maybe it‘s raining a lot. I come from London, so this is happening a lot. I would love it if there were billboards around that just picked this up and tried to brighten up my day a little bit.
Other data could be noise. For example, I heard the first speaker. I think everyone was very excited to come back to this conference. The first speaker was really welcomed with a lot of applause. Imagine being able to just capture the sound, link it to the variable font, and the more applause you get, the bigger the font gets.
You could link it to voting data. You just voted in Germany, so what if, as the ratings come in, what if different font sizes or weights would indicate who is winning and who is losing at the moment? I think this could be quite interesting in an interactive way, but also kind of fun to look at as well.
Yeah, more fun. If you‘re into fleshy things, there are so many variable fonts out there. There‘s a website called variablefonts.com, I think. I‘ll look this up. [Laughter] I‘m going to send it to one of those social media things.
Basically, it lists all of the variable fonts (or almost all of the variable fonts) that are out there. Type designers have been really, really busy over the last five years. You can imagine we have been designing fonts in the same way since Gutenberg, really.
At one point, it moved to digital, but we did it exactly the same way. We kind of output the same way as well.
When we had the opportunity to just make things animate a little bit and explore the boundaries of variable fonts, everyone got really creative. You should have a look at what‘s out there and how you can use it. It‘s a lot of fun.
Then lastly, I know I‘m ten minutes early finishing up my talk, but I‘m also happy to take some questions afterward.
If you are into this, if you really like my talk, if you were interested in the variable fonts (especially the fleshy bits), then you should go and see Ulrike‘s talk tomorrow. She‘s going to talk about variable fonts, color fonts, and all kinds of fun things that you can do with fonts. You should go and tune in there.
That‘s me done. Thank you.