 I'm presenting Julia Laco here talking about variable fonts. Julia is a web designer, and like every web designer has a good loves typography. So he's going to introduce us to this word about variable fonts. Yesterday, talking with her about this talk, he tells me that he wants to be really an inspiration to get creative with this new kind of fonts. So I give the word to Julia. So thank you. Variable fonts. The future of typography has already begun. Did you realize it? Who knows something about variable fonts? So we are going to discover something new today, it looks like. First of all, let me thank Warkam Bilano for having me here. And you can tweet if you like to let people outside know something about this. And start with the definition. Variable fonts. You might have seen some animations like these animated gifs around the web. And you might have started thinking that variable fonts are something that moves. Maybe, but that's not the main characteristics in my opinion. Let me make a premise before all. It's about typography and terminology. In English, they have this nice distinction between typeface and font. But typeface is basically a concept. Whereas in the digital world, a font is a file. In the metal world, this is a font. More or less. Let's have an example. Roboto is a concept and is a typeface. Whereas Roboto-Italic, Roboto-Bold, Roboto-Bold-Italic are all fonts. And then we have the typeface family. It's a nice concept to illustrate variable fonts. Because the typeface family is something that a type designer has put together under the same name, the name of the typeface. But it happens by history. And then we have the font family. That's a CSS property we use in our websites. We use files in websites in order for them to work. Otherwise, with concepts, they won't work. Everything we know about typefaces and fonts comes from a history, a long history, five centuries of history. And at the beginning of the press era, the Roman and Italic versions weren't on the same family and on the same page. You have to wait a couple of centuries in order to have this pairing in a typeface. And even more, 200 years later, to have bigger families with extended version of a font, a compressed version and things like that. And then on, we start in having a big terminology in each language. You see, you might recognize in the Italian or English words like bold or grasset, things like that. But let's go back to the future, the future of today. And I have a question. And the question, who asks for variable fonts? Well, something very unusual happened in the digital industry at the end of 2016. There was an agreement, an industrial agreement between four big names on the digital world, these four, Microsoft, Apple, Adobe and Google. And they agreed on a format, yes. The format was variable fonts. Soon, some other companies joined the crew and what is the browser support for this Well, one hour, one year and a half later, after the announcement, it was at around 10%. One year later, it grew to almost 80% of global usage. Today we are here, 87% of global usage. I've never seen anything in the web history, anything going so fast in the browser support. Maybe it's because of that agreement, I guess. So, if you are interested, I go on. What is a variable font? Well, it's not a new format. Technically, it's an evolution of an already known format, the open type. It's just a new version. This is the definition they gave during the announcement. It's a bit difficult to understand. I'll try to clarify a bit. A variable font, it says, is a single font file that behaves like multiple fonts. Fonts, what does it mean? Well, every time you have something, a new version of something, you start renaming the older version in a new way. So, since we now have variable fonts, we can start renaming the traditional fonts as static fonts in opposition. This image might explain a bit better what I mean. Static fonts are different files. Each of different files deals with a particular variation, a particular style. It's compressed, or it's extended, it's bold, or thin, a thing like that. Whereas a variable font is just a one single font file that behaves like multiple static fonts. So maybe you understand a bit better the definition of before. Yes, no? A bit. Well, the main part of variable fonts is the fact that they can take advantage of variation axes. Here we have a representation, a 3D representation on a font with three axes. Presenting something with four axes is a bit more difficult. But we can have a lot of different axes in a variable font. There are five registered, predefined variable axes, variation axes, that deal with traditional typography. Let's say so, we'll see later on, better. And then you can have, sorry, a lot of custom axes. They are up to the type designer. The five registered axes at this five, weight with optical size, difficult, slant, Italic. The weight axes, it's the one that's more useful, I guess. So I'll try to explain this slide. From one side of the axes we have a character with a very thin stroke. From the other side of the axes we have a character with a very strong stroke. And between those two we can have a lot of variations. I just draw one, but you can have a lot of variation. How much thin and how much bold the character will be, it's defined inside a variable font by numbers. And we have to know those numbers in order to use them in our CSS. What happens when we add an extra axis, like the weight axes? We have an explosion of possibilities. These are nine, but there are a lot of interpolation between all these shapes. I'll try to explain this third axis that might be difficult to grasp if you don't have a bit of typography knowledge. What is the main difference between the digital fonts and the metal fonts that here we have or things like that? The main difference is that in the old typography each font was optimized for a particular size. So you had the proper font for each size. And they weren't only the same shape, shrink or enlarge. We are used to doing the digital word. And with this axis, the optical size, we can bring back this characteristic to the digital word. So if we use a combination between the font size and the optical size axis, we'll end up with something like this. The font is optimized by size. You might not notice the optimization. I'll try to describe it a bit. Here you have a font with two strokes, one thin and one strong. The contrast between the two is high. You can appreciate it in a big size, whereas you cannot appreciate it here. In that case, we have lesser contrast between strokes. You better see this. If you put them at the same size, you notice a difference. It's not only a question of contrast between strokes. It might be a different aperture. The smaller the font, the bigger you can dare to have the aperture. And on the other side, if you have a big font, you can dare to have a very small aperture. It's because otherwise, when it's small, I'll let you see, when it's small and you have a smaller aperture, you may take that letter for an O, for example. The fourth axis is a slant. The slant is only something that is inclined, slanted. And it's a bit different from what we know as italic. Italic is not only a font that is slanted, but it's something that has a different history. And in a lot of typefaces, we have different shapes for the Roman and italic. And since the shapes are very different, it's not possible to have a variation between the two. An interpolation is technically not possible. So this axis is just a Boolean axis. It's either 1 or 0. It's italic or not. Because of these constraints in interpolation, you have to have the same numbers of points defined in a shape in order to interpolate between the two. Okay, we've seen five registered axes of the traditional typography that are now in the variable fonts. And what happens if you combine those axes? Well, you can be creative. The type designer can be creative and design new kind of fonts that we've never seen before. An upright italic or a slanted not italic, things that they can think of. And this was with only five axes. What about with the extra custom axes? Look at this new... Well, it's very new. It's freshly baked font. And we have three... Oops, sorry. We have three traditional axes in small cups and two custom axes. One of those is this one. It's mono axes. And those axes transform a sensory font into a mono space font, something weird in the tradition of typography. So think what can happen with more than 64,000 custom axes possible into the variable fonts. You can start having things that change in, I don't know, how many variations. And something... Some designer might think of very new kind of axes, the number of points, shapes that makes a font or some leaves that grows out of your font, things like that. But what happens? Under too many possibilities, we as web designers, what can we do with all these possibilities? Shall we become type designers ourselves? Luckily, the format has this characteristic that they are called name instances. So the type designers can bring back what we had before. The type designer can choose for you the best solutions and put those solutions inside a font so that you can go on working as you did before using the bold, the italic, the extended version, I don't know, of the font. You can use something in between, but you might follow those suggestions. So what are the advantages of variable fonts? Performance. Yes or no? In my opinion, you have to balance the two. So when you put some web fonts in a website, you generally put some different styles. So you end up with some of the weight of those styles. Each variable font, which is one single font, will weight less than the amount of the others, the static ones. So it's generally a very good choice for performance. When talking about performance in web fonts, you better use some other techniques. I don't have the time to talk about this now, but you have to use the Worf tool, that's its compressed version. You have to make the subsetting, maybe if the license of the font allows it. And you have to have a web font loading practice, web practice, one of your... And today, now it's coming, CSS is starting helping us. And another advantage is bringing back the optical size into the history of typography. You can make a fine tuning. That's, I think, the real advantage of... You can put all these possibilities inside your website, just with one file. You can, for example, think to use variable fonts to adapt to languages. I make an example to give you an idea. If you have a multi-language site, you have a language with long words, such as German, for example, you can decide to style the German version with a more compressed web font. Or if you're French, you're dealing with the accents, for example, you adjust that axis. And, of course, they are a big advantage in the responsive web typography or fluid web typography, as you like, allowing for a lot of fine tuning. But there comes also some disadvantages. And the first one is the choice. Where are they? They don't have so many variable fonts ready yet. On the other side, there would be another disadvantage. It would be the price. There are open-source fonts, but there are a lot of fonts that you can buy. And in order to buy a variable font, we should pay for the entire family. At the time being, it's quite expensive. So we see what happens in the market in the near future. Then you can have a criminal potential. That's an advantage. What do I mean? It's typographic crimes. You have so many possibilities to use a lot of different variations that you should have an idea of what to do with that. So you might end up doing things not so nice. So use it with a project in mind. Implementation. Just a few words on this. You can use different CSS properties. For the time being, a low-level CSS property is recommended if you want to use all of the axes of a variable font. Be careful that they overwrite each other because they are low-level CSS properties. In the near future, we will use... This is the font variation settings, but in the near future, we will use something that is still in the CSS4 font module recommendation. And we'll have different proper CSS properties to deal with this. And maybe this allows the font thing to do with the browser too. Another important thing is to have a nice fallback stack when you're using web fonts. So you might choose to have variable fonts, but you still need a static one that doesn't support it. But don't do it like that. That's not the correct way to do it, the right way to do it. This is far more progressive enhancement using the add support feature query. And at the same time, if you are hosting yourself the font, you should have the variable version and the static version as well and do something like this. But good news are coming for those that would want to use this technique. And Google Fonts API version 2, this is ready. And this new API will allow you to recall both the variable and the static fonts. But where can I find the variable fonts? That was the question before. I've used some Google Fonts early access, but they were experiments more or less used in the example as before. But here is a big news. There are 10 variable fonts available with the new Google Fonts API. And if you are using one of those, you can start your experiments with the variable fonts. Actually, Google has already done this for you for the Oswald font, red, because it's really better with regard to performance. WordPress new theme 2020 is already using a variable font. It's the Inter Barasmus Anderson. So you might take the same example and find out what it helps in the fine-tuning of your websites. Otherwise, if you want to find out some other fonts, you can check your creative software. You might have a creative software I won't mention, but maybe you already have those fonts at your disposal somewhere. Then you can look for font distributors or ask your trusted foundry. I'll leave you some tools to play with. One is axis per axis. The other is the fonts, play type detail. In those three tools, you can experiment with the axis. This is a very nice tool if you want to implement it. You drop a font and it will show you the characteristics of the font. There are some others, tools like this. This is very nice. But let's see what we can use those variable fonts for. What are the potentials? In my opinion, one of the interesting potentials of variable fonts are multimedia interfaces. You see what happens if you give as an input the font movement, for example, and then you can change some weight or width axis. This is an example, it's not an interface, but you can give it a meaning in your design. Or I cannot show it. Let it listen to you now, but you can start as a link there. If you use the input of the microphone, the font will change. For example, if you talk louder, the font gets bolder. Think what that can be in the vocal new environment we are going to. Or you can imagine, I don't have an example here, but some pressure sensor device is changing with the weight for axis, for example. Or on the other side you can have fonts that adapt to the environment. That's a very nice, it's not register axis, it's called grade in typography. This is what it does. Look at the column at your left. You see changes just in the color of the font, but it doesn't reflow. Since it doesn't reflow, it's very useful in web design for over effect. And look at this example. If you change the ambient light, your computer as the camera, as the input device, and this axis, the grade, can change. So if the light changes, the font adapts. Or if you have a device that can measure your distance from your screen, you can adapt the fonts to the distance. Or new environments, virtual reality or augmented reality, you have to have fonts in 3D. That type is under that announced that one year ago, when it was that they were starting making new fonts for those new environments. And infographics as well. I show you this pen, that's wonderful for me in infographics, because let's take big data, meteorological data of each town has a temperature and the wind data. And then you adapt. For example, if it's hotter, the font gets bolder. Or there's a lot of wind, it's most slanted. So the infographics representing big data could be easy with variable fonts. Or you can think of animations, but please give some meaning, some semantic to your animation, not do it just for the sake of doing them. Or for accessibility and particular needs. I don't know, Dixia for example, you can adapt a lot of things in the typography in order to have better reading experiences. And as last I would like to think of this expressiveness you can reach. There's a nice book I've read of Sarah Heinren that deals with how the shapes of the fonts might be linked to emotions. So a font that is very straight communicates more calm, whereas something that is slanted is more anxious. So you can play with the temperature of your fonts, you might have a sort of mood axis. Thank you for your attention. Thank you Julia, very inspirational. Some questions? So I'm going to ask you something. What can we do if you want to start doing something and try this variable fonts at home? I think that with Google Fonts 10 variable fonts available you can start from that for example. Or play with the tools I suggested and start familiarize with them. Because it's going to be something that, in my opinion, will change quite fast. So get ready. Do you prefer me to have the question in Italian or in English? Okay, so I wanted to ask you something about the fact that you've set up the possibility to use the font for the dyslexia. What does it mean in particular and how can it be used? It's not a simple topic because it's not easy to understand what really works for us. I'm not an expert in this. I know for sure that there are things that can be improved in legibility. I mean, a font for dyslexics, from the projects I've seen, tend to have, I don't know, very different letters from each other. Those that can be changed, the P and the B, and certain characteristics of this type, can have different series, different graces, the P from the Q, for example, the B from the D, so that one can recognize them and the usual dyslexic, I think, inverts the direction of reading. Difficulties in recognizing two things that are maybe spectacular, for us it's obvious that dyslexics has the most difficulty on this front. Or, I don't know, good rules of legibility, like the opening, in a text or a body you have the opening a little more, the characters with the big opening, like, I don't know, the elvetica, has been used for titles, because it has very narrow openings. If you use it in a text, very small, the eggs become closed, you can't read them, there are some elements that you can do. So I imagine that a font could have an axis linked to dyslexics, where you compare these different graces according to the letters, in short, more incriminated, and I don't know the height of the lines, some of the details that maybe studied in the opening help this legibility. One could have a website where you put, so to speak, variations for dyslexics, so you have better contrast, or you could have many types of optimizations, so you could choose the user as well as the user. Any other question? I don't know if I lost it, but I didn't understand it. The reason why I didn't have these fonts and then, since we were talking about SEO, loading these dynamic fonts doesn't mean loading pages that may not use all these variations, but you have to load I think it's a larger library of the single font that is normally loaded. That's the opposite. I'll answer this question right away. Now, from the media, from the ACTP archives, it seems that most of the websites that have the fonts have six, from six to eight fonts that are loaded a lot at the weight level, especially if they are implemented without a proper document. Let's say that six fonts belong to the same typographic family, then a variable font allows us to have them all six, nine, but I would say nine hundred and ninety-nine. Nine hundred and ninety-nine are the only weight variations. Let's take the weight. Now we can have nine states, one hundred, two hundred, and we can have from one to nine hundred and ninety-nine which seems to me enough to cover our typographic needs. In a single font, that single font weighs much less than four, already just a variable font weighs less than four in general, to give you an idea. So it's convenient. With the same weight as before, it's incredible. The reason is because everyone is interested to have a new, more efficient format, each with its motivations, in my opinion. Adobe does Microsoft, Apple have operating systems, for example Apple has San Francisco which is a variable font, a system font. I also believe that Microsoft can produce UI. In fact, the new operating system fonts are variable. Adobe does programs, so now variable fonts are available. I talked about the web part, but there is the whole world of printing and programming for printing, so now they support Photoshop, Illustrator, InDesign, Sketch, all of them. It's incredible that they agreed on a format that they tried to do in the past, but they failed. The analysts say that they failed because there was no web. Now the advantage is and then Google, I didn't mention it, but Google has the interest to reduce the load of what is distributed. If you think about Google Fonts, we take Google Fonts but they put in the server and if they reduce the weight they save a little. So, for a more ecological world variable fonts. Good. Let's give them a round of applause. I would like to know the fonts used in the presentation. There was the extra slide. Well, is there anyone else who wants to ask a question? Do we have 5 minutes? Yes? Hi, I admit that I didn't have many weeks on 2020. I wanted to ask when you talked about support for the variable fonts on the new 2020 theme. At the back-end level there is already a default variable font or even there are also properties at the front-end level of management when I create the post I can make interventions on the variable fonts. If you change the CSS, yes. You change the CSS. Not at the instrument level. I didn't look at it. In that sense, no. But there is a default variable font. Yes, what you see takes from a variable font. If you see it, it has a certain graphic care. Yes, yes, yes. Thank you. Thank you again, Giulia. She will be here with us all day.