 I'm Dave Crossens and I'm going to talk to you about Variable Fonts. So I've been working on the Libra fonts for many years now, and part of my motivation to work on Libra fonts was because of the Libra graphics meeting, which I attended the first one in 2006. So I'm very happy to be here presenting Variable Fonts to you. So I want to talk a little bit about the problem which Variable Fonts can solve. So I work as a program manager at Google on the Google Fonts project, and we've been updating the quality of some of the fonts in the Google Fonts collection in the last few years. One of the most popular fonts is Montserrat. It's been featured on over five million webpages, web domains, and it's now a big family. It has a full range of weights, and it's been a collaborative project across continents, different type designers from around the world have been contributing. So this recent update at the end of last year, it was already a full set of weights, but the 400 weight, the default weight was a little bit too dark. So to improve the quality of the family, that 400 weight was reduced a little bit, so it's a little bit lighter on the page. So that obviously is going to be a problem if you're using the old version, you start using the new version, you want to be able to use the same kind of weight you had before. So the medium weight, the 500, was made what the 400 used to be, and the 600 became what the 500 used to be, and eventually you end up in the same place. The 100 and 900 are very similar. So when Google published this update, not everybody was pleased about this improvement in quality. So on the GitHub issue tracker of the font project, there were some discussions about whether this update made sense. Is this a subtle difference between the old version and the new one? Well, I think that it is relatively subtle for a professional designer. You could say, well, this is a big difference, but many people would not be able to tell the difference very finely. It's a somewhat subtle distinction. It depends on who you are. It's subjective, I think. So as I was explaining why this change had been made, people got a little bit upset, and you can't please everyone over time. I mentioned, you know, I came to the LibraGraphics meeting the first one in 2006, and the reason I was attending the meeting is I became very frustrated with the proprietary design software that I was using in college. I was studying graphic design, and I was learning about typography. I was very interested in typography. And I became very annoyed because I was sort of reading textbooks and learning about advanced typography features. And I discovered that in recent years, there was this font technology where you could vary aspects of a typeface. You could change the weights or the width and do continuous runtime interpolation to determine, you know, exactly what typeface was going to be like. And that set of features had been taken away. It was no longer there in the latest versions of the proprietary design software that I was using. And so I was upset about that because I wanted that kind of power and flexibility. So I was very happy to attend LibraGraphics meeting and see the potential of having software freedom for design, where you would be able to, you know, have a typeface and you would be able to select exactly which weight it is that you want. And so this is what variable fonts is about. You have a font file and it has many ranges of possibilities for what the typeface family looks like. So in this case, if the font is updated and you want to dial in exactly a particular weight that you want, you're not being sort of held back by having to pick pre-built instances. You have this continuous range that you can pick from. And to refer back to a question from the last session, this is going to make typography a lot more complicated perhaps. You know, for students who, you know, they get a font file, they don't know exactly what's in it. The packaging systems, maybe if they're not showing you what's in a font file, this is going to become more frustrating because there's a lot more information in a font file going forwards. So this model, the Adobe Multiple Master Model, which was something I'd learned about as a student maybe 15, 18 years ago, the idea is that you had drawn the kind of four corners of a design space. So you would draw a condensed, narrow, light weight and bold or black weight. And then you would draw a wide, expanded light and bold weight. And then you would have this interpolation space inside those four extremes. And unfortunately, the default style that you typically want is in the middle of that space. And so if you're interpolating those four corners, the center is maybe going to be a mix of those four things and is maybe going to be compromised in terms of its design. And this diagram showing this is from the monotype blog. They have a great three-part series about the history of this technology. And they go on to show the Apple GX model, which was published a few years later. The Adobe model was, I think, at the end of the 80s. And Apple introduced the GX model in the early 90s. And this model takes a different approach. In this model, you start from the center with the default design that you most commonly want. And then there are vector deltas from that point. And what makes this approach really interesting is that those deltas can be added and subtracted from each other. So you start from the center and then you have a delta for a wider version and a delta for a thinner version. And those two things can be added together to create the top-right corner, which is both expanded and lighter weight. So those two approaches have been developed, they've been brought to market in the 1990s. And by the early 2000s, they disappeared. There wasn't really any software left that supported them. The Apple technology continued to be in the macOS and, indeed, was still in the early versions of iOS. But for a designer to actually be able to use those kinds of font formats, it wasn't really possible. The support had really gone away. And so a team at Google in the internationalisation group developing the Noto project. The Noto project, as Nate mentioned, is a set of fonts for everything in Unicode. It's the biggest font project ever. And the name Noto comes from the idea that if you see a Unicode character and you don't have a font on your system, you see a little square box. And so, informally, that's called Tofu. So the Noto project is a set of fonts for everything in Unicode so that you never see Tofu, no Tofu, no To. So this is a lot of fonts. And to have a set of fonts with weights and widths and to have so many, you know, tens of thousands of characters, that's a lot of fonts. So there needs to be some way to compress those fonts. And this variation technology does this. So you both get more functionality and you get a smaller file size which has benefits in many areas. The Noto team also worked on font make and some sort of parent libraries. This is a Python package for compiling fonts from source files into binaries. And this project and associated Python projects have been able to improve the sort of hardcore engineering quality of font binaries and produce, you know, smaller, more efficient files. So one of the engineers in this project, Badad, was sort of looking at, you know, this area and seeing that these older variations technologies could really solve a problem in compiling fonts down and improving the file size. So here is Badad on stage at the ATIP conference in 2016. He's in the red shirt on the left there. And he's on stage with Peter Constable from Microsoft, Ned Holbrook from Apple and David Lemon from Adobe. And so what happened in the type industry was that these major technology companies worked together on the open type standard to have a real cross-platform format which brings that Apple GX format to the open type format which is widely used today. And all of the language support which is in the Noto fonts would be able to work with the variations and, you know, get that small file size for all the languages which modern fonts support. And on this slide you can see that as well as those technology companies represented on the stage, on the slide, there's a couple of other companies mentioned. Monotype, one of the largest font development companies. And also font bureau, which is a relatively smaller company, an American company, a US company, and one of the co-founders is David Burlow. And David is a type designer who's been working I think for, you know, maybe 40 years, like a long time, and he's worked through many different kind of technology errors as type typography has improved over the 20th and 21st centuries. And David was one of the designers which Apple had worked with maybe 25 years ago on this stuff. And so he has a very strong vision of what this kind of technology can do for typography. So it's really been my pleasure to be able to work with him on a couple of typeface projects which show the sort of full potential of this technology. So the first project which I was able to commission on behalf of Google from David Burlow is DecoVar. And DecoVar is a sans serif decorative typeface. And it has over a dozen different axes. And this nature of the GX model is that those can be combined together. So you can see you've got all of these different variations and they're affecting either the terminals, the ends of the letterforms, or the strokes, the sort of main bodies of the letterforms. And those can be combined. And so some of the combinations, you know, kind of make sense. Some of them maybe, you know, look a bit strange. But there's maybe 10,000 different typefaces in all the combinations that you could make. So this is a fun thing. The other project which David worked on is a much more serious project which is called Amstelbar. So the first release, Amstelbar Alpha, is a sort of, you know, a Dutch text typeface design. And it has a few things which are sort of more interesting for serious text typography. The first thing, which is part of the initial Microsoft OpenType standard, is optical size. So optical size is where the typeforms change depending on the point size used. And this is something which, you know, was in the very beginning of metal type. So when metal type was being made by hand, you would be making, you know, individual sizes physically and say you could alter the design because you were making different sizes. As type progressed, as type technology progressed, then it became possible to take a single design and scale that linearly for any physical size. And so this meant that those refinements kind of went away. And indeed today, most type designs are just a single outline design and you choose 4 point, 6 point, 8 point, or 80 point, 100 point and the design is going to be the same. But that isn't really ideal because as the way that your eyes work, depending on the size of the type that's apparent to you, if it's going to be kind of small, you would want the very fine things to be much thicker. You would want the letters to be further spaced apart so that you could more comfortably read and recognise the letter forms. Whereas that has very large size, the letter forms can be really close together, the thin parts can be very, very thin and it will look more refined and elegant. Another interesting axis that is in Amstelbar is a grade axis and you can see that what this does is that when you change the width or the weight of a typeface, the weight or the width changes. But with grade, this allows you to vary the weight without varying the width. This has got different kinds of applications. For example, if you have a paper magazine and you have some pages that are printed in colour, so they use a particular paper stock and a particular kind of ink, and then you have another page on the same spread that's black and white with a different kind of paper, just black, then if you take the same font and print it with those two different processes, it will come out at a slightly different relative sort of boldness. So grade allows you to fine tune those two things so that the apparent boldness of the text is the same, even though you have two different processes. And similarly digitally, if you have different operating systems, different font renderers, those can take the same font data and render it differently so that the apparent boldness is going to look different on different devices. Also, you know, with a lot of text, if it's changing the line layout, then that could end up with the text, you know, filling up the text box and being cut off. For print that could be very expensive or even rendering on screen, the sort of computational cost of redoing a layout can be something to consider. So I think that grade is a very important axis, but it isn't something which is in the open type variable font specification today. And the way that grade is working in Amstilvar is in combination with every other axis. So you can vary weight, you can vary width, you can vary optical size, and you can vary the grade and you can do that at any point. All of those axes work together. And for me this is quite astonishing. You know, I would think that this would take, you know, a lot of different design masters, it would be a huge amount of work. But in fact, the way that this font has been developed is relatively simple. So in this diagram, you can see that there are four versions of the letter O. And each is varying on a kind of primary axis. So on the top row, number one and two, then you can see that there are changes happening only in the X dimension. And on the bottom row, numbers three and four, the changes are happening only in the Y dimension. And then on the left side, number one and three, the changes are happening to the black stroke of the letter. And on the right, the stroke stays the same width and the counter form inside the letter is what's changing. So those four things, those four axes, X and Y, black and white, or positive and negative, or opaque and transparent, those four axes can be combined in order to create axes of weights, width, optical size, and grade. And because those kind of high level user axes are constructed out of these lower level primary axes, that's how they all fit together. So this deconstructive approach, you start with your central design and then you make these very extreme versions that you can see at the sort of ends of these animations. And then with those nine drawings, you mix them together to create the rest of the design space. So this approach has been documented and proposed to Microsoft and the rest of the OpenType specification developers. Part of that presentation is in the variationsguide.typenetwork.com. And then I think to their credit, Microsoft is the stewards of the OpenType specification. Have opened up a GitHub repo where they have sort of open discussions and amendments can be proposed using the standard sort of git process about how these axes specifications can work. And so the type network parametric axes is the overall sort of name for this proposal. And I really think that this is a very powerful approach. A way that David Burlow explained it to me is it's like primary colours. You have, you know, CMYK for print and you mix them together to create whatever colour it is that you want. So with these four axes for X and Y, black and white, you can mix those together to create whatever typographic solution is that you need. And you have some presets. You have the preset weight with optical size and grade. But you can fine tune those based on your particular typographic problem. So I think this is very interesting. It's pretty sophisticated. And so it's not immediately obvious. DecoVar's a lot of fun. You can play with the sliders. There's a lot of different things you can do. This is very serious sort of text typography that needs some thinking. So this year, the project is continuing. So Amstilvar Alpha is becoming Amstilvar and italics are being added. And this works happening in public on github.com. Slash type network slash Amstilvar. Type network are also preparing a demonstration to show off how these variable fonts can be used to solve specific typographic problems. And the demo site is variable fonts.typenetwork.com. So I mentioned at the beginning I really got into Libra graphics, Libra fonts because I was very frustrated with proprietary design software. And while there is still proprietary design software out there, I've been very pleased over the last 10 years at how sort of more traditionally proprietary minded software companies have been engaging more and more in free software. And the v-fonts.com website is an independent site cataloging lots of variable fonts out there that was sponsored in part by Adobe Typekit. And Adobe has also, you know, stewards of the OpenType format. I've published several free software fonts, source code, source sans, source serif. And they've been making variable versions of those available with full sources to sort of demonstrate as part of the technical engineering that can be done according to the OpenType format. So I'm very happy to see this sort of very active participation in the free software community from Adobe and from Microsoft and others involved that maybe 10 years ago it was kind of unthinkable that they would be. So I'm very, I'm very happy about that. So if you want to make a variable font, how can you do it? Well there's a relatively new free software font editor project called TrueFont and the current version of TrueFont works on UFO files. And that font make tool, which can produce these variable fonts, will compile the UFOs made with TrueFont. So if you want to make variable fonts and play around, this is sort of one way, easy way to do it. And then I've also been very happy to see the work that Felipe Sanchez, Tav and others have been working on to add support for this to Inkscape. And so I have a demo of this using Felipe's laptop. So you can see here a variation test SVG which has notosands showing off the weight and width variance. And so you can see this is a kind of multiple master style variable font. It has corners and there's a square or rectangle showing all the different variations of weight and width. So I'm going to zoom in on one of these, open up the text in a font palette and we can see the variations being applied. So as Nate presented, the work that I've been able to do through my work with Google, Google Fonts, we're able to publish fonts and increasingly fonts with the variable axes inside them under free licences. But that's not the whole part of the story. So packaging these fonts, showing off what they can do is going to be important. And having support for them in LibraGraphic's applications is also going to be important. And so I'm very happy to talk to anyone afterwards the next couple of days about variable fonts. I'd love to see more and more variable fonts being supported in LibraGraphic's applications. Finally, there's another aspect to new font technology happening, color fonts. There's a whole other topic. One of the color font formats can be combined with variable fonts. And so you can maybe see that next year. All right, thank you. Oh yeah, okay. So browser support, Filipe suggested I mention about that. Basically the browser support for this has been very good. The file size compression aspects obviously are important for the web. And so this is supported out of the box in Chrome and WebKit-based browsers. Obviously Apple Safari has been behind that. It's also coming to Microsoft Edge and it's in Firefox with some developer flags. So to see it in Firefox you need to fine-tune some settings. But my personal estimate would be by the end of this year variable fonts would be supported out of the box on every major browser. So yeah, I think that's where you're going to see a lot of innovation, people doing graphic design and typography using variable fonts on the web. And it also has a lot of impact for print, which I talked about. Do you want to come up and use the mic? So this is Filipe. So I should thank a lot for the work that TAF has been doing. Lots of these happen because of TAF. I did just a user interface. But we've discussed a lot about the underlying libraries involved in this. Let me challenge the game guys to do the same. But yeah, thanks TAF. And I should mention also it was written in the SVG, but it's good to mention that this is configurable through a CSS property, font variation settings. So that's the thing you would use on a web page, on an HTML page. You use the CSS rule to apply your specific coordinate in the design space using that property. But also on SVG. So this is an SVG file with the CSS property applied. Thank you. As a font designer, but also as a normal designer. So when I have this design space and I present to the user like a value in width or weight from 0 to 1000, do I have to do it from the font design's perspective linearly? Or can I, for example, also have the variation so that the user is dragging it linearly, but the effect is not linear, especially x and y. Because usually I don't want to have the x and the y grow the same. So there was a recent conference, Typo Labs in Berlin, by Monotype, and all of the videos, presentations from the conference, which was mainly around variable fonts are online. One of the presentations, I think that maybe the final closing keynote was by a type foundry underwear. Very talented designers on their blog, which I'll pull up. They have this recent blog post, Say Hi to Hoy. Hoy is High Order Interpolation, which they go on to explain. The issue with interpolation is in the specification it's on a straight line. So you can see what we got, what we want. I think this is what you're asking about. And so you have these straight lines that you can move on, but what you actually want to do is move through the design space in a curve in some way. The way that Bezio's are constructed is actually with straight lines. And so you can create your design axes and you can move through them using Bezio math so that you can move through the design space along a curve by using several axes in combination. And so they have a demo of this. So you have a 15th-audio Bezio curve like this, which is like 15 axes being used in concert. A bit crazy. Tough down to you guys. And so here you see the actual end result. And so linear interpolation is on the left and then high order interpolation is on the right. And so this is using two axes, but moving them together to create a Bezio curve. It's clever stuff. I think that answers your question. Next question. Is this dependency between the axes because what you're basically doing is providing user interface on top of the design axes or creating user interface axes for the design axes. Is this part of the font specification or is this something that's not yet in the file format? Yes, it's something which isn't in the file format. So what you have in Amstelvar is these primary axes and then you have secondary axes that affect only uppercase or only lowercase. And then tertiary axes, which for example would affect serif width or height or bracketing. And then you have user axes, what I refer to. And I said you could compose your user axes out of the underlying ones and then you have these sort of pre-built versions which you can just default to. And unfortunately today the way that the format works is that you have to find in your design space those instance locations which correspond to your light weight, or bold weights and create a weight axis through them. And you have to take those instance positions and promote them to masters, which means data duplication, in order to have the current format create an axis to those masters. And this is not technically necessary but it's currently the way the format works. So yeah, this is in some ways 1980s technology. It's kind of a little bit back to the future. And so the format, I think just my own personal opinion I could definitely see the format evolving. This is OpenType 1.8. We could see OpenType 1.9. We could also see kind of OpenType 2.0 where maybe some of the things are not backwards compatible. There's like a real sort of semver break in how the technology works. And that would allow these kind of more advanced things. For now you could do this kind of thing in JavaScript or other scripting environments. So the format has the data that you need and you're doing something smarter on top of that in your programming environment. And potentially some of those things when they're demonstrated as really useful will get baked into the format. And Microsoft's GitHub is about the axes and part of sort of proposing an axis is to show how it's useful. And if you say, well, this is how the axes works and this is how it's useful and here's further ways it could be improved then I think the OpenType specification stewards are open to those kinds of proposals. The OpenType format itself isn't developed like say the W3C specifications are where the whole thing is on GitHub and developed in the community. But the OpenType specification stewards are actively engaged in the community compared to when I was a student. And as I said in the main presentation I'm very satisfied and happy about the level of community engagement we see these days. All right, well I think that's it. So thank you very much.