 So today we're going to talk about WebType, which is one of those topics I think last year at this time at TypeCon, I was always like, ooh, I don't really want to talk about that and this year we're presenting about it. So excited to be up here. I work at CreativeLive. I'm head of design and education. And my name is Justin and I'm actually a software engineer at CreativeLive. Has anyone here heard of CreativeLive? So we do online education and the classes are in photography, design, and the category called money and life, which is very general. So what we want to talk about today is what are the things that you need to know about WebType to effectively teach typography today? And how this talk came about is I taught at the undergraduate level for many years. And I always worked in education. I taught at the School of Visual Arts and later at Pratt. And then I moved back to San Francisco from the East Coast and I found myself working at a startup. But I still wanted to teach because one of my things is like I always want to be teaching. But I started teaching at General Assembly. So have you guys heard of General Assembly? So I was teaching groups of people that want to become UX designers that didn't come from a design background. And normally like I can teach typography with my eyes closed and I'm really into it. But they started asking me all these questions that I couldn't answer because I wasn't first in WebType. And so I realized like there's a bunch of stuff that I needed to learn in order to effectively teach a typography class to UX designers. And luckily I work somewhere where we have a lot of engineers and developers. So I sort of tag-teamed with Justin to like I started asking him so many questions every day before class or after class. And we put together a bunch of resources and findings and I was like we should definitely present this at TypeCon. So at the end of this talk we're going to give you a URL where we put a bunch of resource links and this PDF and some other information on the topic. Yeah so we had sort of run into each other one day and just started having this conversation. And I was really kind of appalled by our current websites load time. And at the time we were using Gotham as our web and our print font. And unfortunately Gotham is loaded via typography.com. And so when we load Gotham it would come through typography.com and it would take about a second just for typography.com to load this. And if you look at any sort of findings or case studies on bounce rates for people viewing your site, you'll see that typically if they've never been to your site and it takes over a second to load, well they're probably going to bounce. They're going to leave. And obviously if you have a web page you want people to consume your content. So we were discussing like what can we do about this? Well the idea was we need to find an alternative font. So yeah we used Gotham for print and web and so we decided we found an alternative which was Proxima Nova. And we were able to load this, decrease our page load time by a second and essentially get something that would still comparable to our current brand font. It was funny too because our creative director and our CEO were like very married to Gotham because Gotham is our logo typeface as well. So this idea that we have to use Gotham consistently across the board which I totally agree with except for when your product is a website and you have HTML text. And it's taking too long to load you have to be willing to be a little bit flexible. And so this was really interesting to me because I rooted in consistency. And I just sort of want to clarify like when we talk about Proxima Nova as our HTML font we're talking about the text in the site. So anything that you can select like the instructor bio. And then in graphics we're still using Gotham. So anything that's an email graphic or sometimes we have graphics on our site that have text in them that's always Gotham. So it's interesting because while it's interesting to me and I think probably to you guys too you've got Proxima Nova side by side with Gotham. And here you can see like the back to school sale 40% off text is a graphic so that's Gotham. And then the other text is Proxima Nova. And normally I would tell my students like never mix two sans seraphs you know. But in this case it's interesting to me because like the load time was such an issue. Yeah so one of the things that we did once we made the switch from Gotham to Proxima Nova is some of the software engineers or front end web development engineers put together a sort of typography style guide. And we worked with the design team and said okay we want to have consistent styling across our pages and as we scale our engineering team to have more front end developers. We want to ensure that the HTML markup that they're writing is going to be consistent with our brand. So what we did was we put together some sort of CSS style sheet that would say whenever we use H ones or H twos or paragraphs or links that these would have these sort of consistent stylings font wades font styles etc. And this really really helped us to stay like to move faster with putting out more content on our site and we were able to make be more consistent with our with our brand. So one of the things that one of the analogies that I sort of was thinking about when I was preparing for this talk was like okay I am talking to people who know a lot more about type than I do. I am a software engineer by trade I know I know HTML I know CSS and I know many other programming languages but I don't really know the specifics of these sort of the semantics of font working with typography. And so I started thinking about like what's a good analogy so I said okay when you when you have print you're essentially you go to the print the printing press that the press is going to be stamping this on a page essentially. Or laser jet printers or whatever but the browser essentially whenever you load a page it's doing the same thing whenever somebody loads a page that you are stamping. Your design onto this onto this website for them to view but the problem with the web is that it's it's ever changing and it's dynamic. And it's hard to it's hard to have that sort of consistent layout if you have these columns and you have these sort of font weights and styles that you want. Across you know mobile web and as as we're seeing now we even have like you know Apple TV and Roku you know we have applications that are we have software that's now running on your television. And in order if you want your brand to be consistent you really need to think about these things like like thoroughly. And so we just kind of put together some sort of like overlap of what we thought would be some of what would be the overlap of some of these things such as like some of the terms that are used the differences between. Print typography and and web typography and some of the rules because there's still like a lot of print rules really would still apply to web. So one thing that I realized when I was teaching the General Assembly students is that they were all working in sketch as their primary tool. How many people here have used sketch. So I hadn't used it. I was using InDesign and I was speaking in InDesign terminology like letting and kerning and I was assuming that everybody was working in point sizes and starting at 12 point. And then I realized they're all working in sketch because it's less expensive. It's not a cloud based subscription model. And that's the software that's sort of becoming the norm for UX designers. So I've just sort of taken a screenshot and put them side by side. And it's really scary. I was talking to somebody earlier about the fact that a lot of these visual visual designers are using sketch to set type, which kind of makes me cringe. But you know that's the reality is just figuring out where the terminology is different and where it's the same. So one thing that's very different is the size of measurements of the typography. We work in points and then pixels is sort of the measurement for web type. And I noticed also that it's when you start working with type and sketch it defaults to 20 pixels. So it's like Microsoft Word is 12 points, sketches 20 pixels, but they're basically the same size aesthetically. Letting, so that's something that we talk about a lot. In CSS it's line height. I'm just going to say your part. Originally we were like web, print, web. So with alignment, in CSS it's a markup that's sort of familiar, text-aligned. And then you have to figure margin and padding to get it right. And then letter spacing is tracking for us and print. And then for the web it's letter-spacing. And then kerning, which when I was talking to Justin I was like, well what about kerning? And he's like, what's kerning? And I'm like, what? Yeah, and for CSS there actually are some new standards being put out where you can have some control over kerning. But these standards aren't really adopted by most of the major browsers yet. And so I find that it's better to sort of solve this by choosing the right typeface that has the proper kerning already set. And this sort of leads into how do you actually choose a web font? So I kind of thought about what would be the priority list when I'm working with a designer or as a designer working with a developer to sort of choose these fonts. The three things that I would say are sort of, and I should have had a slide for this but I didn't, were number one, obviously legibility. Two would be, maybe less obvious, would be performance and feasibility. Because as a designer working with a developer on a web application, you really need to be thinking about, well, how long is it going to take for these assets to load, whether that's images or fonts, and obviously particularly fonts here, and then feasibility, right? And this is probably less so with typography but more to do with actual web design. And then finally, obviously, the design aspect. So by making our sacrifice from going to Gotham to Proxima Nova, we increased the performance while we still stayed on brand. And we're still delivering, you know, it's still legible, it's still close to what we wanted with the final designs. So there are a few things that you should consider when you're choosing a web font. One thing that is really good to use for user interface text is any sort of humanist sans serif, and they have more space between characters and the letter forms are distinguishable. So there was a moment when Apple was using Helvetica as a system font, and I think you probably remembered everybody sort of freaked out, because it's hard to distinguish characters from each other like a capital L in two lower case, or a capital I in two lower case Ls. So on things like signage, wayfinding systems, you want to use a humanist sans serif. And I love these sort of studies because they're so nerdy. This one was MIT and Monotype, and they were studying humanist sans serif versus a geometric sans serif for car dashboard interfaces. So they compared Urastyle and Frutiger, and when they used the humanist typeface, driver's glance time went down by a half a second. So I love like little nerdy things like that. That's 50 feet, two car lengths. So this is really like life or death stuff here. Also, if you don't want to use a humanist sans serif, you just want to choose a serif or a sans serif that has a tall X height. And I think the first fonts that were developed specifically for web were Georgia and Verdana, and they actually have new versions of those that are amazing. So there's a lot of great tools out there to help you choose these. Adobe type kit, and there's another really good one called type wolf. These are on our list of resource links. I think there's other stuff. Yeah, I wanted to say one of the really cool features I've seen in Adobe type kit when actually dealing with performance is that they actually have this sort of dynamic JavaScript that we'll load on the page and we'll figure out which glyphs are actually used. And right now I think that was typically used for like Asian character sets due to how large they are. And it will essentially just deliver those glyphs that you're required to load on the page. And I thought that was really neat. And from my understanding, I've actually was just reading that the CSS standard, the World Wide Web Consortium, was looking at sort of like allowing developers to do this in the future with any sort of font that they're loading, which would be really neat because then we could deliver just the glyphs that you need to load on the page and to style your particular content with the way you want it to be styled. And I think that's it. And I just, I think it's really nice to team up with somebody that is so well-versed in this stuff because I just sort of listened to Justin and I'm like, this is such a rabbit hole. Like things are always changing and I just come from such a solid print background. So thank you for teaching me things.