So, let me give you a few tips that are quite specific to the web in terms of typography. Of course, typography is a vast field and if you study graphic design, you spend many semesters studying the intricacies of type, and for a visual designer, that is obviously very important to have control over typography and create typographic hierarchy and be able to pair a typefaces et cetera. Since this is a UX class, this is not the focus but still here are a few thoughts that should help you with your projects. Size, that is a question that is often asked. Well, how big should type B on the screen? There are a few rules of thumbs. If you design your body text to be at least 16 pixels, you should be fine, especially on mobile devices. On a phone, I wouldn't make the type any bigger than 16 pixels. But also consider bigger screens at a desktop, you might go up to 20 or even 24 pixels. The bigger the screen, the further a user usually sits away from it. On a hand-held phone, you have it quite close to your face but if you have a giant desktop screen, you actually might lean back or sit an arm length away from it. So, making the text bigger is appropriate and you also have a lot more space. In general, don't be afraid to make some type really big. Here's a nice example from the design company IDEO and this is their homepage and look at how giant these three links are. It's quite jarring and beautiful and unexpected. There's three big links and if you go to their blog, you can see that the headline of the blog is also in relationship to the other elements even their logo or let's say the author's name, it's giant but it's really refreshing, right? In some sense, if you look at the trends of the web in recent years, I feel like a big type really has been a thing and I personally, like it quite a lot. Because you can create drama and you can make the typefaces really shine. You can see type gets bigger. Instead of seeing just texture and whole words, you actually see the designs of each letter and that is nice. Let's move on to line length and line height. There's a general rule and this pertains to traditional print typography two that for an ideal reading experience, there should be about 40-70 characters per line. So that rule has repercussions on how you design your column structure. If you're designing for the desktop, you'll have to have some max-width on your body text column. Otherwise, there will be too many characters per line. By the way, this rule is generally for body text so a caption or a small pull-quote might be longer or might be shorter than 40-70 characters. Then line height which is called leading also in traditional typography is generally more open for skin typography. So, there's more line-height than you would usually do in print design. A good starting point here is 1.5, so 150 percent of the typeface size to the leading size. So, in traditional typography, you would say 20 pixels over 30 pixels, that spacing between the line is 1.5 times. Here's a quick illustration of what actually happens when the line length is really small or really long. Here at 15 characters per line, you can't even get a complete thoughts per line. So, it gets really cumbersome to read that for longer texts. Then the opposite extreme, 120 characters per line on the bottom, here you have a really hard time and you get to the end of the line to find the next line on the left. So, in a way, you have to almost move your entire head to be able to read this text and it gets really cumbersome. In terms of line height, here is a comparison. On the left is something that you might set in a novel, on a magazine, or in a book. The general rule is about 120 percent of line spacing and on the right is 150 percent. So, it's a lot more open and it's actually a little easier to read if you look at it. Its area, its more inviting and part of it might also be again that space. I've set this in a previous video, space on the web is not expensive. You can scroll a webpage as long as you want so you might as well make the reading experience as pleasant as possible whereas with paper, and printed books, printed magazines, space is at a premium because someone has to pay for the paper. Here's another quick example from The Washington Post website. I checked here just to see what their settings were on the typography because it's a newspaper, there's a lot of leading going on, a lot of body text. So, in this example, the body text is 19 pixels and the line height is 33.4 pixels. If you calculate the ratio of text size to line height, you get to 175 percent, which is quite a lot. But if you notice, their line length is actually quite long too and another typographic rule you might have heard about is the longer the line length, the more leading you actually want to have or the more line height you want to have for your text. A quick word about justification. In general, justified text needs hyphenation to be turned on to look good. Since web browsers are not that good, it's not impossible but they're not that good at effective hyphenation, I would say as a general rule, don't justify text. In my personal opinion, justifying texts for print is questionable in the first place because you're putting a straight jacket on the text and you say, "Oh, it needs to be aligned on the left and the right." So, something has to give and it's hard to make an even texture because sometimes there are big holes between words because of the way certain words break. But on the web, it's even more problematic and if you really think about and look around, it's hardly ever done for good reasons. Here's a quick example of two pieces of justified text. On the left, hyphenation is turned off and on the right, there is hyphenation. On the left, you can see that the word spacing is quite uneven and it's just not a pleasant texture that is being created. So, just have your text left aligned and a rag on the right and you cannot go wrong with that. Then lastly, I want to talk a little bit about value contrast. What I mean by that is that as a default, one is tempted to use black text on a white background but that can actually look quite stark on screen and create eye fatigue. So, one little trick is to use an off-black for the black and an off-white for the white and here we go back to this IDEO page that I showed earlier to see what's happening here. If you notice that headline actually has a true black background. It's 100 percent black and that pops off the screen really beautifully and the letters inside are true whites, as white as it gets. That is nice but when you get to the reading experience on the bottom, you start reading the text, you ease in for a longer reading experience, you'll notice that it's not black and white, it's an off-white for the background like a really light gray and the type itself is a medium gray. I actually went ahead and looked at the values here and you'll see the RGB values on the top, if it was true white, it would be 255, 255, 255 so it's not. RGB(0,0,0) would be true black. You'll see it's quite far away from true black the color of the text. But one other thing you'll notice is that it's not actual neutral gray. If it was, these three colors would be the same. Just to illustrate this, I put a neutral gray of the same value next to it. If you look closely, the values that are used are a little bit towards the blue spectrum. That's another trick, I think. Instead of using a dark gray that is completely neutral, push it over to one color towards blue or purple and it just makes the color more alive. It just sparkles a little bit and you can see this I think suddenly here in the comparison, the neutral graze almost look a little bit dead or dull. So, again, you don't have to use the blackest black on the whitest white and if you use a gray, try pushing it over to one color just to see what happens and if it doesn't look just a little bit more interesting.
