Transcription
[Applause]
Oliver Schoendorfer: Hello, everyone. We already know who is a developer in this room. We already know who is a design leader in this room. But who in this room is a designer? Yes.
And who of you or who is a typographer? Ooh, welcome, my friends. After this nice little session, we will be more typographers because we will all become typographers. We’ll embrace the new technology of variable fonts. But before that, let me tell you a little about me so you know who I am.
I am a designer, and I’m from Vienna. I think this is all the reason why I have a sausage under my skull on my illustration. I’m not sure. You can find me here on Twitter and Instagram.
For me, as a designer, it’s important to know things about code. I’m interested in code. I love CSS. I do prototypes and, uh, I wouldn’t say that I’m a front-end developer, though, because my fear starts with the words “Java” and “Script.” So, this is what I leave to more capable hands.
But most of my work consists of branding and doing stuff for various clients around Europe, and this might be branding work for traditional corporate designs or maybe for cultural institutions or for nice startups like this one that made it bearable for horses that checks when they have a nocturnal colic, and it sends an alert - interesting. Artwork for musicians or for the vocal ensemble of the Vienna State Opera, a branding and a Web design, and for some authentic vintage eyewear by Viennese optician with some nice Viennese slang in there, “oidn.”
Or for some friends, a server platform they did where we did the logo design and photography. Of course, I had to do a custom logo for their pregnancy project of my wife. Sure.
[Chuckle]
Oliver: Or maybe a nerdy top trumps game I did with some friends where you could fettle LinkedIn versus YouPorn.
[Chuckle]
Oliver: We sold this online. It’s now offline, but you see typography finds a good spot or a good place in my daily working routine. Naturally, it has to spill over into my private life as well like when it takes me forever to fill out the food vouchers for my daughter’s kindergarten.
[Laughter]
Oliver: To be fair, the other daughter was sick, and I stayed at home, and I had time. Okay.
[Chuckle]
Oliver: Or when I do chalkboard lettering for my beloved arthouse cinema in my hometown. Then, after the first time, after ten hours drawing this stuff, finding out that you do not spell Ruccola with two Cs.
[Laughter]
Oliver: No, you don’t! Well, now I know. But I also wanted to take it to another level, to a whole new extreme. What’s better than just writing letters? It’s better to feel them, touch them. So, I made a giant set out of wood, a wooden stool, and I painted it and I built it.
Yes, this is how you touch a Serif. It’s good. And then apply some real paint on it, not just clicking swatches in Illustrator or InDesign. It’s much more interesting. So, yeah, this is also something I did.
You can see the type is near and dear to my heart and I’m seeing that I’m infecting you as well. This is my mission here.
I was psyched. I was thrilled when Web fonts were introduced back in 2010. I was very happy because, finally, I had a lot of opportunities I didn’t have before. The thing is, I also accepted the kind of limitations that come when you only should load a certain amount of fonts. Of course, we’re very responsible people, so we only load a small amount of fonts.
Still, I always missed this variety and possible styles I’m familiar with coming from print design. And so, I was laying out an article about Web typography and I said, just for the fun of it, just to try it out, let us use whatever font styles I want. I set it with an interesting heading that pulls you in, some nice lead-in text, yes, then, ooh, big lights, crazy semi-slanted headings on the left side. Interesting. Yeah? And then a cool quote, also beautiful, a lightweight. Nice.
What I ended up with were 18 font files, and this comes at 632 kilobytes. I’m a bit ashamed because I saw a lot of developers in here, so for Web fonts only.
But what if I told you I could do it with less? Maybe with just one font file that comes at 56 kilobytes of overall file size? Ooh, now I got you interested. I see.
[Laughter]
Oliver: Now I got these developers interested. Welcome, my friends, to the world of variable fonts.
[Laughter]
Oliver: The arguments are finally over, or may they aren’t. What we will learn today is how you all can get started with variable fonts right now. We will tackle what the hell are variable fonts, then how to use variable fonts on the Web. We’ll have some good times. We’ll be excited. You’ll be longing for more. Give me that, and I will. But then, we’ll also have some hard times.
[disappointing groans]
Oliver: Focus on potential pitfalls and things we have to worry about. Yeah, it’s working for the Web, I guess. But after that, eventually, I’ll build you up again and you all will be fixed and ready, and you’ll leave this conference and do something with variable fonts, or at least after the conference in the evening then.
All right. So, the first one, what the hell are variable fonts? The thing is, when you have a typeface with various weights, for example, or styles--in this example it’s weights--traditionally every single style is stored in one single file. We know that, of course.
Now, with open type variable fonts, you can store all these files in one individual file, a variable font file then. How does this work? The variable font stores one outline, and the points that create this outline and how they should move or behave to create another style like here again another weight, for example. This magical thing happens through interpolation. Yes, there it is.
[Laughter]
Oliver: This means we still have named instances we’re familiar with. It’s not anything very new, so you still have medium, bold, or font weight 700. But you also have optional designs in between, and you can adjust them however you want to. You see why this is a wet dream for a typographer. Yes.
And this interpolation happens along certain axes. In this case, it’s a weight axis, but you can also combine several axes together, and then you can combine a weight axis with a width axis from condense to extend it, and you get an enormous amount of different styles. In this case, it would be 25,000 different styles out of one single file. Wow! Bam!
Nice, so now let’s talk about how to use them on the Web. But first, I have to drink something because it excites me too much.
[Laughter]
Oliver: Cheap joke, but okay. So, how do you use variable fonts on the Web? This is interesting. I’m starting with browser support. I’m not getting you down afterward. We’re at 76% global support. This technology has been introduced two years ago.
What, 76%? Yes, it’s true, and all major browsers are onboard. If you only look at mobile support in Germany, it’s 90%. Come on. This is nice. This works. It’s something we can use, but how can we do it? How can we find a variable font?
Well, at first, there’s a brilliant website called v-fonts.com by Nick Sherman, and there you can discover new variable fonts. These fonts are there posted regularly like one or two a week or maybe less or maybe often, but there’s also a Twitter account where you can follow. So, v-fonts.com is great and you also have this axis where you can slide around and play with it and try it out.
Okay, we found a variable font. Now we’re going to integrate it with our good friend the font face rule because we do not use GUI fonts. We just use font-face rule. Sure. Better. We want to keep them ours, near and dear to our server.
The thing that changes here is it’s only the variation parts in the format. If it’s a true type, then you would add -variations. You still should add a part without or a source without the variations part for all the supporting browsers that they get it, but then they will also access the variable font. This is easy; no-brainer.
The next one, let’s talk about these axes. There’s another handy website, axis-praxis.org, by Laurence Penney, and there you can drag your font file in there and find out what it’s capable of. Then you see these different axes that we talked about before, and you see the ranges of these axes and how you can use it.
Talking about this axis now, this is the axis of good and there are five registered axes or common axes. We’re going to talk about each individually now and how to change them in our CSS.
We already heard about the weight axis, changing the weight. Easy. Here are two CSS properties to do that. There’s a high-level property, and this will become the standard.
Right now, it’s a working draft. It works in most supporting browsers, but there’s a low-level property, and this is working right now in every browser that supports variable fonts.
If you’re in doubt, go for the low-level property and drag that. There is this weird four-character tag, and this is weight. You can guess that. You use just this one. This is quite technical for a designer, isn’t it?
And now, we have the width axis; also, easy changing the width. There is the high-level property font-stretch. Typographers here, do you feel it? And everybody else, INTERMISSION.
[Laughter]
Oliver: What the fuck? We’re not stretching fonts. They created horrible mutants that are torn apart and, look, this is what I found.
[Laughter]
Oliver: What I found on a jeans label and, since then, it haunts me. It haunts me.
[Laughter]
Oliver: And now, it’s haunting you!
[Laughter]
Oliver: Look at the C.
[Laughter]
Oliver: Away! So, no, we are not stretching fonts. Take away message, only one: we are not stretching fonts and create this. What’s this dark technique? Transform: scaleX. Who does this? Nobody does this.
Do you think how the vertical lines look bolder and chubby and the distance between letters? Go away. Go away. No! Font stretch, ironically, does a good thing there. It changes the width within the set design space by a type designer. So, bad name; good cause. Don’t stretch font. Use font stretch, though. Rot in hell.
[Laughter and applause]
Oliver: Now you’re awake, so intermission is over.
Okay, the next one is italic axis. What’s happening there? Did I do something wrong? No, I did not. It’s not morphing. It’s jumping, and the thing is, a true italic is not just a slanted version of the upright. It’s got different character forms like you can see with the A, so it’s not the same outline here. It switches. This is the reason why it’s only on or off. You can’t slide in between this.
But there are typefaces that are slanted versions of the upright, and these are called slanted typefaces. There’s a slant axis, like here, and this is a degrees value at font style oblique; a different name for slanted. Yeah. I don’t know why this is. It’s a slant axis, but it’s font style oblique. Okay.
Then we have something that will excite you even more: optical sizing. Yes. You don’t have a clue. Okay.
[Laughter]
Oliver: Optical sizing is a concept that compensates for printing conditions and it aims for optimized legibility on small sizes but optimized personality on large sizes. When I scale this up to the same size, you can see on the left side 12 pixels, on the right side 72, but it’s all the same now. You have a sturdier stroke. You have less contrast. Then it goes to the right direction with more details, more contrast. This is something that’s from the times of metal type, and it got lost through digitization, more or less, if you didn’t create a certain style only for certain sizes, but now it comes back and it’s fluid. It just works out of the box because it’s turned on by default, and this turns me also on.
[Laughter]
Oliver: Wow! It’s just working. Besides this nice axis, we have already seen the common axis, there are also free axis. Every type designer can decide whatever axis they want. There you have to use the low-level property then, of course, because they can make up weird four-character tags and use them, and you have to find out the name by checking the font file.
All right, so now we’re good to go and we’ll have some golden times, my friends. Good times are coming up. But another break for me again here.
All right. The first thing for the developers among you, let’s take a look at an average news site like the Sueddeutsche Zeitung, and how many fonts do they load? They load seven different fonts and four of them are Work Sans, and they all come with a certain file size. If you combine the file sizes of Work Sans, you have 166 kilobytes. Yeah, it’s quite okay for that amount of file sizes, but you could easily replace these with a variable font if there was one. There’s not one for Open Sans yet, but this could save you more than 50% of your file size. Are the developers excited?
Now, let’s talk about other things like designers. There are also new possibilities design-wise like this is a typeface from dstype where they add Serifs and make it fluid where you can add and remove Serifs. I think this is a very interesting concept, although I’m not that satisfied with the result or the quality of the result for a long reading text. I think it’s a great idea, and it brings up new ideas of how you could use type.
Then you could also adjust typography precisely to the medium. When you take a look at the redesign of Dropbox that they launched last year, you see when you look on the right side of the browser that the text adapts to the width of the space that’s available. This is quite nice, isn’t it? They didn’t do this with a variable font, though. They used static ones, I think 19 on that website, but only designers look at it anyway, and technology wasn’t ready back then in 2017 in those old days. But now, they could easily do it with a variable font.
You can also bring life into a text, and who doesn’t want that? As I’ve seen or as I’ve shown you before in the titles for the chapters, these were all unimagined in the browser and the screen captured that, but there’s also a very beautiful website by Microsoft where they show how they animate the weight axis when you see the headings in between. So, also very nice, and also something that wouldn’t have been possible before.
Here in this example, you could experience something with the optical sizing axis. Here you see you have text. I set it in viewport units, so it will scale with the width of the viewport. I open up this example in Chrome. When I’m making my window bigger, the text gets bigger. Of course, the strokes get thicker. Natural behavior; it just scales proportionately.
But what if I wanted to have a consistent hairline stroke here? This typeface here as an optical sizing axis that allows you to do just that. It’s a typeface by David Jonathan Ross, and he’s going to talk tomorrow here. Thank you, David, for providing all these great typefaces for this presentation and also the workshop yesterday because he does a lot of stuff with it.
The only thing here I’m now changing is I’m opening up this file in Safari. Safari supports the optical sizing by default. When I scale it up now, it constantly gets recalculated, and it remains a consistent stroke. That’s nice. This wouldn’t have been possible before.
There are also some nice opportunities for branding like when you take a look at this Chinese brand. I cannot; I really cannot pronounce. I just won’t do it, but that’s the name. They created a nice variable font that changes with sound. When you click, you don’t have to hear the sound here, but you see it changes some parts of the text. It’s a great branding opportunity here as well.
So, where there’s much light, shadow is deep or, where you have a lot of choices, you can choose wrong.
[Laughter]
Oliver: You see we’re getting to that part where it’s not that cool, maybe, or it’s cool. At least you will have a hard time choosing.
Here, in this example, Amstelvar has an enormous amount of axes, and you can really mess up bad when you change stuff here. This font was created to showcase the technology. Keep this in your head. It was not created to go bad but, the thing is, I could also imagine clients or other people fucking up with only a weight axis or a width axis. What I mean is you clearly need more typographic knowledge here why you want to do what.
On the other hand, these are the named instances for Acumin variable in Photoshop. There are 90 named instances, and they go from--what is it--extra condensed thin to wide ultra-black italic. This is just choice overload here. Do we really need that many font weight styles? I’m not sure. Maybe we just need three fonts. Maybe I just need regular, italic, and bold. For my body text, this is all really sufficient because I only need fonts to combine when I want to highlight stuff. I only can highlight stuff when things look different enough.
You don’t want it to look a bit different, so maybe I only need three files and then the static fonts will always be or, most of the time, they could be even smaller than one variable font file. This performance gain always comes under a certain condition. You always have to compare. It’s not, “I’m saving on.” I’m saving on when I’m using this design space and when I want to use this variety, so you always have to consider.
What if I need an italic weight as well? The thing is, as I told you before, most variable fonts do not contain an italic style in the same file because this file then has a different outline, so they have two files then. This is the reason why this might even be bigger.
The other thing is, who is going to pay for it and how much do they cost? Right now, we’re used to 30 to 60 euros maybe for one style and 300 to 700 euros for a family, maybe more. Not more, I guess, but maybe less. These are high-quality products. A variable font really provides more than a font family, so why should it cost less? Of course, there are quality fonts that are very cheap or at a reasonable price always, but type designers are always struggling, figuring out how to do this. It’s always a good idea to contact a type designer and tell them or tell type designers what you’re interested in, that you want a font as a variable font and this stuff.
This is still a bit unsolved but, right now, there are a lot of variable fonts that are open source because a lot of people are experimenting, wanting to get out this technology. David is going to tell you a bit more about this tomorrow, and so you get them for free right now.
Then you could also rent them or get them hosted on Fontstand. Right now, at the moment, Google Fonts do not provide variable fonts. They provide them as an early access, but you cannot choose them. But I have a feeling that they’re working on it. They haven’t announced anything yet to roll this out bigger because they will save a ton of bandwidth once they serve variable fonts, of course.
From Adobe Fonts, we don’t know what their plans are with variable fonts and hosting them.
But, at the moment, you can always buy them with the static fonts. This is if there is a retailer, you can buy them and get the variable font as an extra. Because you bought the whole family, here, have the variable font and use it. This is a very realistic use case we could also consider right now, maybe for a free one or for a commercial, for a retail one.
This is the last point then, too, how you can get started right now. I hear you say or think, “Well, nice technology, but I do not want to jeopardize my whole--” I hope I hear you think that, say that, “I do not want to jeopardize my whole typographical experience only and only provide a variable font for people that are on the recent technology stack.” You don’t want that. No. No.
Web fonts are very supported, so why not use Web fonts as a static Web font as a fallback? So, the first choice is a variable font. Then use a static Web font as a first fallback option. Then, of course, if this doesn’t work, system fonts is a fallback. People who do not see the variable font will still see this value, this branding you’re providing by great typography, and this is also the reason why we do it.
Here, I made a pen on CodePen. I put it online where you can switch between a fallback font and the variable font. You can take a look at this. It’s very easy how it works. The hardest part was this total -- oh, my God, it was JavaScript. I figured it out eventually, but it was no good. Yeah.
So, here you can see when I switch it, it changes the font and it gets a bit wider because, on this narrow screen, I made it a bit narrow. Now, on the widescreen, when I switch it here, you see that the headline was wide again and then it got narrow. The thing is, I’m using this weight axis on a small screen and make the text a bit narrow, so I get more words into one line and have a better reading experience and stuff.
But on a big screen, you don’t see a difference between the body font at the full width and the other one. This is very easy, so you don’t lose your branding. It’s like progressive enhancement with typography. We should do this. If you use font variation settings and you set it at the width, other browsers that do not support this, they will just ignore it because they don’t care. Easy.
But maybe you just want to add some special typographic features here. If the variable font is supported, you want to have it big, but you want it light and condensed. You add a feature query here with supports. This feature query here, it’s supported by all browsers that support variable fonts, so this is also very easy. You only put in stuff there that all the browsers would understand that would affect the normal font in as well.
You get it. I don’t have to overexplain here.
What I also want to show you, here are some nice tools, too, now. In Firefox, you can check the weight axis and the slant axis or whatever axis you want or what the font provides in the dev tools. Firefox is the only browser that does this right now, so it makes it very easy for every designer to use this stuff, to try it out, and to find the ranges. Right now, Firefox only supports this.
Summing it up, you have one font file with many possibilities. You have fine graded influences for better typography when you know what you’re doing. If you don’t, consult a typographer, please.
[Chuckles]
Oliver: Improvements are by default, like for example with optical sizes, and you also have a performance gain under certain conditions. I saw three to four font styles and you get this performance gain. And, use Web fonts as a first fallback option. Then you won’t lose your branding, value, and your typographic voice.
This is a good slide to take a picture from. You can always find this online and I’m not going to walk you through every resource here. But Serif San as I am, I’m pointing out the two things that I wrote. [Laughs] The first one is an article that sums this talk up, more or less, and the other one is, I just released about how to use a variable font with a Web font as a fallback.
When I was designing this demo page, it wasn’t easy for me because I really adopted this mindset of only using three to four different font styles because it doesn’t make much sense in body text and it was hard for me to break out of this mindset, to break out of this routine. But I made a switch down there--JavaScript again; oh, my God--and here you can see how it changes when we only use three typefaces. Of course, it looks much duller, less interesting. The body text doesn’t change because there it only needs three, but the heading is in between and also the nice poll quote looks, yeah, also nice, but not that nice.
You see there can be benefits. It can be beneficial to have more styles and more variety here.
What I want to leave you with is that this is the best time for variable and flexible and great typography. We are living in this golden age now. We can do anything with typography. You have to see this is something maybe you use it, use it with something small, start with it, shape where it’s going, and I understand if you’re overwhelmed by that many possibilities. I was too.
[Chuckles]
Oliver: But if you ever feel in pain or sorrow, drop me a line. Let’s have a conversation. It’s always great to talk about typography. Only good things happen when doing that.
But remember; when you use a variable font, try to design for variable typography. Try to use this extra design space. Try to make something different because, the file saving aspect, this isn’t something interesting. The technical stuff isn’t interesting.
I just learned this stuff to know what I can do, how I can design things. But when you really embrace these possibilities and use this additional design space, you can do something great and then you can really unfold the possibilities of variable typography, and they are giving your content a better typographic voice. So, thank you.
[Applause]
