 All right, awesome. I think this pretty much qualifies as a fairly full house. Congratulations. I'm really happy to see all of you here. It always kind of amazes me that over the last five years I've gotten to give four or five DrupalCon talks about type and to have that kind of interest in this sort of topic at such a technical conference is really fantastic, so thank you. Thank you all for being here. So I'm Jason Pommantel. I am the senior director of design and technical strategy at a company called Isovera. We're a development shop outside of the Boston in Waltham that has built a lot of really interesting and really well thought out Drupal solutions. And one of the roles that I have there is to actually build up our design practice as well. So we've started to do that and I'm really excited about that and we're starting off with some pretty interesting work for companies that wanna talk to us about persona development and UX strategy and all kinds of really fun things that are more what I'm used to. But it's really great to be able to marry that with an awesome technical team. And I think that that's a really nice way to put the power of Drupal right in the middle. And that actually fits in nicely with the way that I like to work with Drupal also from a design perspective as well. And I should say, I think it's a mandatory byline for anybody that does Drupal development. Yes, we're hiring. So I'm gonna talk to you today about a couple of different things all centered around typography and user experience and how one is such an integral part of the other but how its definition and how we have to practice it has changed. So we're gonna go on a little bit of a journey. And for anybody that follows me on Instagram this is pretty much what you'll see every morning is me and my pal Tristan. And he goes with me on a lot of journeys and we think about a lot of stuff in the mornings because we've got a really nice peaceful area to kind of think things through. So as someone who studied graphic design I've always had a passion for typography but I've also been involved in designing and developing for the web since really the very early days. My job on campus in school was creating Rhode Island College's first website and that was browser testing in Mosaic and Netscape One. So that's my gray hair street cred. And so as a lot of you can imagine for many, many years my love of typography and my work on the web led very separate lives. They didn't date, they didn't get along. You couldn't often find them in the same zip code and that was something that I really just had to live with and I would sort of express my love of typography in other ways or in making really awesome buttons in Photoshop and adding lighting effects to them. At least there's a few people that get that. But that's really changed a lot and so in 2009 that really shifted web design for me and it made it really exciting and interesting again. So what I wanna talk about is a future that we can get to that allows us to bring all of these wonderful ideas and practices in traditional typography and think about how they apply in a different and unique way. That's really fundamentally different in how we have to practice typography itself in the age of dynamic digital systems. So while I was going to talk strictly about the history of typography as a core element of user experience, there was a conversation that I was engaged in a couple of months ago that really sort of all of a sudden changed something for me and it really made me think about how different typography is now. Not just because it's on the web and because it's on screens, but because there are a lot of important elements of how we practice typography that we can't do in the same manner. Not because it's not technically possible but because it's in a totally different context. I wanna talk about that as well. So we're gonna look at a little bit of history and a little bit of the future and a little bit of how we can adjust our thinking to do this in a better way and work with a wonderful system builder that is Drupal in how we do it. So let's go back a little bit and look at the history of typography and really think about the core of what is design? What is it that we're doing? And one of the things that I think is true about any piece of good design is that it has to do two things. It has to communicate ideas and influence behavior. That is what sets design apart from art. Art, you want to communicate an idea, you wanna get something across as an artist but it's not intending to get someone to do something, to buy something, to go somewhere, to change their mind about something. So really all design can be traced back to this. So it follows that the influence that that design exerts is imparted largely in how we design. So this is another great page spread for some really classic advertising or this beautiful piece from Nike. Type has always played an integral role in the message and the composition of how we get that message across. It's that bridge between that message and you, the viewer. It creates that experience. But these are all print examples and as we move forward and we start to think about how communication has been shifting into digital formats, we're now five years in to Amazon selling more electronic books and digital books than print ones. So we're well past the tipping point in where people are consuming things. So this is Frank Camero's book in ebook format and on the web in HTML and also on mobile devices. And you can see that he's thought about how that experience will work best in that context of use. So if any of you have looked at the EPUB standard, you'll know that there's a wonderful notion of EPUB three that's been around for a few years that exactly zero major vendors are supporting, which is really unfortunate. So we're stuck and in some ways what he's able to do on the web is actually better than what he's able to do in iBooks, which is a real shame. And looking around in cars, we can see that even those interfaces can have a nice typographic hierarchy and increased glanceability. Obviously I'm making that part up because that doesn't actually happen yet in most cars, but it can, especially when you think about the systems that are now launching from Apple's CarPlay and Android Auto, those things are rolling out into the market now and that's a very powerful thing and I'll come back to that in a minute. So this future is definitely one that's worth pausing to admire, but it's not now. The now that we have is something different. The material and method and the typeface itself are forming the foundation of the user experience, but the relationship between those elements has fundamentally changed. So we need to look back again. Now we're gonna take a little trip through history and think about a few thousand years back where medium really was the message. So whether or not this is real, think about the metaphor here for a moment. These rules actually are set in stone. That's a fundamentally important thing underlying how important these rules are in the story of the Ten Commandments. You can't rewrite them, you can't edit them, you can't hit the backspace, they're absolute and that's how they're intended to be. And by telling the story that these things were literally carved in stone, that helps reinforce that metaphor, a key element of that experience. Or this illuminated choir book. This 15th century choir book that I saw in Florence, Italy that is absolutely stunning. This is something guided by the hand of God. This was a priceless thing slaved over metaphorically by the monks that would handwrite these books. There was something so precious about this that again helped reinforce the importance of the words that were being conveyed. Or coming forward a little while to our family copy of The Hobbit. A beautiful hardbound book that was printed in a letter press probably early 60s I think. This edition dates back to, so this is something that was read to me and my brother when I was five years old. Everything about the proportion, the readability, the type setting, it's perfect for that book. I still have it and I cherish it. I love the feel of everything about it. So there's something about the intimacy of that story that is reinforced by the way it's presented in this cloth hardbound book. In other cases where it's actually the typeface itself that starts to embody the experience. So here we've got Johnston, a typeface that was something that introduced for an identity system back in 1916, has now been in continuous use for 100 years and it has become almost a national identity. When you see that typeface, you know that you're looking at something relating to London, you're something very English and very British about that. And even in a different color, the shape of those letters know that you're underground. I mean there's something very sort of visceral about that. You just know. We're looking at the London Times. Times, that's where it came from. They designed that typeface to do two things, to impart authority and to work well on cheap printed paper. It's really fascinating duality there. Where the shape of these letter forms and the sturdiness and the symmetry of it was something that conveyed the authority of the news source, but they'd also designed all these really intricate little traps that would help reproduce those letters more cleanly on this very, very inexpensive paper. But it is something that can be improved upon because this may be a screenshot from Downton Abbey, so I'm probably called out on that, but this was a real thing. Ironing the newsprint reduces ink transfer and makes the paper stiffer and shinier, improving the user experience and making those wealthy enough to have someone iron their newspaper for them. Really appreciate that experience just a little bit more. So, going from then to now. We've seen a few examples of how type and its manifestation are a very core element of this user experience, but what do we look at now? What do we see when we go and look at the web? Unfortunately, we see a lot of this. Verdana, usually maybe 13 pixels, so just a little too small to be able to read comfortably. I mean the only saving grace is that it's not Helvetica. That's a small saving grace. The technology has taken over for so long that we've given up. We have so many websites out there now that all we could do is get the content management system up and running. You see the connection here? I mean we have this fantastic tool that takes care of so much of the hard stuff about just getting things on screen that we can now start to think about what is the presentation to the user? Because more and more this is exactly how they're going to encounter it on some sort of screen, not on a nicely printed sheet of paper. So now getting past that technical hard stuff and getting back to really thinking about design and experience is something that can help us get past things like this. We've got these fractured identities across every platform, from physical device to apps to the website. I love Garmin, but they use a different typeface in every one of them and it drives me nuts. Or cars, this is the reality that we have today in our Subaru. I usually do a little test, I put this image up and I ask everybody to raise their hand when they can tell me what time it is. Yep, and everybody just hit the bus because you've been looking down for so long because what happens with this kind of electronics is they're so constrained with hardware and memory that they can't afford to put scalable type in there. So most of the UIs in cars are constrained to only one or two different type sizes. So they truncate text, they change labeling, they use these really tiny little displays that are really hard to find when you're in a high speed, high glance kind of environment. That's a big problem. So again, this is where things like CarPlay and Android Auto are going to be really remarkable because they put all of the tools necessary to design for this environment in our hands. It's now something that can be done by anyone who wants to work on an app and you know how those displays are all worked out in HTML and CSS. We can use web fonts, we can use all of these great technologies to design car interfaces, navigation interfaces, all of these things that are going to be in use because they're going to be driven by apps and not locked away in the purview of only a few people that are implementing these systems for these manufacturers. Could be good, could be bad. But it's a lot of opportunity and a lot more creative energy that could go into making these interfaces great. So, our present is far from perfect. Insert thing about grammar nerds being tense. So, what's changed? Why is this different now? And how does this connect to what I mean when I say practicing good typography? Well, pretty much everything. And I mean that actually literally. The screen sizes have changed. There's over a thousand different screen sizes and resolutions that you have to really think through. There was a post from Luke Rubluski just a couple of days ago about how he managed to do a bunch of analysis on, I don't know, how many, like 90% of different user agent queries and the stuff that he was analyzing could be brought down to only 162 different viewport sizes. Only 162, isn't that awesome? So, have fun with your test lab. But, so this is still a problem. It doesn't matter if you could reduce it to only 50 or only 40. I mean, can any of us really spend the time testing on 40 different devices? Maybe some of us have to and maybe some of us have the luxury, but not everybody. So, we need to think differently about the relationships between the type and the content itself and the context in which it's being viewed in a different way. So, if we look at this website, it has a lot of interesting layout things that are going on and it has some interesting type relationships that work in a fairly interesting manner, especially if you look at the type relationship with the contour of the guy's face, there's definitely some thought that has been put into that, except what about when the screen's slightly different? But, at least they've thought about something so on small screens, it reflows all differently and it still has a decent impact in the design and it works pretty nicely. So, what is it about this kind of design that's different from the way we could design and print and this is what really came to me and jumped out? This notion of rendered versus dynamic. And that's something that's really important for us to understand and embrace because as designers, we want control and we want to impose this notion of relationships between elements. So, if you look at this book cover from Emigre, it's absolutely beautiful relationships that they've designed here that would never hold up as screen sizes start to change. But these letters stay where you put them. I mean, it's like when the baby learns to crawl. I mean, all of a sudden, your type has moved over to someplace else on the screen and you have no idea where it went to next. But, even in film, where this sequence from the movie Seven, the credit sequence there, honestly the best two minutes in storytelling and film. I mean, you have to see it if you haven't yet. And this came out, gosh, 15 plus years ago? I don't know, it was really fantastic. 20 years ago? Or if you look at the credit sequence more recently from the show, The Americans, that brings about a lot of really powerful memories but also something that was completely defined and controlled by the designer. So even though that moves over time, it moves in an exactly predictable manner. There's a fixed aspect ratio for that credit sequence and the type is always overlaying the images in exactly the same way. Whereas today in web and digital products, we have something that's totally different. So we're looking at the Guardian site from the UK. We have to think differently when we're thinking about a web system, especially one like Drupal, where the content is entirely in the hands of the site owner. We have screen size and content that is never fixed. It's always dynamic. So the relationship between the typography and the content and the context is always in flux. Now we see the international edition. It's the same layout, the same typographic rules, but totally different content. Or if we look at France 24 in English and in France, that's hard. That's really tricky stuff. Designing a system that can work with a one line title or a four line title because you have no idea. I mean, I didn't even try putting German in here because frankly I just don't think I could make anything fit. I don't know how anybody designs a narrow column of text in German. I mean, if anybody here that does, I applaud you. So the defining element of the experience is often going to come down to it. It's actually the typeface because the design elements change, the length change, the meaning changes in the content that's present. So what is it that's there to convey this system of design is the typeface selection and how you've implemented it. So that way forward, this way forward to practice typography in these environments that really requires this new kind of thinking has to embrace a bunch of key things. Not just the content changing and the screen size changing, but what about availability of the typeface itself? When you start out a project and you're working on branding or working with existing brand standards and you need to bring that to the web, is the typeface available in a practical and an affordable manner? What about performance? Are they well made typefaces? Are they small? Are the typefaces well optimized? There's a lot of stories that we could get into here. So if you look at something like Benton Sands, it's a wonderful typeface. It's one of the core elements in a large Ivy League school in Boston's ID system that they don't use on the web. And one of the very valid reasons they don't use that typeface on the web is that it would cost $26,000 a year to license it. I don't blame them one bit. So that's something that really has to be on our minds as designers when we're making these decisions. So there's performance, there's cost, there's compatibility, there's licensing issues, worked with another Ivy League school in Connecticut that had another fantastic web font or rather typeface they were using in their print identity. We went back to the vendor over in Europe and asked them because nobody had bothered to do so. We just went and asked. And they came back and gave us a price to license that typeface across every website with no traffic restrictions. And now that typeface is available for everybody on that campus with all of their websites and that's fantastic. So those are all considerations that we have to make as designers but there's plenty of places to go do that. We've got fonts.com where you can use it online or by licenses, you've got type kit, you've got web type, you've got my fonts, you've got all of these different vendors, almost all of them now have some kind of licensing option. We just need to do our homework and take a look because even something simple like is this typeface, for example, Museo Sands, very popular typeface, if you look at the place, different places it's available in typekit, fonts.com and purchasing a license for self-hosting, there are different file sizes for every one of them. And that can be really important when you've established a performance budget and you know you need to keep your web font load to a minimum, saving five to eight K per weight is the difference between six typefaces and seven fonts more accurately. So that's something that's a real important consideration as well as optimization. If it's a rounded typeface, VagRounded is a great example that I pick on a lot in my book. That one went from about 400 K when it first came out as a web font down to 140 from one vendor last year down to under 100 from another. Now it's a complicated typeface because it has a lot of rounded ends but they did a huge amount of work optimizing that typeface. So if you think about a performance budget, you've now taken away over 75% of the file size. So it makes it a lot more attainable to be able to use that on the web. Yes, yes you can. The question was can you find those numbers before you buy it? In almost every case you can because usually what you can do is if you're using the services, the subscriptions are cheap. I maintain one in several of the different services so you can just go and set up a kit and you haven't really bought anything specific for it but on several of the sites that I've looked at they actually list the file sizes before you would actually even make a purchase. So you can usually find that information pretty easily. Thousands of choices to bring your voice to it. The technical support that's available in OpenType. So OpenType features are a fantastic addition. Let me rephrase that because it's a fantastic addition for us in English. It's usually just a nice city to get better ligatures, different numeral support, real fractions. Seeing that, that's pretty nice and the ligatures connecting the C and the T up there. Those are all really wonderful additions that are a nice extra for us in English but in other languages those OpenType features are actually necessary diacritics for communicating effectively and properly. So the fact that all the browsers are now supporting it makes a huge difference in the level of clarity in the communication that we can create for use on the web. There's a new version of WAF which is the sort of more common standard to support OpenType features. WAF Tube introduces 25% better file compression. It's only at about 55% support on caniuse.com right now. So if you think of the total number of devices that are on the web, only about 55% of them can display WAF too. The good news is oftentimes when you set up a font package many of the services are now including WAF too and will serve it to the devices that can see it. So it's sort of a way to progressively enhance what you're serving to your end users. If their browser can support it then it comes along. All of the major ones with the exception of Safari are now supporting WAF too. So that's a pretty good thing to know about. I bring all of these things up because as designers we need to care and we need to speak up about it or developers will fix it for us usually in the wrong way. Witness flash of invisible text. That drives me nuts. There's this default behavior that started with Apple. I actually blame them for this more than anybody. But the problem is everybody adopted this that rather than just put the content on screen in a fallback font every browser has adopted the standard of let's not put anything on screen until the web font loads. And as much as I love design and I love type I love my users more and I want to give them the content and that's what the web is for. Is to deliver this content to the end user. So what I would prefer is to go back to Fout. That was a feature not a bug. Flash of unstyled text is this practice of putting up the fallback font while the web font is downloading. With the addition of things like the web font loader when you use the web font loader it injects a class in the HTML element of your page that tells you WF active, web font's active or WF inactive. When you have that class you can now style the fallback fonts to more closely match the metrics of what's going to be there when it loads. So you can avoid the reflow. It's not the fact that the typeface changes subtly it's the fact that things move around is the perception of change that's the biggest deal. So that combination is something that's really important for us to consider as designers to think about 375 million people using Opera Mini that will never see a web font. But do you want your design to hold up? You probably do. So using a technique like this one where those web fonts will never be active those users will get the right design right away even with the fallback font. So those things are things that we have to speak up about to browser vendors, to the developers that govern the way things are implemented in Drupal. We have to learn as designers to participate in this process a little bit more. And that's where we get to see these improvements because we need to be in those issue queues and we need to advocate for these better standards and these better ways of implementing typography. Question in the back? I'm sorry? It's the Google web font loader. It was an open source project that was started between Typekit and Google back in 2010. So it's been around for a very long time and many of the services will use that by default. So if you use Typekit, if you use the JavaScript implementation of Google web font embedding, if you use fonts.com they have a different class name but it's basically the same idea. It will always inject that class during the loading process and then remove it once the web fonts are fully loaded. There are a couple of other things evolving in the CSS standard but nothing gives you that complete control over what you're going to render and how to style those fallbacks. So while font display is another CSS attribute that lets you control the timeout for when it decides to flip over to displaying a fallback if the web font's not there. It doesn't really help you unless you can then tune those fallbacks to avoid the reflow of content. So when we think in systems and we think about what happens when things don't work because inevitably they're not gonna work in some scenario, that's when we can really have that complete system and that complete experience. So here's the transport of London's digital design guide. They're thinking about these relationships at all of these different screen sizes. They're thinking about line height, they're thinking about font size and how those relationships and meaning and importance hold up across all these different screen sizes. This is what I mean when we're talking about the new typography. So if we look at what some other people are doing on the web, I mean, that's a died-own to die for. I mean, it's an absolute beautiful typeface and you see how they implement that across different screen sizes and the design really holds up. The feeling of that and the meaning of the intent across that is really wonderful. Or we look at Donnie Trong's site about the history of Vietnamese typography. It's a really beautiful website and he really was very thoughtful in how it works on small screens as well. Now what you'll notice here, if you're a really keen observer, is that there's a ligature between the S and the T in the word history on the desktop site that's not present on the small screen. Now this screenshot I made back in February and in between then and now, Apple rolled out an update to both iOS and desktop Safari that all of a sudden supports font feature settings. So without doing anything to his website because he had used the proper CSS and was using open type features, it just started to work. So he didn't have to do anything but all the font feature settings that were there because the browser has now improved itself to support that standard, now everybody gets that same level of polish in the reading experience. Or if you look at this website, the Seattle Times designed by Mule Studio, they've done a beautiful job of using typography but embracing the fluidity of the medium so that you can see even though things reflow, it still maintains that same feeling and clarity. It's a really beautifully designed website if you block out the ads. It's an unfortunate reality. I don't wanna pick on them and I don't wanna detract from the quality of the editorial design. But boy is that system broken. We really need to fix that. That's another day. So to bring this back, thinking about how typography worked in the past, looking at this issue of monotypes recorder, I picked this story because it had some beautiful typefaces and it had a really interesting layout that was very much central to reinforcing that feeling of this piece. It was about ghost signs. And you can see the typography used in the title is really reminiscent of the kind of thing you'd see in old sign painting. The layouts were really beautiful. The photography was really fantastic. And I wanted to see how could we interpret this? How could we take beautiful editorial design and do that on the web? So when I was teaching a workshop last year at the typo conference in Berlin, I used this as the example. So what we move to now is the interpretation in HTML and CSS using web fonts. And so you can see going through this that I've really tried to preserve the feeling of that layout, but this is all done with only a couple of additional classes added in there, and it's also entirely responsive. And it really, I think, did a good job of capturing the feeling and the intent of that design while still delivering it in an appropriate way for the device upon which it was being viewed. So that was embracing a system of constraints that can apply and adapt across these different screen sizes and modes of use. Nevermind whether or not that content keeps changing. So we can embrace different kinds of units of measure, and we can embrace different techniques and detecting touch or the support of web fonts. And we've now managed to shift from that rendered normal to a dynamic future. And that's really, really, really important because this is such a dramatic shift and it's such a total shift of how we consume content into these digital dynamic systems with the screen sizes getting smaller and smaller. The only way that we can convey this voice and tone is increasingly going to be by the type that we use to do it. That is gonna be the one thing left on the screen. So when we look at things like these statistics from Statista about smartphone penetration just here in the US, and bear in mind, in the US it's probably lower than any place else in the world. We're already at about 80% penetration of smartphones just in this country. Now I think that's really remarkable because that really means it's moving very far downstream if you look at all kinds of age demographics, cultural demographics, income demographics, the fact that when people have to make a choice, are they gonna have broadband access or are they going to have a phone? They're gonna buy a phone. And that phone will then be one of these free ones that they can get with Android or a very low-cost iOS phone and a data plan because that will be the one way that they get online. Especially whether you look at something based on economics or something based on age, I can tell you with certainty that the last thing on my son's mind who's a junior in college as he moves into getting his own place for next year, sure they want wifi, but they care about whether or not the cell reception is good. I mean, that's really kind of the driving thing. So the first way that people interact with things is going to be on the phone. It's a small screen, it's dynamic content, it's the only way they're getting their news. So 50% or more get their news on this device. One in five have little to no broadband access at all. So that's really interesting stuff as we think about what are our tools as designers to get this across. And that was summed up really nicely just this past week. Matthew Rex is the general manager of Typekit over at Adobe and he pointed out that this is only the second presidential election where web fonts have been a thing. Now, if you really want some context, go back two more election cycles and there's no iPhone. I mean, the pace of change that we have here is stunning, but the important thing right now is when you think about how a presidential candidate gets their message across, how they connect, what voice do they convey? Increasingly, the only way it's gonna get to people is going to be on a phone. So Zach Leatherman did this really funny post. He decided to rank all presidential candidates by their use of an implementation of web fonts. As he puts it out, he is a single issue voter. So he's one of the developers at the filament group and he's written a lot of really interesting stuff on web font implementation. As he summed it up, Hillary Clinton probably is the winner here because she actually paid for a custom typeface that she's self hosting and does a pretty good job implementing it. He does point out it's eight seconds to web font render time, but I took a little look at that website and five and a half seconds is the optimizely JavaScript blocking page render. That's a fixable thing. Load asynchronously, remember that. So what we have to remember is that for there to be any experience at all, your content has to be there. Thank you very much. So we've got Ty very purposely left a lot of time for questions because that tends to be what I get more of than people wanting to listen to me talk. But there's a couple things to mention. That link here on the left, bit.ly.jpdropcap.dc. We'll take you back to the session page and immediately after, I'll be uploading the slides and it's also the evaluation page. If we don't know how you liked it, it's really hard for us to judge whether or not we're really hitting the mark. So it's really very helpful if you would do that. JPDropcap.dc is the bit.ly link. If you're curious, it's Cardamon and Choir Sans are the two typefaces that I've used, both of which came from Monotype. Immediately after this, at 315 downstairs in the event hall at the Drupal Association booth, I have a limited number of copies of my book for free that I will happily sign if you would like me to do so. And if you're here on Friday, please, please consider coming to the sprints. Even if you don't know how to code at all, there will be people there to teach you how to get involved. It's a very rewarding experience. I am one of those 3000 plus contributors to D8. It was three commits. Three individual things that I got to sit down and work with somebody on that made it into that official contrib log for that, and I'm really proud of that. And you all could be doing that too because we need tons of UX help. We need tons of documentation help. It just takes a few minutes of your time to have somebody show you where to find the things that you're comfortable working on. Now I'm making a bit of an assumption that I'm talking to a lot of designers and I have no idea if that's true. So if you're all coders and you all contribute, awesome for you, shame on me, I apologize. But it has been my experience and one of the reasons I ran for the Drupal Association this year was to try and help increase engagement in the design community. So it's really a big part of what I want to do as a contributor in Drupal is to help more people like us take our design knowledge and make that part of what makes Drupal better. Because as we saw from the keynote this morning, that is what is one of the most important drivers in adoption of Drupal is the site building and authoring experience and that is all about UX and design. So questions, if anybody has one, we'd love to hear it. There's a microphone right here so we can capture it for the recording. Please come up and ask. Anyone? Yeah, please. Either that or I have to repeat the questions. All right, do you have some sort of quick takeaways on the Google Web Fonts in terms of Procon, Pitfalls? I mean, obviously it's a limited library but it's readily available and accepted. It is. So I don't really have anything against Google Web Fonts. What I have a challenge with at times is the level of quality of the typefaces that are there because quite often you're getting what you pay for and that's nothing against the people that want to contribute their things to open source but as designers and communicators we need complete character sets. We need things that are well-hinted to work well on Windows as they do on the Mac. So the thing that you have to do is really test them well. So the performance is really pretty good. They obviously have a little money to throw at that so that's a good thing. One of the best bits of advice I can give you is actually something I got from my friend Steve Hickey is that look at the number of weights and variants that have been provided and that's a really good indicator of the level of quality. Is it a professional typeface designer that has been working on this? Yep, so if it's a bigger family, if you look at Merriweather, like that's a really great example. It's a beautifully designed typeface. It's actually part of the core of the US Digital Services new design guidelines for government websites because it has a huge variety in weights and variants. So that's a sign that this typeface has been really thoroughly tested. It's very complete. It has a complete Unicode character set so it will be a very serviceable typeface to use. If you see a lot of things where there's one weight, that's something that I would test thoroughly. Think about the character set that you need and make sure it's all present. Test it really heavily on Windows versus Mac and older versions and IE and that sort of thing to check for rendering quality. Those are usually the places where you'll see some problems. Is there a way when you're purchasing fonts also that they will show you the variant in different size renderings because if you have a large font sometimes you'll have much more elaborate things going on and they'll simplify down but knowing that again ahead of time. So the question was about getting previews in different sizes and most services will allow you on a type testing page to change the type size, change the characters that are being used in the display. So it does vary with each service but most of them do have the ability for you to put in your own string of text, change the type size and see, make it really big, make it really small because you really wanna test that and see some typefaces work really well at large sizes and are very, very tough to read at small ones so might be good for headings, might not be great for body copy. So I think there was another hand in the back there a minute ago. No? Oh, there we go. So the question is about controlling line breaks and that's a tricky question or rather a tricky answer because there are a few different strategies that you can employ. Now the one that I've found to be the most frustrating is usually as screen sizes change getting widows or orphans, that one word on the end of a line and that is actually one of the easiest things to fix. So if you're working in anything up to Drupal 7 go get the typography module and turn it on and you're done. That's it. And what it does, among other things is replace the space between the last two words of every paragraph with a non-breaking space character so it addresses it as an input filter on the server before it ever gets served to the client. You'll never have one word at the end of a paragraph again. Barring that and so hint, hint, anybody wanna work on a D8 conversion? It's been my favorite module for years and it does a bunch of other things like fixed smart quotes so it will make sure that it has proper apostrophes and quotation marks without you ever having to do anything so that's a really nice, nice touch. If you can't do that on the server side or at the moment you might be working with a D8 site where it might not be available I actually don't know if it is, I haven't looked. Thank you. Typography. So there is a way forward here. It is a PHP plugin that you can get that's just called PHP typography and you could actually incorporate that into your theme if you wanted to just without actually going through the module but one second, let me just finish this thought. The other way you can do this is using Widow Tamer which is a JavaScript little plugin from Nathan Ford that you can find on GitHub and there's also another one that Nathan Ford's been working on that's more complete but Widow Tamer allows you to just define the element that you want to fix quote unquote whether it's a P tag or a heading or whatever and how many characters you want to always be on the last line so you could say 15 characters and pin that to the resize event so anytime the window resizes then it's gonna check and make sure that it always has a few words on the last line or 15 characters and then a line break, a word break. So there are a few different strategies. I cover a lot of those things in my book which you can get on Amazon and O'Reilly. Oh and if you are interested, say if anybody wanna discount code for O'Reilly books. Okay I kinda figured because it's not good on just mine it's for anything from O'Reilly. If you're buying anything on the O'Reilly website use the code auth D, A-U-T-H-D and that's good for I think 40% off print and 50% off ebooks. Tell them I sent you. But don't tell anybody outside this room. So you had a question in the back. So okay so the question was about hanging punctuation. So if you were watching carefully you will have noticed that in Frank Camaro's book in that first paragraph the quotation marks are hanging beautifully only on the first line. That's the only easy fix that I've found. So the notion of hanging punctuation is so that the characters are all lined up in a margin but any quotation marks or punctuation around it would be hanging out in the margin which is a much nicer way to typeset things. That's really, really difficult to do when it happens in the middle of a paragraph. And I don't know really of a good way to manage that unfortunately. It's easy to do when it's the beginning of a paragraph so you can address many of the circumstances while that comes up. You could do something with a simple conditional where if one of those quotation marks is falls in the first letter because that's something you can detect for in CSS. So first of type first letter is actually a pseudo selector you can use. You could actually do something in your twig templates that would look for that and actually set a negative margin or add a class to sort of bump it out. That would be one way to handle it. Not perfect but it would help. Thanks. So on multilingual sites do you have a good way to handle different font definitions different font families for different languages when you're using no translation or field translation and also the different sizes because I work with, I'm in Japan and so all of my websites are English and Japanese and all of them are bilingual and the problem is that the Japanese fonts actually we need them to be a little bit bigger in English and it doesn't work. I can't make them a different size. Although if you define the Japanese fonts families first and then the English font families they don't conflict because it won't be applied to the English because they're not in the right Unicode range. Do you have a solution for size or do you have a better way to deal with these? So there's actually a, there's a relatively straightforward way to handle that actually by tying into a similar solution to tuning fallback fonts. As long as you can get the language encoding for the page as a class which is usually not that hard to do using different multilingual solutions. So add that as a class, the language encoding as a class in the HTML and then you could scope your CSS for when that class is present on that particular element alter your type size. So that would be a way to handle it kind of across the board and probably tie into things in a little bit simpler manner because just solving that one issue of getting that class in your HTML is probably the easiest thing that you could do. I haven't done that myself but that's tended to be a way that I've been able to scope a lot of simple solutions that way and that would certainly give you the control you're looking for. Any other questions? Oh, another one. So the question was best practices about websites or resources for typography and typographic systems. Well, the website that I've put up to house a lot of things about my book has a lot of presentations and sample code. So rwt.io is that website. If you look through the resources, I need to add more there but you'll see links to a bunch of things. I have a bunch of things on GitHub that actually include a lot of sample size systems. So if you use SAS, it's really easy to incorporate but I also have workshop code that's just straight CSS. So that's one reference. There's also a really fantastic book online from Donnie Trong, the one who did that Vietnamese typography. If you look up professional web typography, I think it's called prowebtype.com. Basically, he's written an even more up-to-date and comprehensive version of what I've written that's free and available online. Kind of undercuts my book sales but it's really thoughtfully done. There's also, it's a little dated but if you were to look at the elements of typographic style on the web, that's something you'd probably have to Google. I don't remember the URL but it was an adaptation of Robert Brinkhurst's book, The Elements of Typographic Style done by, I think it was, it might have been John Tan and Rich Rudder. I know Rich Rudder was one of the people. He was the founder of Clear Left and also Font Deck. So he's an incredible resource on typography. He also has a book coming out soon that he did on Kickstarter that's gonna be about web typography. So those are a few different things that you could find. Also, if you just research Bram Stein or Tim Brown, the two guys that work with Typekit that have published a tremendous amount of really helpful resources, the stateofwebtypography.com is another really good resource that lists a lot of other good things that you can find online. So there's a growing body of work out there now that can really help you get a good starting point. Anybody else have any questions? Awesome, you guys have been absolutely amazing. If anybody wants to continue the conversation, come with me downstairs and I'm gonna sign some books. Thank you.