Choosing a Text Typeface for the Web

[MUSIC] 0:00 Good typography starts with choosing a good typeface. 0:04 No matter how nice graphical elements look on a page, 0:07 a choice of a bad typeface can quickly ruin it. 0:10 When entering into the process of choosing a typeface, first ask yourself, 0:13 where will it appear. 0:17 Well on the web duh, but where on the web? 0:19 What's the context? 0:21 Will it be in a navigation or in paragraphs or 0:23 in headings or in all of these? 0:25 Answers to these questions will be determined if you're looking for 0:28 a text typeface which is engineered for small sizes to a variety of settings, or 0:31 display typeface which tends to be more flashy and works well at large sizes. 0:36 These two descriptors deal with the size and function for 0:41 which a typeface is intended. 0:44 In this video we'll look at how to choose a text typeface for the web. 0:46 And in the next, we'll look at how to choose a display face. 0:50 It's often smart to choose a text typeface before a display, 0:53 because much of the copy on a site will be set in this choice. 0:57 In his pocket guide on combining typefaces, 1:00 Tim Brown calls this your Anchor Typeface, because it acts as a reference point for 1:03 every element in your composition. 1:07 He encourages you to make your body text the anchor if possible. 1:08 So when chosing a text typeface on the web, your first priority is legibility. 1:13 If a site's body copy is hard to read, then visitors won't stick around for long. 1:17 Let's look at a few things to consider in determining if a typeface has 1:22 good legibility and readability. 1:25 First, does the typeface have good x-height? 1:28 An x-height that's too low will make the lower case letters hard to read and 1:31 tell apart at smaller sizes. 1:35 An x height can also be too high if it's nearing the cap height, 1:37 making it hard to discern what's uppercase and what's lowercase. 1:41 A general measurement to go by is if the x height is around 60-75% of the cap height. 1:44 Then you've got yourself a good candidate for a tech space. 1:50 Next, let's consider the white space around the letter forms and 1:53 its impact on legibility. 1:57 If the space between letters, also known as letter spacing, is too narrow or 1:59 tight, then at smaller sizes the letters can get muddled together which 2:03 can hurt legibility. 2:06 Looser letter spacing allow the letter forms to still breath at smaller sizes. 2:08 We do have some control over letter spacing in CSS, 2:12 but in a later video, we'll talk about why it's not always a great idea to 2:15 manually letter space text copy. 2:19 Find a typeface that already has proper, looser letter spacing for text. 2:21 Next, you'll want to make sure the typeface has overall even color, as it 2:26 balances the positive space of characters and the negative space of white space. 2:30 You wouldn't want for the text to feel too dense in certain areas or 2:35 characters which can break your reading flow. 2:38 A trick you can employ is to blur your eyes as you look at the typeface. 2:41 We'll manually mimic that here. 2:45 Do you see any dark splotches or uneven patches of color showing up? 2:47 If so, then you probably want to mark that one off the list. 2:52 Avenir Next looks nice and even now. 2:55 Other areas that deal with white space are Counters. 2:58 Counter is the fully or 3:01 partially closed white space inside letter forms like O, B, or E. 3:03 Large or open counters can also aid legibility because they are less prone to 3:08 close up at smaller sizes. 3:12 Let's look at Neutraface 2 by House Industries as an example on 3:14 x height and whitespace. 3:18 This family comes with a text and display version. 3:19 Both of them here are set at the same point size, but 3:22 we can immediately notice some differences. 3:25 Though the cap heights are similar, the text version has a higher x height, 3:28 which helps retain legibility at smaller sizes. 3:32 The letter spacing is looser in the text version than in the display version, 3:35 giving the characters encounters more room to breath. 3:38 Although the display face wouldn't work well at small sizes, its lower XI and 3:42 tighter letter spacing helps greater amounts of text fit into tighter spaces. 3:46 A trait that's beneficial for headlines. 3:51 At the time of this recording, House is currently working on translating this 3:54 family into web fonts for public release. 3:57 Next, you want to think about the mood of the typeface matching the content at hand. 4:00 Familiarize yourself with the content by taking time to read it thoroughly, and 4:05 write down some ways to describe it in your own words. 4:09 Is it serious? 4:12 Is it lighthearted, witty, pointed, classy, no nonsensical, the list goes on. 4:13 As you peruse type phases, have these words in the back of your mind and 4:19 see if a type phase speaks in that certain mood. 4:22 Consider who your audience is and 4:26 what kind of style of type phases they might be accustomed to. 4:27 Are they doctors, lawyers or kids? 4:30 Are there certain genres that the target industry is known for? 4:32 You might not want to choose something that's been over used, but 4:36 you can still plan these norms and create familiarity, or 4:39 earn trust in choosing a proper type phase that speaks in the right mood. 4:41 With text faces, it should be noted that mood can be conveyed with 4:46 the slightest subtleties in the letterforms. 4:49 A simple change in the way a serif is handled can mean the world of 4:51 a difference in text. 4:55 Because there's a lot of it on the page. 4:56 Don't go for something that's overly ornate or has a lot of character. 4:58 As it'll have too much going on for body copy. 5:02 In any case the mood of the typeface should fit the content at hand. 5:04 But don't sacrifice legibility just because you 5:08 like the mood of another type face better. 5:10 Don't forget to make sure the type face has everything you need. 5:14 You would hate to get half way through building a site and 5:16 realize the web fonts don't contain a certain character or symbol that's needed. 5:19 Things to consider are, does the web font have a range of weights? 5:23 Does the typeface have italic styles? 5:27 Will we need different widths for versatility? 5:29 Are small caps necessary? 5:32 What accented characters are included for 5:34 language support, and what kind of numerical figures are needed? 5:36 To clarify that last note, there are a few different styles of numerical figures. 5:40 We'll look at old style and lining figures. 5:43 Old style figures vary in height and descend below the baseline at times. 5:46 These are nice for text and 5:50 body copy, as they flow well with the rhythm set by the text. 5:51 And they're necessary when using small caps. 5:55 Lining figures all have the same height and baseline, and 5:57 are generally good for display, headlines, or setting with upper case only. 6:00 Lastly, cost can also be a big factor when choosing a typeface for the web. 6:05 Sometimes you'll have a larger budget for 6:10 webfonts, which provides you with more flexibility and options to choose from. 6:12 Other times, there might not be room in the budget for 6:16 webfont licensing, or even subscription models. 6:19 If that's the case, try to help the client understand the benefits of 6:22 good typography, and why there's a cost associated to webfonts. 6:26 For example, I might tell a client free typefaces are fine to use and 6:30 I will happily go down that route if needed. 6:34 But be aware that currently there's only a small number of 6:37 really good versatile free web fonts. 6:39 This drastically limits our options. 6:43 Because of that, the good ones are often used on many sites which won't do 6:45 us any favors in distinguishing your site, to set your site and 6:49 brand apart, I would recommend going with the subscription web font model which can 6:52 run between 25 to $100 a year. 6:56 Although there's some cost, I think your brand and users will be 6:58 much more mileage out of paid web fonts than if we went with free fonts. 7:02 After that, sometimes a client makes room in the budget, and sometimes they don't. 7:08 In the latter case, we want to have all these principles we discussed in 7:11 the back of our mind, as we browse free web font sites like Google Fonts and 7:15 Font Squirrel to find good ones. 7:19 That concludes how to choose a text typeface. 7:21 Sometimes designers utilize a versatile text family for 7:23 small and large sizes on a site. 7:26 But other times weird intricacies with the letter forms can show up 7:29 because the fonts are engineered for smaller not larger sizes. 7:32 Also, you might just wanna have some variety with your type. 7:36 So, in the next video, we'll get how to choose a display typeface. 7:39 For further study on choosing a typeface, there's some great articles and 7:43 resources in the teacher's note section that influence what we discussed here. 7:46 And I highly recommend checking those out if you have time. 7:50