 Welcome to the wonderful world of typography. My name is Garrett Voorhees, and I'm the senior designer and UX strategist at Chapter 3. We're over in San Francisco, and we do our best to build good-looking websites that, you know, read well, function well, etc. And I have a lot of stuff to cover for you today. All of my slides will be online. I've got a link for you so you can snag the PDF at the end if you're worried about furiously scribbling your notes. And I'll say kind of a lot of what I'm covering today might be things that you already know if you have a background in design or typography, but I can pretty much guarantee there are at least a few things you have not seen before, and we'll dive right in. So I think it's important to kind of set a baseline. Like what is typography? It's basically any arrangement of letter forms, but this takes the form of books, magazines, packaging, way-finding signage, street signs, that tiny text at the end of a prescription drug commercial. But at its core, it's utilitarian. Type exists to communicate a message to you, and that method of communication can be either very simple or very complex. And I feel obligated to give you this warning because once you start to go down the typographic rabbit hole, your brain will forever be changed. I like to kind of think of it as a chronic disease. So everywhere I go, I cannot help but analyze and pick apart, you know, oh, what's that typeface? Oh, interesting that they use this with that. You'll never be able to dine at a restaurant without deeply scrutinizing their menu. So this is your last chance. You can still, like, take the blue pill, walk out the back door. Yeah. So these are a couple shots that I snapped when I was flying through SFO just a few days ago to just kind of illustrate the ubiquitous nature of typography in our world. So you see it on things like this way-finding signage. Here we've got a whole bunch of different stuff going on, various signs, a defibrillator, restroom, a deli, and they're all kind of treated differently. They're kind of commanding your attention in different ways. And these are things that we don't necessarily stop and think about. You know, we're just kind of digesting this information very quickly and we keep moving. But at some point, some human intentionally laid out this stuff and it was designed, and somebody designed the typeface that it is set in. You see it on packaging. Here, you know, the type is especially designed to kind of grab your eye and communicate a certain tone or a certain feeling. Magazines, all those medicines. This one was kind of interesting to me that you have, you know, this bold statement in all caps in this very traditional serif style. So all of that kind of communicates different things to us. So here's a little exercise test for you. This is going to pan across and just try to kind of keep track in your head of all of the different typographic styles and treatments that are jammed into this space. And this is Times Square in New York, of course. So there are lots of signs for Broadway shows, restaurants, a little bit of street signage. If you look really closely, you can see maybe some text on people's t-shirts. And this is maybe, you know, the extreme example where every possible surface is covered with some sort of messaging, much of which is typographic. So did you count them all? And designer Nicholas Damien's kind of asked this question about Tokyo, like what would the streets of Tokyo look like without all of these logos and slogans, company names, etc. So he did kind of this interesting series of images where he just Photoshopped them out and he's probably seen similar examples. But it's kind of a good reminder of how prevalent all of this stuff is. So we're going to travel back in time a little bit to about 113 AD in Rome. And this is a picture of the Trajan column, which still stands today. And you might be familiar with the typeface Trajan, which is directly based on these letter forms. And these are basically the inspiration for our Roman capitals or our uppercase alphabet that we see today. It's also since been reappropriated for basically every single movie poster in the last like 25 years. It just kind of goes on and on. And sometimes they might tweak the letter forms a little bit. But if we go a couple centuries later, you can start to see how handwriting influenced early printing, which directly influences the typography that we see today. So this is a Latin Bible handwritten in Belgium in 1407. And so, you know, before the invention of the printing press, all of these books had to be written by hand, by monks, you know, in tiny, dim, candlelit rooms. And it would take them maybe a year to write out a complete Bible. And this is in what we would call like a black letter style, which has also since been reappropriated by everybody from Nazi Germany on their propaganda posters. You see it in kind of classic heavy metal. Hip hop has used this a lot very commonly. Every newspaper, corona. So this typographic style with the roots in handwriting that dates back, you know, tons of centuries is still something that we see every day. And so a few years later after the Bible that we showed, here is a page from the Gutenberg Bible, 1455. And this is the first kind of significant work that was printed with movable type, meaning that each individual letter was a separate piece of metal and they got arranged in very careful rows. And they would typically arrange kind of an entire page at a time, print off those pages and then reclaim all the letters, rearrange them and do the next page. And you can imagine that's an extremely laborious process. But what I want to point out here is this early metal type is very, very closely imitating the black letter handwriting that we just looked at. So at first, you know, when we were making printed books, the thought was, well, we should just emulate exactly what we had before. And you can see how over time it starts to evolve a little bit. So a few decades later in Italy, you start to see books based on other calligraphic hands. This is cut by Nicholas Jensen. So if you've heard of the typeface Jensen that is directly based on his work, and this is from 1474. And you can see that, you know, rather than the very heavy black letter, kind of almost all caps appearance, the lowercase letters are very similar to what we would expect to see today from Seraph typography. A few centuries later, I'm skipping over a lot. So, you know, you can go back and fill in the rest yourselves. We're in the 1800s. The Industrial Revolution has enabled mass production. And along with mass production, you need to advertise all those things. And so advertising created kind of this catalyst for experimental typography. And at this point, everything was not necessarily metal. Woodcut type was kind of more the norm for something like this. And you can see that there's this huge diversity of styles. This is actually a wanted poster for John Wilkes Booth, who shot Abraham Lincoln. And this is from 1865. So as we scroll down, again, try to count like the number of different styles that are present here. It gets pretty crazy. You know, if you were to see a poster like this today, you would think, whoa, like back off, don't use so many fonts. And so things like our sans-serif typography didn't really emerge until this era, and we'll get into that a little more. And if you've never experienced or witnessed the magic of letterpress, this is kind of the process. You have cases of type with little compartments for each individual letter, and that's actually where we get the name for upper and lower case. The capital letters would be arranged in the uppercase, and the lower case letters would be in the lower case. So you have to pull out each individual letter and arrange them one line at a time. And to set the space between the letters, you insert literal pieces of lead, and the thickness of the lead determines how far apart those lines are spaced. So today that line spacing is also known as letting, which literally refers to the pieces of lead that were placed in between those lines. So then you kind of have your whole lockup after you have your lines composed. You lay it in here, ink the metal, and run a piece of paper through, and it transfers the ink beautifully. The other thing I didn't point out is you have to do it all backwards. All of the words have to be set backwards so that when it prints, it reverses and creates a regular image. Somewhere between letterpress and typewriters and computers and digital type were things like this line-of-type machine. This is from the early 1900s, where you would be typing on a typewriter-like keyboard doing one line at a time, and the machine would do kind of the work for you of pulling the letters that you need. So it would kind of arrange the line. You can pull that off and set it up, type out your next line. And so this is still laborious, compared to today's standards where you can pop open any word-processing application, but still hugely faster than having to pick it all out by hand. So along with all of this, I think it's important to remember the importance of handwriting. And what's been interesting to me is Instagram has become kind of this new platform, as a great place for lettering artists, calligraphers, etc., to kind of keep this spirit alive. So this is work from Seb Lester, and it's not loading. There it goes. So you can look him up on Instagram and he will do little 15-second time lapses of him writing out all of these words in beautiful different hands. So here's a black-letter style again. There's a lot of flourishes and embellishment to it. But again, this kind of centuries-old practice is still very much alive today, kind of in different forms. Here's a nice one. He makes it look just perfectly effortless, but I can guarantee you, there's a lot of subtlety going on in the amount of pressure and release required to create those fine letter forms. So you're probably familiar with serif and sans serif as kind of our major classifications. I think it's important to kind of have a general understanding of what those subclassifications look like. And this more or less goes chronologically. So you have old style, which emerged in kind of the mid-1400s around printing press era. And this is like that Jansen text that we looked at. This happens to be a typeface called Sabon. And this, you know, looks pretty normal. It's fairly low contrast. And what I mean by that is the thinnest part of the letter form and the thickest part of the letter form are not too far apart. If we go, again, a couple centuries later, mid-1700s, we have transitional type. So at this point, we've been doing this for a while. We have finer tools. People are more experienced. And so you have higher contrast. So again, the thinnest parts of the letter forms are thinner, and the thicker parts are probably about the same. But if you can imagine, you know, you have to carve this metal type at the actual size. So if you have, you know, nine point lowercase letters, you have to be carving all of those details very precisely. And the even more extreme progression here is modern style, late 1700s. And this is very high contrast. The serifs tend to be extremely flat. And this is still used a lot for, you know, high fashion perfume ads, et cetera. It kind of has some connotation of being a little fancier. And then the Egyptian or slab styles were the kind of exotic weird stuff that was happening in the mid-1800s. These tend to be really chunky rectangular serifs. And they were called Egyptian because that was like the most exotic thing that you could conceive of, you know, back in the 1800s, this far away mystical land of Egypt. And then in the sans serif realm, again, here we're starting at kind of the mid-1800s and going forward. We started with grotesque, which is not to mean hideous, but these often originated in that same era. They were kind of all caps initially before we were still figuring out what sans serif lowercase letters look like, which seems like a strange thing. They seem so obvious to us now. Neo grotesque is just kind of an evolution of that. It came out in around the 1950s. So this was Swiss modern design, kind of pushing refinement of those letter forms into, you know, the ultimate Helvetica here. Geometrics also emerged in kind of the, around the 1930s, 1920s, especially in the Bauhaus movement in Germany. And the idea was that the kind of beauty of geometric forms, you know, should be translated into our letter forms. And this is nothing new, but they kind of formalized it in a lot of ways. So here's the lovely Futura. And then humanist sans serifs also emerged around the early 1900s. And these are based more on kind of early caligraphic forms, but just a little bit simplified. So here, this gives you a pretty good overview. And I think this shows you that progression of contrast, how from old style, transitional, and then modern that contrast gets higher and higher. And then when you get to slabs, they kind of go a little wacky. You can see how they're more similar to the sans serifs in a lot of ways. And it's also important to know just some basic anatomy. We'll breeze through this. A lot of this is very common sense. And a lot of the anatomy of letter forms is based on kind of human anatomy. We like to project ourselves onto everything we possibly can. So the vertical part of a letter is the stem. Curves are bowls. Any kind of contained center space is a counter. If it reaches something like on a lowercase r as well, that's an arm. You already know about the serif. And when you have the ends of letter forms, like the end of a C on either side, those are the terminals. And then even though this is not truly enclosed, we also refer to these as a counter. So the line that your text rests on is your baseline. And the height of the capital letters is appropriately your cap height. You have A senders and D senders. Serifs again. And then the line that's kind of the height of your lowercase letters is your mean line. And then that literal height, that distance, which is typically the height of a lowercase x, is called your x height. Very straightforward. But it's good to have a general knowledge of some of this terminology if you're conversing with other fellow type, chronic type sufferers like myself. The other word that gets thrown around all the time is font. Everybody loves the word font. Admittedly, it's much easier to say than typeface. And I've stopped correcting people because I feel like a jerk. But the typeface is actually kind of the artistic concept of that whole family. So if you're referring to Helvetica as a concept, as a design, that is the typeface. And then all of those styles that make up the family are the family, and then the individual style is actually the font. So do with that what you will. But it doesn't help that it's called, it's the font menu in a lot of applications, and it just kind of perpetuates itself. You might have wondered, 12 point, what does that actually mean? So to measure point size, it's the distance from your descenders, the bottom of your descenders to the top of your ascenders. So if you have your traditional school assignment set in 12 point text, you probably know there are ways you can game the system a little bit by choosing a different typeface that is optically larger or smaller. So in this case, all of these words are set at the same point size, but they have different X heights, which creates very huge differences in their optical largeness. And as we were talking about, letting or line spacing is simply the distance from one baseline to the next baseline. And if you're thinking in CSS terms, this is line height. And I don't know why we can't find a standardized term for this, but that's okay. So if you put it all together, you've got your point size, and then you're letting. And in at least the print world, I don't hear this so much anymore. You would refer to this as 12 on 15, or you can express it as 12 slash 15. So that's really like skimming the surface, but if you are looking to kind of dive a little bit deeper, these are a few books that I would wholeheartedly recommend to anybody. They're all very approachable. In fact, the laws of simplicity is not so much about typography as it is. Theories of design that are very relevant to everybody. And the bottom right, the elements of typographic style is really more of a reference book. So if you think that you're going to be working with type more, especially in a print capacity, it's a good book to have just sitting on your shelf handy. If you're looking to just kind of go a little bit deeper, I think the bottom left two options, stop stealing sheep and thinking with type, are probably the ones you would want to pick up first. I'm sure your local library has a copy. So you guys are experts now, so we're going to quiz you in a minute, but you've probably heard some nasty rumors about Ariel over the years. How it's a blatant ripoff of Helvetica. The two-second story is that Microsoft wanted Helvetica but didn't want to pay for it, so they commissioned some folks to basically copy the design, keep the widths of all the letters identical so that if you were to swap them out, it's not going to change your page length and stuff, but change the design just enough so that they could avoid a lawsuit. So I'm going to teach you some of the secrets so you can spot the difference in the wild. This is a great party trick, people love it. The biggest difference you'll notice is Helvetica tends to terminate parallel to the baseline whenever possible, and this speaks to kind of that Swiss modern design, whereas on Ariel, a lot of the terminals will be angled a little bit, and it can be subtle depending on the printed size, but you see this throughout the entire design, they're very consistent. So the same thing on the lowercase R, it's just a little bit of an angle to it. The T is a better giveaway. You can see that that top terminal has a pretty dramatic angle, and the bottom one does too. Same thing on the S. And the cap R is interesting. The capital R in Ariel is one of my least favorite characters ever. It's like they took this beautiful, strong, kind of bold form from Helvetica and just turned it into like a limp noodle. So this one is a dead giveaway. If you see that bold R, then you know it's Helvetica. Same thing on the G. Helvetica has this kind of strong spur at the bottom, whereas Ariel, they just kind of rounded it off. And the Q is another interesting one. Helvetica once again, bold, strong, straight line. Ariel has like a little bit of a wave to it, but sometimes it's a little more subtle. Like at a glance, you might not be able to tell the difference here, and in fact, if you draw some lines, you can see that Helvetica is just a little bit lower wasted. They basically shifted some of those points up a bit in the Ariel design. So in context, it's almost impossible to really tell. So I'm going to test you guys. Just shout it out, anybody. Which one is Helvetica top or bottom? Top. No question that A is a dead giveaway. Top or bottom? Top. Top. Top or bottom? Top or bottom? Yep. How about this one? Honestly, I don't think I could tell you. These are some shapes that are like really, really identical. It's actually the top in this case, but you had like a 50-50 shot. So congratulations. So last I heard, I don't have a source for this, but there are over 300,000, and the number changes constantly. Over 300,000 different typefaces available in our world today, which is kind of a lot. So how do you figure out like what the hell to choose? This is basically the face that I make for a couple hours while I'm like going through this process. But there are kind of a number of basic questions that I can ask myself. And the context of what I'm working on can often help me kind of narrow things down. So one of the big questions, if you just saw this slide out of context, you might think you're at a different conference. So you might think like, do I need a large family? Am I going to be using this only for headlines? Do I need this to serve as my body copy and for subheads and sidebars and this and that? So I want bold weights and light weights and all that stuff. Will it be used for print? That would kind of decide what sort of licensing approach I would take if I knew that I wanted a design that could complement both the website and print materials, I wouldn't necessarily choose something from Google Fonts, for example, although some of them may perform decently in print, they're not necessarily designed for it. How will it display cross-platform? If you're dealing with, you know, your user base is primarily on Windows, you want to make sure that your text is going to be pretty well optimized for it. A lot of times it'll end up unnecessarily crunchy and it can look bad. And we've dealt with this many times with clients where we launch the site, we think it all looks great, and then they come back to us saying like, it looks terrible on our computers, you know, you've got to fix this. Does it convey the right tone? So as we talked about a little bit, you know, every typeface kind of has a different personality and the way that you're using it can influence it a lot, but a lot of times you can kind of look at something and just feel it in your gut, you know, whether it's appropriate for that client and that project. Again, what sort of content would it be used for? So if it's going to be a lot of long-form text, you don't want something with a really tiny x-height or like high-contrast letter forms, for example. What style of numerals? If you're going to be using it for like tabular data, you probably don't want old-style numerals, which we'll talk about a little later, but they look more like lowercase letters where they're kind of variable heights and widths, and that can be tricky when you need tables of data to be aligning with each other. And do I need to support non-Latin characters? If you need, you know, Cyrillic support or Asian language support, that can be a real challenge. So one of the benefits of Arial is that it's on basically every computer and it has an insanely huge character set, which includes Chinese and Japanese and all of these other languages. So that's definitely a consideration. And the other thing I like to do is start setting the word to feel it out. So this is kind of a silly nonsensical word that's often used to evaluate a typeface, but it kind of has enough variation and enough representation from the alphabet that it can be useful to just start to get a feel for it. More commonly, you probably set it in a pangram. So here's the classic quick brown fox jumps over the lazy dog. But all these are phrases that include every letter of our alphabet so that you can kind of see how it's all behaving. I will say Wikipedia used to have an awesome article that collected all of these pangrams, and they took it down not too long ago, but this lovely person at clagnut.com has preserved them for us, which is handy. I think this might be my favorite one. Yeah. And you can make your own, too. Why not? So again, type has a strong effect on our perception. This is a menu from Denny's, the famous restaurant chain. And you can see they're using kind of friendly sans serif typography, lots of color and lots of photography. So if you went to whatever country somewhere in the world and you sat down and their menu looked like this, you'd have a certain expectation for kind of what the food is going to be like, what your overall experience will be. It might be comforting that you see the pictures, you kind of know what you're going to get. And then imagine if you walk into a Denny's and their menu looks like this. You'd think you're on like candid camera or something, like somebody's messing with you. And this is communicating a wildly different tone. These things don't even have dollar signs next to them. It's obviously pretty fancy. There's even today's date at the top of the menu. But these things all kind of clue us in on the experience or whoever designed this menu is trying to convey a certain feeling for you. So which one would you prefer to dine at? And it probably depends on your mood, where you are, how much cash is in your wallet. There are a lot of factors. When I'm working with clients, this kind of translates to a mood boarding process. So what I often do, and these are examples from a client we worked with, I will take some basic elements, header styles, a little bit of body text, maybe a couple UI elements and create a pretty simple lockup here. So this gives me an overview of like the tone. And then I'll kind of iterate and do a couple variations using different typeface combinations. And this is a good way to kind of get your clients involved and getting some reactions. So they were able to look at this and they naturally kind of gravitate towards one option or another. And sometimes it's a combination of options that ends up kind of going forward. But the important thing here is that you're not investing a lot of time in designing it at this point. You're thinking about the overall tone and kind of the system that you'll be creating. So here you can see these three header styles. And I will say that the second two are really, really similar. And the reason I included Gotham and ProximaNovo was to kind of start talking to them about font licensing because they're available through different services. And we'll get into that. So what happens if you're browsing the web and you see some beautiful typeface in the wild if you're savvy, you can kind of inspect element and like pick apart the CSS a little bit and try to find the family name. But I recently discovered this tool, which is super handy. FontFaceNinja, they have a Chrome, Safari, and bookmarklet Chrome and Safari extensions. And you can basically hover over any text on any site and it will tell you what the family is, what size it's set at, the letting, et cetera. And if you click on that text, it then gives you a little space at the top of the window where you can type in a few words in that typeface and kind of test it out, which is really handy. And also most web font providers will offer you some way to kind of test things out. You can type a few words. Hello, Drupalcon. And, you know, this can give you a decent sense of it, but a lot of times you really have to like get your hands on it. To figure out whether it's going to work for you. Or when you see type in the wild, and by the wild I mean not on the web, and you can't identify it, this is also a great site if you're not familiar. You can upload a photo of your text, you should probably crop it down to like a couple words, and it does its best to approximate, you know, what typeface it is or similar typefaces that you might want to consider. But if you do want to just try things out online, this is another good option. Everything on Google Fonts is available on here for free, and they have some paid models that include libraries from other font foundries. But this gives you kind of some basic page elements that you can then modify, you can change like the background color, size, spacing, all that kind of basic CSS parameters. And it's a good way to feel like how that the text will function in more of like a long form context. Also, if you have like a Creative Cloud subscription and use Typekit, you can access Typekit's full library in Photoshop, but if you're not using Photoshop, like I happen to use Sketch, it doesn't really help. So if you've ever tried to license Fonts for print or the web, it can be a little bit of a nightmare. It used to be a lot worse when certain font formats were only Mac or PC compatible. So we're past kind of a lot of those bumps in the road. But these days we get to deal with different browsers and supporting all of them. I'm going to breeze through a little more history for you here. Prior to Digital Type, Type was more or less a physical thing. It was pieces of metal or wood or what have you. And PostScript, which came out in 1984, like a long time ago, was developed by Adobe and basically expresses these letter forms as mathematical equations. So they're outlines rather than being kind of a physical filled thing. So they use Bezier curves, which we still see today in Illustrator and Photoshop and anytime you see a pen tool. And this worked great, like people went crazy for it. PostScript was embedded in every printer. Adobe was making a ton of money off of this. And around 1991 or a little before, Apple started developing their own kind of competitor called TrueType. So this is the same concept. They used a slightly different Bezier curve style, but they're basically the same thing, although not compatible with each other. And this came out in 1991 along with Mac OS 7. But if you haven't seen kind of the way that Bezier curves are typically built, these are the handles on that Helvetica S. So you can see that each point, and there are relatively few points for the kind of complex curve that's created here, has handles that are pulled out. The distance that those handles travel indicates kind of the intensity of the curve. So if you open up, you know, whatever text and illustrator create outlines from it and kind of pick apart those individual nodes on the letter form, you can see that, you know, there's a lot of really beautiful detail that goes into crafting these letter forms. There's some nice kind of mathematical, cool stuff to look at. The kind of contrast to PostScript and TrueType were also bitmap fonts, which are still around today, but you don't see them as much. So these are a few system fonts from the original Mac OS. And the tricky part about bitmaps is that each individual size has to be created by hand. So, you know, a given size is basically a certain arrangement of pixels. So consequently, you know, you wouldn't have every size from 0 to 100. There's typically a smaller subset. And if you ever played, you know, any number of video games, you see bitmap text all over the place. So this is kind of like Super Nintendo era stuff. But, you know, it looks pretty good. It's not, it doesn't have the same kind of smooth aesthetic that vector outlines do. And then OpenType was kind of the bringing together of TrueType and PostScript. Around 97, Microsoft and Adobe worked on this. And OpenType can house either PostScript or TrueType outlines. But the real value is that it brought along all of these typographic features that we're just starting to be able to leverage in our CSS. So the big one is like ligatures, for example. The FFL in Waffle is like a little bit wonky. If you were handwriting this in, you know, in calligraphy, you would probably have those letters kind of touching or interacting a little bit better. So in OpenType, you're able to automatically substitute in custom-designed glyphs. So in this case, you know, there's a specific glyph that is FFL as like one big shape. And whenever it sees that combination of letters, it just swaps it in and you have more typographic goodness. Zapfino is a great example of a lot of these features because it has like five different versions of this lowercase k. And as you're typing, it will dynamically substitute different alternates for those letter forms. So you can kind of see it in action here. And watch how, you know, as I continue to type, it does some pretty dramatic switches so that like FTH is, I believe, not necessarily a special glyph in this case, but some cool stuff. And then I mentioned numerals before. This also allows you to include tabular or lining numerals, which are kind of those cap height ones that you might be used to seeing. And also have old-style numerals, which you might want to use for, you know, something a little fancier. And you can kind of dynamically switch between the two. Again, like in CSS today, you can kind of call for these things, but it's not 100% supported across browsers. And speaking of, if you've had to implement any web fonts and care about cross-browser compatibility, you might have looked at something like this, which can be a little bit of a headache, but we will break it down for you. You can see this is calling actually like six different font files. Just, you know, you want to use your whatever typeface. And you have to call, like, six font files. It's kind of silly. But you have EOT, WAF, TTF, and SVG. And this is kind of the two-second breakdown for you. WAF is the future. TrueType is the past, but it still is well-supported, so you should still use it. SVG and EOT are kind of out the door for text. SVG originally was the only way you could load custom fonts on, like, iPhones, but this was, you know, iPhone 1 and 2 era. And that's no longer the case. And Embedded OpenType was kind of a failed attempt by Microsoft to make their own web font format. They even submitted it to the W3C, and it got rejected. And so that's still supported, but only in Internet Explorer. And these days, Internet Explorer supports WAF and TrueType, so those are kind of the way to go. Related, the joys of licensing. This is a conversation you should have with your clients sooner than later whenever possible. It's good to kind of understand how much your client is willing to spend on custom typography. And it's also important to kind of make the case that, you know, investing a little bit can go a long way as we've seen. So these are kind of the two major buckets that you typically see web fonts offered in. You have subscription services where you pay, you know, X dollars a month. It ends up costing 50 to 120 dollars a year, which for your average client is like a drop in the bucket. They often have monthly page view limits, meaning, you know, once you serve up a certain number of pages, they might cut you off or you have to upgrade your plan. But usually those start at like 250,000 page views and go up, so if you're working with a client that has more than those page views, they're probably expecting to pay for this anyway. The convenience and flexibility here is that rather than committing to, you know, one particular family or a couple styles, you have access to their full library of typefaces, which is often huge. So Typekit is probably the most common example of this. They have, you know, thousands of typefaces in their collection. And often the fonts are also hosted on their servers, which can be a good or a bad thing, depending on how much control you want. The pay-as-you-go option, by contrast, is typically purchased like per individual style or, you know, bundles for a given family. And you're basically buying a license for a certain number of page views. This usually starts, again, at 250,000 and goes up from there. They require you to usually put a tracking code on your site so they can keep track of those page views. But you can often host those fonts yourself. So this is a good option when you know exactly what you want. You're working with a client that has, you know, a particular brand style guide and you know that you can feel pretty safe, you know, just sticking to a smaller subset. And I don't want to spend a lot of time on this, but these are a few of the typefaces that I give my seal of approval to, I suppose. They're ones that I've worked with before, perform well. Some of the highlights, I guess you could say, but all of these services have such huge offerings that, you know, it's really worth exploring a little more. These can be a good starting point. So Typekit has some good ones. Heffler and Co., their cloud typography service, has some really high quality ones including Gotham, which you see all over the place. And even Google Fonts has some really reliable, solid options. I tend to lean towards some of these sans serifs a little bit more. The cool thing too is in the case of Source Sans Pro and Fira Sans, they've put the source code on GitHub. And everything that's on Google Fonts is published under the SIL Open Font License, which means you can freely manipulate them, redistribute them, et cetera. Include them in your software and all that stuff. So that Open Font License is also something that you can use yourself if you are ever in the position to publish your own typeface. It's a great way to get other people involved in your project. You can put it out there and let other people expand the family, add new weights, add support for other languages. It can be included in open source operating systems. It's a good tool to just educate students about type design, get some feedback, contribute to the growing body of font sources, 300,000 and counting. And so if you've ever tried to dig into Google Fonts, it can be a little bit tricky to find the good stuff. So recently, there's this project called 100daysoffonts.com. And every day, this guy put together a small kind of typographic little treatment that uses maybe two to four Google Fonts, and he tells you exactly what they are. And it's a good kind of showcase of the variety that is available on there totally for free. So I think this is a good place to go if you're looking for some inspiration. You know, maybe you see this and you're like, that tone is perfect for this project I'm working on. And they're pretty varied. They've done a nice job. And it's ongoing. I think they're only around day 30 or something out of 100. The League of Moveable Type is another cool crew that publish all of their fonts under the open font license as well. You've probably seen a lot of their work. A lot of these are also on Google Fonts, but they've basically, over the last couple years, they've put it together some really nice designs. And again, they're all available for free. So related to type and especially kind of in this web context are what I like to call the illities, which include legibility, readability, usability, and accessibility. And type is a critical part of all of these things. We'll go into kind of like a high-level overview, although each of these could easily be their own week-long seminar and you just skim the surface. But basically legibility is how easily you can actually discern letter forms. So the difference between Helvetica or a super ornate script face is going to create different legibility. So my favorite examples of intentional illegibility are these wonderful black metal logos. So if you know this band, no cheating, but can anybody tell me what this says? You want to venture a guess? Very good. Yeah, so if you spend a few minutes, you can kind of like pick this apart and figure out where everything is. Sometimes the letters are rotated, but these are like extreme cases of stylized illegibility. This one's a little bit easier. Any guesses? Borkenagar. So you can see the B-O-R. You can kind of see the K. And like once you see the word, you can sort of pick it apart. But this one's probably the easiest. Any thoughts? Dark Throne. So it's interesting how once you know what the word is, it sort of like emerges. And our very own Casey White from Chapter 3 put together one for the Chapter 3. You can expect to see these on our t-shirts next year at Drupalcon. But looking at more reasonable words, there's even a huge difference in legibility between this array that you see here. So if you were to ask me, I'd say those two are probably the most legible in this set. The left column is all sans serif. The right column is all serif. And particularly that bottom left sans serif has kind of these little curves at the bottom of the L's, which helps you to visually differentiate them from other letter forms that have straight strokes like that. And up at the top, you have Georgia. And it just has like a pretty large X-height, not very high contrast. The spacing is relatively even. So then what then is readability besides a cat-reading Tolstoy? This is how easily you can read a given piece of text. So this basically requires legibility and then builds up from it. It's like adding the maximum comfort, whereas you might be able to make out a word and it could be legible, but it won't be readable until you've kind of optimized a few parameters. So if you look at these two pieces of text, pretty clearly the bottom one is going to be easier to read on the top. The letting is really tight. The line length is really long. It's set smaller. And on the bottom, this is a biased example. But the other big factor is the literal contrast. I don't even know if you can read this. Can you even read this? So the key factors for readability are, again, things like text size, the letting and the line spacing, the line length, the contrast, the alignment, which is something we don't often think about, but we read left to right. So left aligned text with a ragged right edge is more comfortable for us to read than if you have right aligned text and your eye has to scan to kind of figure out where the beginning of the next line is. And a little bit separate from typography is the literal vocabulary or the syntax that you use can also impact readability. You can think of this as like the reading level of a given piece of text. And then this is maybe my favorite slide. Usability is basically how easy it is to use something. So this is, you know, everything around you in the physical space and on computers. And usability, again, is a topic for a whole other talk. So this is the high level. But, you know, microwaves, computers, cars, stereos, books, doors, watches, both dumb and smart watches. And this is one of my favorite examples. So here's a case where the usability of this kind of parking garage machine was improved by some of its users. Apparently, the original interface was confusing enough that somebody had to add all these little signs to kind of make clear what all of these things mean. I think there's a lot that we can learn from this. Accessibility, if you can't quite make it out, this is a person on the London Tube reading his smartphone with a magnifying glass, in addition to his pair of glasses that he's already wearing. And in the context of typography, I'm talking mostly about text contrast here, but the great Tim Berners-Lee inventor of the World Wide Web believed from the beginning that it's essential that the web is something that can be accessed by anybody regardless of disability. And again, text contrast is my primary concern here. So you can see that the text block on the right has a higher contrast than on the left. And there are standards for this. So at the bottom, webaim.org has a nice contrast checker. There are a million of these out there. And it's a good method. You should test what your background color is and your foreground color, and that will give you a ratio. And you want to target four and a half to one for small text, three to one for large text. There's also a stricter AAA rating that you can shoot for. But I think it's really important to remember that you can't control the viewing conditions of your end user, so you might set something that looks super beautiful. It's really subtle and elegant, and it looks great on your screen at your desk, indoors under controlled lighting. But what about somebody viewing that site on their phone in direct sunlight or somebody whose monitor is old and the brightness is all wonky? You have no control over those things. So keeping these ratios in mind is really valuable and important. And again, social inclusion. Good accessibility includes other things like making sure your pages can be easily read read by a screen reader, including alt text for your images, just being generally mindful of your page weight, so you're not demanding that somebody sucks down 30 megabytes of junk to load your homepage, that sort of thing. So for type on the web, I want to talk about just some minor trends. You might have noticed that there's kind of this trend of large, very generous body text for articles on sites like Medium or a list apart. And this is no coincidence. As we have kind of better tools to create custom typography, designers will be optimizing kind of content for readability. And so this speaks directly to it. Text size is not, again, the only factor. This was an article on Resident Advisor. And what I thought was interesting, once I went down to the comments section, there were two people that specifically called out the letting. This guy's like, yeah, you seriously need to increase the letting on the body copy. That shit hurts my eyes. Could you increase the, you know, the line height on the paragraphs? It's a bit hard to read. So these are instances where these users were consciously aware of these things, but more often it's a subconscious thing. You just kind of feel it, or it's like uncomfortable. You don't want to finish the article. And, you know, when it's done right, it can feel effortless. And that's what we want to target. So similar to the Tokyo examples that I showed you guys earlier, I thought it'd be kind of interesting to strip out all the text from a few websites and just see how those perform. Because text is really the core of how we communicate. There are lots of sites that are dedicated to visual or oral communication, but text is still at the core. So here's just a few fun ones. You know, the core structure is kind of there, but we are completely reliant on text. Here's our Drupalcon hashtag from a few days ago. So Twitter becomes just like totally useless, except for a couple photos of somebody's food. And even YouTube where you think, you know, the content is all video, you kind of need, you know, those titles and things. And then I want to kind of close with a side note how all of these issues are also very relevant to the world of gaming. And I see a lot of parallels between, you know, the higher quality typography on the web and higher quality typography in gaming. So I've been talking for an hour, so... Basically, higher resolution screens enable higher quality typography. Think about, you know, the jump from a pre-retina screen to your retina screen on your iPhone. Everything looks so much nicer. So over the years, you know, we have this general trend of an increase in resolution, like with computers or any other technology. And you can see that the full screen is basically the resolution that we're at now. So we're like magnitudes finer than we were decades ago. And 4K is kind of like the next evolution that's coming, who knows when. And that's 3840 by 2160, which is gonna be awesome when it happens. So if you think about, like, this is kind of what typography looked like in games, circa 96 bitmap text. It is legible, moderately readable, but, you know, you're not reading, like, books on there. And then here's an example from just last fall. This is Assassin's Creed Unity. We now have embedded fonts. They're being rendered, you know, smoothly. They're designed in a way that you can read them comfortably from your screen, even though they're relatively small by comparison. You know, you can see how huge that is, but you're probably playing it on, you know, like a 14-inch TV. Here we're on, you know, HDTVs sitting 10 feet away from your screen on the couch. This was another interesting one from a game called Bloodborne that came out a few months ago. And this is the loading screen. This text was, like, very readable, comfortable from your couch. But it's not all good. Here is Dragon Age Inquisition, and their loading screens have this all-capped text with a drop shadow against, like, a graphical background. And, you know, anybody could tell you that this is not comfortable to read. There's some missed opportunities here. And same thing elsewhere in the game. Sometimes the text is constrained to kind of these narrow boxes. The line length gets cramped. The thing to keep in mind is that, you know, these issues are pretty universal. They're not just on the web or just in print or just on our phones. And then finally, typography has gotten even better in kind of these immersive worlds. Grand Theft Auto 5 has a ton of examples of in-game signage that has been very carefully designed. All of these flyers and signs and, you know, fictional brands for things are pretty well-realized and look surprisingly good. There's even kind of a functional metro map and, like, this whole system diagrammed out in this virtual world. So what's important to remember is basically that type is all around you. And if you don't stop and look around once in a while, you could miss it. Thank you, guys. So all my slides are online here. tinyurl.com slash Drupalcon type. It's a fairly hefty, like, 38 megabyte PDF, but I didn't want to sacrifice image quality too much. But that has everything in here. Feel free to get at me on Twitter. I'm at GTVRHS. And I'll hang around if you have questions and stuff, but I think we're a little bit over, so... I'll just take questions one-on-one. And thank you all for coming. I really appreciate you guys choosing to come and learn about this. Hopefully you got something interesting out of it.