 All right, so I've got to make up time. I'm Jason Pommantel. Thank you all for coming. I hope that you're eager to learn lots about typography, a little bit about collies, and a little bit more about where we might be able to take web design going forward with some tools that we could actually create right in the content management system that we use, or Joomla for the guy down in front. So I work at Isovera. We bought you coffee today. That was our big contribution. Thank you for consuming it and looking so pleasant while doing so while we all ran around taking pictures of you. So my role at Isovera is to lead the strategy and design workshops that we do with our clients. Go around and do stuff like this, teach workshops, and sort of generally make sure that everybody is still learning new things before I let them get too comfortable. And that tends to you what I like to do a lot, especially at events like these. But really, what more of you may know me for is walking Tristan around Turner Reservoir. But you might have noticed recently that he has a pal. So that's Tilly on the right, Tristan on the left. And I thought that be kind of cool. They're cousins. We just adopted Tilly back in January. So please welcome her to our community. I thought I would take a moment with our two variable-sized collies and talk about some typography terms so we can kind of set the stage and have everybody really kind of get to know what we're about to see. So some of the things that we might like to change about our typography when we're trying to be a little bit more expressive would be things like width or weight or perhaps x height. And of course, slant. So those are some kinds of things that we're going to talk about and how we might implement those sorts of things. But really, let's come back to why. And the why is that the web is mostly words. And if you're Doug, cats, maybe a few other people, like Eaton. But the care with which the words are presented is often lacking. And that really troubles me, because increasingly more and more of our reading is done on digital devices. So in order to explore this current dilemma, imagine two dragons. Keep that picture in your mind. They're sort of fighting for control of the landscape. And we're going to come back to them in just a minute. This is not about dragons. This is a photograph of a manuscript that we got a chance to see at a monastery in Italy. And it was handwritten about five or 600 years ago. It's absolutely stunning. And ever since then, we've been evolving this practice of typography and communicating with more and more emotion and tone and amplification of the way we put that message on the printed page. So going forward, another 100 years or so, Nicholas Jensen, some of the early metal type that he created that's seen here, coming forward even more to Robert Brinkhurst's elements of typographic style. You can see the care with which this content is presented is really manifest. It's physically present in the act of reading. Keith Houston came out with this book, actually about the book just last year. And it's absolutely beautiful. So all of this care goes into setting type and creating this artifact to help communicate more effectively. And the problem is a lot of that has gone by the wayside as we bring type and text and writing to the web. So that brings me to dragon number one. The practice of good typography, the very act of actually putting these words on the screen is something that many of us as web designers never studied because a lot of people that come into this industry don't come into this industry having studied graphic design. They came in as English majors, as Ethan Markot did. He didn't study typography in school. He's learned a lot about it, but a lot of us don't have that educational background. So beyond just needing to understand what are the basics of why you would choose one type face over another, how you might go about setting that type and getting the right punctuation marks and really helping amplify that message, those are things that a lot of us need to study and learn and practice, but that very practice itself in digital systems is different. I'm gonna talk a little bit about why and to explore that why, we have to think about how it's evolved. So let's talk about all the things that we can't control when we're doing things on the web. Something about perhaps the typeface that might be used. So a few of you might remember this is the web, circa 1994, and you come forward a little bit further and you might see that we could actually set a maximum width and we've upgraded our typography to aerial. So my friend Corndon would be really thrilled with this, but we still don't really have a whole lot of control. Come forward a few more years and now we have web fonts that we can use. We can get a little bit more expressive. You'll see a lot of different weights and widths of the type being used there, but you'll also notice that number, 549K. That's an awful lot of data to load on a given page in order to get those, I believe I used 18 different weights and widths of type to render that page. So designers want to have more voice and in order to do that, we want to have more weights and widths of the type. The problem is, coming with that is that penalty in download, but we can also do even more. We can get proper quotation marks thanks to the typography module in Drupal. Just turn it on and it's fixed. It's pretty amazing. We can use open type features with our web fonts and get things like ligatures to further refine that typographic experience. So really, thanks to all of these advances, never mind that download size, we have taken care of that very first dragon. But there's another one. So this second dragon that I want to talk about is that unstoppable force that has just met the immovable object of performance. So that's where that 549K looms its ugly dragon-like head is that if the content doesn't show up, then is the design any good? I would argue no. I think most other people would do. So in this world of short attention spans and competing pressures, and we have ads and we have media and we have all of these other things and tracking analytics and all the stuff that goes into a modern website, especially anyone who's concerned with large corporate or media websites, universities that want to track who's coming to the site and follow up with their personalized content. Those are all other pressures contributing to trying to figure out how much can we put in this page, how much is gonna be downloaded and what do we need to think about in terms of that overall experience and what's going to happen in that three seconds that you have before 53% of your audience leaves and there's a three second timeout before the browser will actually render content during that loading process. So what's gonna happen? Because quite often what will happen is people are gonna go away. They're not gonna see any content. And it was only very recently that Safari actually implemented a timeout at all on mobile devices waiting for web fonts to load. So you could sit there on that crappy Wi-Fi with that poor cell phone signal and never see any content at all. And that's just bad design. So what do we do? We pair back. You say we decide that maybe four weights is enough. And so we lose that little bit of our voice. We've lost a little bit of that vocabulary in order to satisfy this second dragon of performance. But then something really interesting happened. It was really an amazing moment for me. I've been involved in the web for a very long time and I've designed for all of those different iterations of screens that I showed you. But this was sort of a third major shift. In 2009 Typekit launched and that was really amazing. I was able to start using real type, real fonts. Then responsive design came around to give us more things to think about and that was really an interesting challenge to me. This was something, and I'm really hoping that I haven't... There we go. We'll turn that all the way up. Because on September 14th, 2016, at the ATIFI conference in Warsaw, variable fonts were introduced. And unfortunately we're not getting the Sandman intro music. I'm not a Metallica fan, but it was pretty fitting. Two dragons, one font. So the thing about variable fonts that's different from what we're doing now is that if we want 18 different widths and weights, we had to load 18 different files. So a variable font is a single file that can actually do all of those things that you see on the screen right there. So to illustrate this, this way of simultaneously bringing this capability to amplify our typographic dynamic range and address performance all at the same time, you can see this graphic here from Nick Sherman. It shows all the different widths and weights of this lower case A. Or if you look at this animation from the Axis Praxis site, you can see all of this in action. This single file that's being used, just modifying with CSS to change the width, the weight, the slant, all of that being rendered right in the web kit. So this was introduced in September, September 14th. And thanks to the work of Miles Maxfield at Apple, I had the browser in my hands three weeks later to demonstrate this at Nedcamp. It was absolutely phenomenal that we were able to do that much that quickly. Lawrence Penny put together the Axis Praxis website, which is where I captured this screenshot, where any of us can go with a preview release, a nightly build of Safari, Firefox, Chrome, or Opera. In some cases, some of the stuff on the Edge browser and Windows 10 anniversary edition will work too. There's been a huge amount of effort that has gone into working on the CSS spec, working on the type technology itself, the operating system vendors are building it into the OS at the very core, and all the browsers are almost ready to ship this natively so we can all actually start to use it now. And you can even use app supports in CSS to actually put it in place, and it will only show for browsers that can actually render it properly. So if type is the voice of our words, that voice just became a chorus. So we're able to do all of these things, really remarkable things, really incredible design with that one file, but don't forget the third dragon. If anybody watches Game of Thrones, you know you don't wanna forget about the third dragon. What's really interesting to me is if you think back to scene 24, you might have jumped to the same aisle of conclusion and thought, well, if we have CSS and we can tailor all these things, what else might we do? Well, we can tailor that type to actually be better tuned for the screen upon which it's being viewed. So in this experiment, I'm actually changing the width of the characters in order to put more letters on a line, and we can easily get about 10% more characters on a line on a phone to increase the reading measure. So it's a little bit easier for us to take in those saccades or groups of words that our brains are used to bringing in so we can read a lot more efficiently on that small screen. Again, all with one file. So we've dealt with our dragons, and I think we've dealt with them in a really interesting and novel way. We've expanded our voice, we've met our performance targets, and we have this much better reading experience across varying devices. But how might we then move web design forward? So that's great. We've done all of this work in order to address some of these very real concerns, but we've still optimized in a different direction on the web. So what might we do? Well, when we think about how we have optimized our work, I've put up on the screen a few different websites, and I would challenge any of you as we go and look through these to think about all of these major news media websites and actually be able to identify more than one or two of them. And I think that's a real shame because if you look at the newspapers in print, it's a very different story. We've optimized so far that we've lost the soul of the communication. Now, it is a necessary path. We have to create, so what Drupal's all about, we have to create a design system and a method to create and implement that design system and the content in a way that will work with any content because we know that content will change tomorrow. A news site is a perfect example of that. But this endless optimization towards a system is leading us back to this complete homogeneity of the design. These monks didn't settle for fine. They did this very intentionally in order to reflect the greatness of the message that they were trying to get across. And so what I wanna stress is that the shapes that are on the screen that convey this meaning and importance of the message that they spell out is the very heart of what typography is really for, the whole core of it. Typography is design. That typographic system that you've created is a foundation, it's not a religion. It's about communication. Typography is an intentional act. It is not one size fits all. Every typeface is going to have slightly different characteristics so it's gonna flow differently. It's going to read differently across all these devices. We need to stop and think. We need to make it scale. We can have some good ground rules to start with but we need to make intentional decisions about the type that we choose and the way we implement it and the way we scale it across all of these devices. So let's take a look at some examples from print magazines. Now if you look at the variation in scale, just look at that page on the left with the numbers up top and the size of the headlines, the heading for the section of the newspaper as you work your way down. It's a very clear hierarchy but it really changes quite a bit. So we've optimized systems around any content but what about design for specific content? And we look at some of these headlines. It's really compelling. I mean it really grabs you and it's bespoke. It is specific to the headlines being presented. So when we go back and we looked at those same newspaper websites that I showed you, we look at the print edition. Look at the, there's one style here. There's another one over here. Another one over here. Look at the Wall Street Journal. Again, you've got one specific review style. Another one over here. Another size here that's different than the what's new section here. All of these are very intentional decisions that are specific to the content that is being displayed. Same thing with the New York Times. They're a little more subtle but one headline style, two headline styles, three headline styles. They're very subtly different but it's an important distinction in the way they lay that out. Or if we look at some of these De Morgan and Desite are absolutely gorgeous examples. They win all kinds of awards. These are some of the best designed papers in print because they have mastered that style and that grid system and that design system without sacrificing the soul of uniqueness when the content requires it. This is where graphic design comes in. Now in our attempts to do this on the web, we've had some success in terms of the outcome but it's not maintainable. So if anyone's familiar with Jason Santa Maria, he's an absolutely incredible designer. He's also the author of a really fantastic book on web typography. He had this experiment on his blog where he was specifically art directing a number of different blog posts but this was hand coding every single time. So it's beautiful but it's not sustainable. Or ProPublica is another great example. They do incredible long form investigative journalism really beautifully done and they do these posts and the way they get this unique art direction that's completely different from the rest of their website is they hit a reset switch which blows away all the existing styles and navigation structures and gives them a big box in which they put hand coded HTML and CSS. So it's beautiful but it's not sustainable in a daily workflow. So how could we do better? Well it so happens that we work with a content management system that's pretty darn flexible and I don't think you could shake a stick or walk into any more than one session out of three today without hearing somebody talk about the paragraphs module. Worst module name ever. I apologize for whoever created it but it is the most amazing thing since sliced bread because what it does allow us to do is not only model content but actually build and design flexibility as well. So I thought that it might be kind of cool to think about these things all together. You'll see other talks that show how people have put this into production but we have a few ingredients to play with here. We have experimental font technology, we have nightly builds and we have early dev releases of modules in Drupal so naturally the thing that I'm gonna do for you is a live demo. Because what could go wrong? Besides the video not showing up in the first place. But we got through that, right? So it's fine. So, onto something completely different. I was smart enough, I do have slides after this in case everything completely bombs I can show you what it looks like but what's the fun in that? Here is a very hastily put together website that copied a bunch of stories from somewhere else. But I put this together using web fonts from my friend David, Jonathan Ross. We have Gimlet up here and Output Sands and you'll notice that we've got our sort of fairly normal river of news coming down the middle here and on the right there's a block that definitely looks a little different. Now I zoom out a little bit has a slightly nicer layout. So, that's fine but what does that really mean? I mean if we go into this story how is this really any different than what's going on somewhere else? Well, again this is one font file for all the serif and one font file for all of the sans serif and you'll notice that it's represented a little wider here, a little thinner here, a little italic here, a nice thin italic down below and then again this sort of little experimental promo block which was just set in a slightly smaller size on the homepage. And if we go over into Chrome and go into that same story and hit edit, we've got some paragraphs and we've got some preview mode. So, this was something that was brought up in an earlier talk. Catherine McClintock, am I getting her name right? It was an amazing talk, it was really great and she mentioned paragraph view modes that allow you to preview things here. So, we can actually see what this might look like when we've added some of these little elements that we want. Now, this is a little raw but this is without any custom coding whatsoever. This is using out of the box stuff and a couple of theme tweaks so that when we look at these things and we want to see how they might render, well, I'd really like the word best to be in a much lighter weight. So, I could just edit this one little paragraph line and here's my little slider and let's save that and scroll back down to the bottom. There you go. So, live variable fonts allowing you to do all kinds of fun stuff with literally a drag of a slider. Now, could it be a little bit more refined? Sure, but the idea here is not to necessarily give these tools to everyone but think about the designers that could actually, this is approachable. So, when you have a graphic designer involved in your workflow, which every print publication does, that's how newspapers work. It's not magic how it goes from a word document into a layout that actually has specific typography. They have, as we do, authors and publishers, but they have someone dealing with layout as it, you know, preparing it to go to press. We don't have that step. We've taken that role and we've put it way at the beginning when we're designing and building the website and we freeze it there and then the designer never comes back and that's a real shame, it's a lost opportunity. When we can build in the typographic flexibility here along with the design flexibility, there are some people that might show you some sites that include things like a paragraph style that lets you choose alignment. It's one of the things we're working on in our own website. So, you can add chunks of text and choose alignment for your images that are tied into responsive image styles or choose something to be an overlay versus a top or left aligned image. So, there's all kinds of switches that we can build into the content management and publishing process. We can add typographic ones to that too and not only use it for the promo blocks but then use it like I have here with to recreate this little block out to the side. So, when we went in and edited that, this is something I didn't spend too much time focusing on but if we edit this, we can add as many lines as we want and in adding another paragraph, I just created really simply, there's one paragraph bundle to create the line and then there's two that gather them. So, an individual line or a float. So, that equates to looking at the float off to the right or something in line here and then I'm able to just tie this in just using regular content building stuff. So, if I want to go ahead and change the way this is rendered, I can edit that one line, maybe I don't want it italicized but I'd like to increase the weight and go back and save it and all of this is again, one file. So, this is a little bit hastily put together perhaps but I do think it's really important for us to think this through as how might we approach this better? So, the access praxis site that I mentioned, access-praxis.org, something Lawrence Penny put together as a way and it'll be hard to show you the whole thing on this screen resolution but he's loaded in a bunch of demo fonts here and you can then go and use any of these to play around with this interface. What could go wrong? Let's see if I can actually make this work or we'll go back to the screen grab that I recorded right before this session started. So, here we've got some variable fonts loaded here. There we go. So, we could easily build these range sliders in with a little bit more flexibility. Think of a module that adds a text field that incorporates this. So, you can see the number of values, you can see the live preview and then you can just go ahead and save it. Very intentional setting, type setting and one of the things that I didn't really focus on in what I was showing over here, of course that's not gonna open again. In the demo that I put together in this site is all this stuff is actually sized with viewport units. So, it actually will size with the window really nicely and it can be sort of responsive in and of itself. So, for those of you who've been following, I'm using viewport units and if you're not familiar with those, 100 viewport units is the width of the window. So, it's like a percentage but it actually works. And that also works with viewport height. So, you can do some pretty interesting things with that. But, think of container queries. So, this is based on the width of the window but what if it were a viewport unit that was really based on the size of the container that that text is in? Now, that's something that's still evolving but there are some JavaScript polyfills to let you play around with that as well. So, when you have something placed in the sidebar versus placed in the main part of the content, you could actually have it behave totally differently and scale the type that way or use CSS variables in order to scale your type based on where it's placed in the layout. So, there are some really interesting possibilities with this and really what I wanted to stress, the whole point of this talk really became to me about how do we elevate design past a bunch of squishy boxes? And type plays a big part in that. If you think back across the arc of talks that I've seen today starting with the, with the Drees Note this morning, talking about the field layout experimental module where you can change the layout patterns for the whole page, think about CSS grid there and how that might impact how we design for the web from an overall layout perspective and marry it with tools like these that allow us to tailor the typography for the content in there. So there's another role that we're thinking about. There's the author, there's the publisher but there's also that designer layout role who should have access to these things. Maybe not everybody should. I wouldn't say that every site owner should have complete control over the layout of their website. I think that's looking for a little trouble but we can add this role and we have tens of thousands of designers that are terrified of having to learn the web but they can learn how to use the browser and we can leverage all the things that they know about layout and design and typography and bring them into this fold without saying screw you until you learn HTML and CSS. Now I'm a big believer and I've said real designers code and I don't think I've ever hired a designer that can't write their own HTML and CSS. I think it's important but it's not the only way to work and as long as you understand a little bit of the underpinnings of what you're playing with here and know what the limitations are we need their knowledge because schools are still having a really hard time with this. They're not educating designers to work in the digital realm very effectively so we're going to have this problem. We've had it for 20 years. We're probably gonna have it for 20 more so we have to learn how to build the tools. We've got Drupal. We can use this to build design tools that can take our world further and build better and more compelling experiences. So when these print books finally start to tail off and they're being printed less and less and more and more reading is on a digital device that we can still hearken back to that beautiful reading experience that really does amplify the message instead of letting that go by the wayside and read everything with straight quotation marks and aerial because frankly I don't think that's a very good experience at all. So I think that that was all of the stuff that I wanted to show in more of a canned fashion and this just shows you a little bit more clearly exactly what was going on in that AXIS praxis site. So you can see each typeface has different axes that can change and that's up to the type designer. CSS supports four different axes of weight, width, X height which I just showed playing with there with CJ Dunbar's Dunbar typeface in that second paragraph down and slant but type designers can actually design and integrate any axes that they want. So there are a number of them that have built in optical sizing which increases subtly the size of the counters and bowls and the type when it's rendered and physically smaller sizes increasing readability just as they used to do with metal type and that's actually on by default in WebKit. So if any typeface does support it like Gimlet the one that the serif that was in the demo that I showed you earlier that works really well and it makes again the reading experience on small screens that much better. So there's an awful lot here that already working. All of this stuff will be in the operating system in 2018. It's gonna be in browsers shipping long before then and again as I mentioned with CSS at supports you can actually write it into your CSS now and it will only load when the browser does support it. And because CSS is a blocking request so let's talk about the performance hit here the CSS gets parsed first and the browser knows which web font you need to load. So instead of loading 14 different variations on one page it will load that one or two files and those files will come in a little bit a little bit heavier than an individual font now. Hopefully that'll be a question someone asks and we'll talk about it more. But hint, but there'll probably be around the 100 to 120K mark but 100 to 120K for one font that actually can do the work of 549K that's a pretty reasonable trade in my mind. Thank you very much. We got lots of time for questions. In case a few of you're wondering the slides are already up. It's a bitly link, bitly slash JPRWTVFDC. So responsive web type, variable fonts, Drupalcon. So you can get the slides there. The typefaces that were used in the variable font demo was Gimlet and output stands from David Jonathan Ross and Dunbar from CJ Dunn and Tilly and Tristan giving us the rest of the entertainment. So if you have any questions please use the mic so that they'll be recorded when we get the audio because that's really the heart of what this is all about. So one aspect of typography that makes a difference between a nice looking page and a beautiful printed page is the kerning pairs. And it seems that when you're taking type and variably changing the thickness and the slant and the size that the kerning relationship would need to be variable as well is there going to be anything to affect that? So interestingly enough this is actually how most type designers are working today already and those kerning pairs are actually all built in already. Now one of the issues is that you need to have an open type font format in order to support kerning on the web but that is kind of a byproduct of working with this. So the kerning pairs are there. You have to make sure it's either enabled by default or enable it with CSS, which you can do. But generally speaking, it will yield better results than browsers typically render now. But when you change the other aspects of the type as you're looking at it, couldn't that also affect what needs to be kerned? Well, the interesting thing about this format is it actually, it's all in the designer's hands, the type designer themselves. So the way they define it is they start with the standard character and kerning pairs and they define all of the different axes of variation and the kerning travels with it. So it is actually all built into the font format itself. It's nothing that we're doing in changing that width and weight that's not already intended. So if the kerning is being supported properly by the browser which arguably isn't if at times, but it can be. So it is, it's how it's supposed to work. And eventually, starting within about a year or so, this kind of font technology is gonna be at the very core of all the shipping operating systems. So there's a tremendous amount of attention being paid to this. This format was introduced by Apple, Adobe, Google, and Microsoft, thank you. Yes, like so, gold star for Aaron. So that, all of the major type vendors have been involved in this, all of the major type designers have been involved in this. So this is absolutely where the industry's going. They're thinking about these things. They're working really hard to bring it into the tools and it is the kind of thing that really should take the handling of type within browsers decades further forward. Thank you. Hi, my question is how long has this been out to the new Drupal 8 and also has there been any like test performances or statistics for the speed in which it renders? So it is not actually specific to Drupal 8 at all. So it's, I happen to bring it in here as an example because that's where I'd really like us to build the design tools. But from a performance perspective that's actually still a work in progress as well. And so when you take the uncompressed font file it might be a little bit bigger, but the WAF2 format which is now supported in all shipping browsers is something that adds an additional layer of compression. So that's where I think the size of the font file itself is going to keep coming down to get more comparable to the stuff that we're working with right now. And in terms of the rendering performance, I have not seen any perceptible difference even with the pre-release stuff that I'm working with. So once it gets to the browser, it behaves as rapidly and as quickly as anything else that you might see. The delays that you saw in the demo that I showed were because I actually animated the transition because otherwise you wouldn't see it happen. This was an incredible presentation. I just have one sort of warning for you and everybody else who's gonna touch this. Can they put in an aesthetics aptitude check before you can move those sliders? Because every time this has been done and I've been through a couple of graphic revolutions myself that you get people who are like, hey, look what I can do there. And there's no connection to what actually typographic aesthetics reflect. I've lived through the desktop publishing revolution too and everybody swore up and down that all of us graphic designers would be out of a job because Microsoft Publish came out. And I gotta tell you, that did not put any graphic designers out of a job. So the trick is just because you can doesn't mean you should. And that's why I stressed that there's a role here for trained graphic designers or people that actually bother to go and study typography. We don't really want to unleash these tools for everyone. It's a perfectly valid observation. We have those same struggles with any other kind of layout flexibility. And that's been echoed at every single talk I've been to today. The more flexibility we build into this, the more likely it is that in the hands of a perhaps more aesthetically challenged individual, you might end up with some suboptimal results. But that's part of the growth. There's really nothing wrong with that because all that does is serve to remind the owners of that website that there's value in having a designer involved. Yeah, it may have not put all the graphic designers out of work, but it definitely put a lot of professional typographers out of work who would catch things like bad kerning, bad alignments, proofreading went out the window, which is a whole nother issue. So you have to be sensitive to the fact that you're still putting out a printed piece with standards, even though it's not printed on paper, it's printing on glass. And I think that raises a really important point. And I know there are site owners in the room that think about these things often. We can still have these standards. We could still put a whole lot of typographers to work. And I gotta tell you, they're pretty excited about this in that it gives us greater flexibility within the system to do better work. So all these people, these graphic designers and typographers who don't know how to code CSS could actually still work in this system. So I'm hoping that this creates opportunity more than it creates heartache. I totally agree. The less-towards, I'm walking away from the mic, style guides. If a qualified person can put together some options that maybe a less qualified person can say, okay, I can take A or B or C or here's a nice combination and work with that as opposed to, whee, I made a figure, I made a figure. Sure, there's actually something else that I didn't mention about this is that you still have named instances. So the type designer can still say, I would like this to be the extra light compressed. And that named instance is something we can put in a dropdown menu. Doesn't have to be a slider. So there's a number of different ways we can work with it in order to make it more likely. But by having that flexibility to really tailor it, that's where you can get the design that is really beyond what a system can provide. Absolutely, thank you again. Well, thank you. Thanks for the excellent presentation. Thank you. One question about it is, when you were showing a different axes within Drupal, which module were you using? I'm sorry, which, what was, when you were showing a different axes option is using variable fonts in Drupal. Okay, the little sliders? Yes. Okay, I cheated. It is an HTML5 range input type. So what I did was just, I put a little twig template in the admin theme that changed the number input type to a range. So again, this is nothing Drupal specific. It's simply having a module that uses the proper HTML form element. So these are really solvable problems in there that I was able to just kind of work around just so that, those are the tools that we need. I mean, that's the level of simple that we need to provide so that people can use a system. They just need to see the live preview. That's why I wanted to show the Axis praxis site, because that's where they really connect the live preview. So that's what I really want us to focus on, but that's all there is to it. All right, thank you. You're welcome. So I'm not quite as old as some of the people in the room, but I do remember Adobe's multiple master type-based format and that kind of, my recollection of it, I was a student at the time and I got to play with it, but my recollection is that it kind of folded in on itself because the font makers found it too complex to deal with the matrix masters. Yes. My understanding is that there's not a matrix of masters, but I'm curious about font maker support and interest from the other side. It's pretty phenomenal. So the big difference between the multiple master format and this variable font format is rather than having to define all of this different matrix of different outlines, is you define the core regular width and weight of the character and everything else are delta offsets. And so all of the type design program vendors are building this into their process and a lot of designers have been working this way already for a few years. What people don't realize is that San Francisco is a variable font. It's basically the same technology that Apple built into their world. So it's not such unfamiliar territory and it's much more compact. And it's also much more extensible. They predefined seven different axes. So even things like X height in addition to slant and glyph substitution. So you can actually do true italics this way. That was my next question. And also doing that glyph substitution at varying sizes. So think of a dollar sign that has a stroke vertically through it at very small sizes. You could cut the stroke out of the middle. That's all part of the font format itself. So there's a tremendous amount of interest. This was introduced at A type I which is the association typographic international was the big global type design event. Every single major vendor and type designer or representative there and every single one of them are on board with this. It's pretty remarkable. Thank you. Sure. Two things. First, that's the nicest way I've ever heard your most political way to say, oh my God, that looks like shit. I've ever heard in my life. So outstanding. The second thing is what I see with this possibly for accessibility in people with visual impairments immediately made that connection. Has there been talk or people working on that? Absolutely. And so one of the things that is do let's see if I can show you because this was pretty remarkable. You can stitch together a couple of these things kind of in your own mind. If we choose, see if I can actually get it to work. There's one that has the word grade in it. Grade GX, there it is. So watch what happens when I change the grade in this. So it's that middle couple lines of text. See how it gets darker like that? But it doesn't change the flow of the type. So think about that and think about ambient light. There's an ambient light sensor that's part of the web API. So while we may have to tie into it with JavaScript at the moment, browser support is coming, low light increased the grade of the font and it's much more readable. So there's a lot of stuff. Like we haven't touched the kinds of things that we can do to increase accessibility and readability in differing conditions. That's why I kind of threw in the comment there about what we can't know about what are the other distractions and what are the other things people are doing, accessibility concerns. If you can actually build these controls in so someone can just change the grade in addition to zooming in and out, you have tremendous power to put knowledge in the hands of people who otherwise might not be able to consume it. It's pretty remarkable. Thank you for asking. Can you touch on multilingual character sets, larger character sets? Oh, sure. So I don't think there are any examples here to show, but one of the most fascinating things that I saw when I was at A type I was how the CJK vendors were approaching generating fonts in this way. And they're actually made out of components. So in order to generate these 16 or 20,000 different glyphs, there are a lot of repeated little moments in those characters and they would actually design the glyphs, design the glyph itself out of a series of component parts. So even in CJK characters, they can use this format and they can do even more to change those character glyphs at different type sizes. So this format is not tied to only showing Western characters. It's something that supported, it's the actual evolution of the open type spec itself. So all Unicode characters can be represented this way. Perfect. Great, thank you. Just kind of more of a comment than a question. I like how you showed the different new sites without the headlines and you couldn't tell which one was which, right? And I immediately think of the New Yorker site, which of course it's because of typography, right? I use that often for that very reason. If you see Irwin, that's the name of that typeface, you know that's the New Yorker. And that's an example of brand recognition based on simply a typeface. And it's incredibly powerful. It only goes so far. They're one of the better ones. Atlantic Monthly, Vanity Fair, Vogue, the New Yorker, those are a few that are doing some more interesting things with typography on the web, but none of them are like, if you look through any of those magazines, you'll see from one story to the next that they will art direct those headlines. They are not simply slotted into that same spot on the page. We could use these techniques to type set headlines. There's nothing stopping us from doing that. We could do much more interesting things with it this way. So I'm just really excited. I've just been going back and forth with somebody at Condé Nast today about going down and giving them a talk about this because this is where design will really get interesting. Thank you. How does the adjusting and like Drupal for instance in the paragraphs, how does that respond to breakpoints? Like if I mash it all the way up to super thick, how would it respond on mobile? So one of the things that we have to sort out in here, what I'm doing in that twig template, when I write things out, that I'm storing the values in fields and then at render time in the twig template, it's writing out a small style sheet. So each line has its own small style sheet that's being created. There's nothing saying that we can't develop something here that would allow us to define how we want it to behave across different breakpoints. I mean, this is something that, frankly, I didn't even occur. I started writing the first half of the talk about the three dragons. That was what I thought the talk was about. And as I got into that, I started to realize how much further we could take design itself. So yes, we need to develop that tool. We need to figure out breakpoints, viewport units and container queries could get us a lot of the way there, but you'd still want to not just scale it, but you'd want to actually tailor it to those different viewport sizes. That's something for me to convince Benji or Aaron to work on at Isavera where I work because I can define the UI, but there's no way that I could code that. I have to be honest about that. Well, thank you very much. You've been an awesome audience. More than welcome to come up and ask any other questions or grab a card and follow up with me later. I'd love to talk to you about what you're working on.