Choosing a Display Typeface for the Web

Now that we understand how to anchor our content with a text typeface, 0:00 let's see how to go about choosing a display face for the web. 0:03 As we saw earlier, display typefaces are meant for 0:07 larger sizes like big headlines, site titles, or pool quotes. 0:10 This allows for a bit more expressive and creative opportunity with letter forms. 0:14 Nice intricacies like thing serifs will be lost a point sizes, but 0:19 here they can shine. 0:24 Big bold condensed text with narrow counters would close up at body sizes, but 0:26 here you can soak them all in. 0:31 A nice casual sign painter script would hardly be legible in paragraphs, but 0:33 here it can flow beautifully as a heading. 0:37 So how should we go about choosing one? 0:41 First, make sure it's legible and readable. 0:43 Just because the type is bigger doesn't mean that 0:46 every character of a type face will be legible. 0:49 If a person can't read a headline or a title then the message hasn't been 0:52 enhanced by good typography, it's been lost by bad. 0:55 Although there's much more room for expression with display type. 0:58 Make sure you're choosing a well designed legible type face. 1:03 Just because something looks cool in a specimen image doesn't mean it'll 1:06 be usable. 1:10 Make use of the test we talked about by blurring your eyes to 1:11 see if the typeface has even overall color in all its characters. 1:14 Most web font sites include a type tester with their type faces. 1:18 Write out example headlines to make sure it's evenly spaced and 1:22 see what sizes it works best at. 1:25 Display type should have a tighter spacing than text typefaces. 1:27 Other things that can help readability in display faces are short 1:32 ascenders and descenders. 1:36 In the setting of headlines, 1:37 these features help reduce choppiness in the text. 1:39 Again, one of the big questions will be to ask, 1:42 does the mood of the typeface fit the content? 1:46 For text faces we talked about channeling the mood with subtle nuances in typefaces. 1:49 With display, we have a bit more room for expressiveness and mood. 1:54 We can use the words we came up with through our content exercise in 1:58 the previous video, and apply them to our search for 2:02 a display face that fits the right vibe. 2:04 If you're creating a site that's set around a certain time period in history, 2:07 look for typefaces that are true to that period. 2:11 That will take some research, but instead of choosing the mood we 2:13 think the period should look like, we'll be truly conveying what it is like. 2:16 Jessica Hische has some great thoughts on this, 2:20 which are linked to in the teacher's notes. 2:22 Next, we'll again want to think about who are our readers or users. 2:25 If we're creating a site for people in a specific industry, for 2:30 relevance, let's say web designers, then that effects how we choose a type face. 2:33 Take for instance this example on how to play into the typographic styles people in 2:37 the web design industry are accustomed to. 2:42 Let's say we want to display snippets of example CSS in blog posts on the site. 2:45 Code programs like TextWrangler or 2:50 Sublime are used by web designers, and default to mono-spaced typefaces. 2:52 These are fonts originally created for 2:57 typewriters whose characters all occupy the same amount of horizontal space. 2:58 They're great for code, but they wouldn't be a great choice for 3:04 text faces [SOUND] due to the decreased legibility and long paragraphs. 3:07 We can still play into this [SOUND] industry norm with our CSS 3:10 snippets though. 3:13 By utilizing a mono-space font, we can typographically make the snippet appear as 3:15 it would in an actual code environment. 3:19 Chris Coyier does an amazing job of this at http://www.csstricks.com. 3:21 And even goes a step further with color. 3:26 So take into account who are your readers, and 3:29 what style of typefaces they might be accustomed to. 3:31 I won't fully go into other priorities again, 3:34 as they were covered in the previous video. 3:37 But similarly to text typefaces, take into account the budget, and make sure 3:39 the display face has everything you need in regards to weights, styles, or accents. 3:44 Because display is used in less context. 3:49 There's a bit more flexibility here, 3:51 but you never want to set body text in all caps, you can actually 3:53 utilize a display face to great effect that only has upper case characters. 3:56 Also, it's possible to have a good typography with a single weighted font for 4:01 your display face. 4:05 These situations might not be ideal, but they can be worked with. 4:06 Lastly, there might be a scenario where you land a client who 4:11 already has a typeface for their brand. 4:14 The process then is sometimes as simple as finding the web font 4:16 version of that typeface. 4:19 But other times there might not be web font licenses available for it yet. 4:21 In that case you want to find a typeface that channels a similar mood and 4:26 style to the print version as you translate their brand to the web. 4:30 You could Google alternative to insert typeface name here. 4:34 But what's the fun in that? 4:38 Utilize all the knowledge you take in here to make a well informed decision for 4:40 what alternative fits best your client's needs. 4:43 You might just arrive at a different conclusion than those online forums. 4:47 Later on in the course, we'll get into more details on how to pair typefaces. 4:51 But I hope this has helped to still some of the ambiguity around choosing 4:55 a typeface for the Web. 4:59 Think about where it's going to live, 5:00 what makes it legible, if its mood matches the content and audience. 5:02 Does it have everything you need? 5:06 And what factor will cost play? 5:08 This is by no means an exact science, so please have some fun along the way. 5:10 The answer to these questions should help guide you in a good direction. 5:14 And leave room for your own personal taste and design choices. 5:17 Next, we'll look at the different ways to implement web fonts on a site. 5:21