How to Choose a Text Typeface for the Web

It's often smart to choose a text typeface before display. 0:01 Because much of the copy on a site will be set in this choice. 0:05 In his pocket guide on combining typefaces, 0:09 Tim Brown calls on your anchor typeface because it acts as a reference point for 0:11 every element in your composition. 0:16 He encourages you to make your body text the anchor, if possible. 0:18 So when choosing a text typeface on the web, your first priority is legibility. 0:23 If a site's body copy is hard to read, then visitors won't stick around for long. 0:29 Let's look at a few things to consider in determining if a typeface has good 0:35 legibility and readability. 0:39 First, does the typeface have a good x-height? 0:42 An x-height that's too low will make the lowercase letters hard to read and 0:45 tell apart at small sizes. 0:49 An x-height can also be too high if it's nearing the cap height, 0:51 making it hard to discern what's uppercase and what's lowercase. 0:55 A general measurement to go by is if the x-height is around 60 to 75% of the cap 1:00 height, then you've got yourself a good candidate for a text face. 1:04 Next, let's consider the white space around the letter forms and 1:11 its impact on legibility. 1:15 If the space between letters, also known as letter-spacing, 1:17 is too narrow or too tight, then at smaller sizes, 1:21 the letters can get muddled together, which hurts legibility. 1:25 Looser letter-spacing also allows the letter forms to still breathe at small 1:30 sizes. 1:35 While we do have some control over letter spacing with code, 1:36 it's not advisable to manually letter space body text. 1:40 Find a typeface that already has proper looser letter spacing for text. 1:44 Next, you will want to make sure the typeface as overall even color, as it 1:50 balances the positive space of characters and the negative space of white space. 1:55 You wouldn't want your text to feel too dense in certain areas or 2:00 characters, which can break the reading flow. 2:04 A trick you can employ is to blur your eyes as you're looking at the typeface. 2:07 We'll manually mimic that here. 2:12 Do any dark splotches or uneven places of color show up? 2:14 If so, you probably want to mark that one off the list. 2:19 Avenir Next looks quite even though. 2:22 Other areas that deal with white space are counters. 2:26 A counter is the fully or partially closed white space inside letterforms like o, 2:29 b or e. 2:34 Larger open counters can also aid legibility 2:36 because they are less prone to close up at smaller sizes. 2:40 Let's look at Neutraface 2 by House Industries as an example on x-height and 2:44 white space. 2:49 This family comes with a text and a display version. 2:51 Both of them here are set at the same point size, but 2:56 we can immediately notice some differences. 2:59 Though the cap heights are similar, the text version has a higher x-height, 3:03 which helps retain legibility at smaller sizes. 3:08 The letter spacing is looser in the text version than in the display version, 3:11 giving the characters and counters more room to breath. 3:16 Although the display face wouldn't work well at small sizes, its lower x-height 3:20 and tighter letter spacing helps greater amount of text fit into tighter spaces. 3:25 A trait that's beneficial for headlines. 3:31 Next, you wanna think about the mood of the typeface matching the content at hand. 3:35 Familiarize yourself with the content by taking the time to read it thoroughly. 3:40 Then write down some ways to describe it in your own words. 3:45 Is it serious, lighthearted, witty, pointed, classy? 3:49 As you peruse typefaces, have these words in a back of your mind and 3:55 see if a typeface speaks in that certain mood. 3:59 Consider who your audience is and 4:03 what kinds of styles of typefaces they might be accustomed to. 4:05 Are they doctors, lawyers, kids? 4:09 Are there certain genres that a target industry is known for? 4:12 You might not want to choose something that's been overused. 4:16 But you can still play into these norms and create familiarity or 4:19 interest by choosing a proper typeface that speaks in the right mood. 4:23 With text faces, it should be noted that mood can be 4:28 conveyed with the slightest subtleties in the letterforms. 4:31 A simple change in the way a serif is handled can 4:35 be in the world of a difference in text because there's a lot of it on the page. 4:38 Don't go for something that's overly ornate or 4:43 has a lot of character, as it will have too much going on for body copy. 4:46 In any case, the mood of the typeface should fit the content at hand, but don't 4:52 sacrifice legibility just because you like the mood of another typeface better. 4:56 Don't forget to make sure the typeface has everything you need. 5:02 You would hate to get halfway through designing a layout and 5:06 realize the font doesn't contain a certain character or symbol that's needed. 5:09 Things to consider are, does the typeface have a range of weights? 5:15 Does the typeface have italic styles? 5:20 Will we need different widths for versatility? 5:23 Are small caps necessary? 5:26 What accented characters are included for language support? 5:29 And what kinds of numerical figures are needed? 5:33 To clarify that last note, there are a few different styles of numerical figures. 5:37 We'll look at old style and lining figures. 5:41 Old style figures vary in height and descend below the baseline at times. 5:46 These are nice for text and body copy, 5:51 as they flow well with the rhythm set by the text. 5:53 And they're necessary when using small caps. 5:57 Lining figures all have the same height and baseline and are generally good for 6:00 display, headlines or a setting with uppercase only. 6:06 That concludes how to choose a text typeface. 6:11 Sometimes designers utilize a versatile text family that works for 6:14 both small and large text sizes. 6:18 Other times, a single typeface won't work for all text sizes because weird 6:21 intricacies can appear in the letter forms at different sizes. 6:26 Also, you might just want to have some variety with your type. 6:30 So in the next video, we will look at how to choose a display typeface. 6:34 For further study on choosing a typeface, there's some great articles and 6:39 resources in the teachers notes that influenced what we discussed here. 6:44 And I highly recommend taking some time to read them. 6:48