1 00:00:00,450 --> 00:00:03,860 Now that we understand how to anchor our content with a text typeface, 2 00:00:03,860 --> 00:00:06,590 let's see how to go about choosing a display face for the web. 3 00:00:07,740 --> 00:00:10,470 As we saw earlier, display typefaces are meant for 4 00:00:10,470 --> 00:00:14,970 larger sizes like big headlines, site titles, or pool quotes. 5 00:00:14,970 --> 00:00:19,850 This allows for a bit more expressive and creative opportunity with letter forms. 6 00:00:19,850 --> 00:00:24,110 Nice intricacies like thing serifs will be lost a point sizes, but 7 00:00:24,110 --> 00:00:26,140 here they can shine. 8 00:00:26,140 --> 00:00:31,170 Big bold condensed text with narrow counters would close up at body sizes, but 9 00:00:31,170 --> 00:00:33,370 here you can soak them all in. 10 00:00:33,370 --> 00:00:37,640 A nice casual sign painter script would hardly be legible in paragraphs, but 11 00:00:37,640 --> 00:00:39,990 here it can flow beautifully as a heading. 12 00:00:41,190 --> 00:00:43,100 So how should we go about choosing one? 13 00:00:43,100 --> 00:00:46,410 First, make sure it's legible and readable. 14 00:00:46,410 --> 00:00:49,440 Just because the type is bigger doesn't mean that 15 00:00:49,440 --> 00:00:52,250 every character of a type face will be legible. 16 00:00:52,250 --> 00:00:55,920 If a person can't read a headline or a title then the message hasn't been 17 00:00:55,920 --> 00:00:58,620 enhanced by good typography, it's been lost by bad. 18 00:00:58,620 --> 00:01:03,260 Although there's much more room for expression with display type. 19 00:01:03,260 --> 00:01:06,870 Make sure you're choosing a well designed legible type face. 20 00:01:06,870 --> 00:01:10,410 Just because something looks cool in a specimen image doesn't mean it'll 21 00:01:10,410 --> 00:01:11,730 be usable. 22 00:01:11,730 --> 00:01:14,380 Make use of the test we talked about by blurring your eyes to 23 00:01:14,380 --> 00:01:18,550 see if the typeface has even overall color in all its characters. 24 00:01:18,550 --> 00:01:22,090 Most web font sites include a type tester with their type faces. 25 00:01:22,090 --> 00:01:25,560 Write out example headlines to make sure it's evenly spaced and 26 00:01:25,560 --> 00:01:27,760 see what sizes it works best at. 27 00:01:27,760 --> 00:01:31,310 Display type should have a tighter spacing than text typefaces. 28 00:01:32,760 --> 00:01:36,230 Other things that can help readability in display faces are short 29 00:01:36,230 --> 00:01:37,300 ascenders and descenders. 30 00:01:37,300 --> 00:01:39,180 In the setting of headlines, 31 00:01:39,180 --> 00:01:42,940 these features help reduce choppiness in the text. 32 00:01:42,940 --> 00:01:46,170 Again, one of the big questions will be to ask, 33 00:01:46,170 --> 00:01:49,190 does the mood of the typeface fit the content? 34 00:01:49,190 --> 00:01:54,430 For text faces we talked about channeling the mood with subtle nuances in typefaces. 35 00:01:54,430 --> 00:01:58,840 With display, we have a bit more room for expressiveness and mood. 36 00:01:58,840 --> 00:02:02,080 We can use the words we came up with through our content exercise in 37 00:02:02,080 --> 00:02:04,620 the previous video, and apply them to our search for 38 00:02:04,620 --> 00:02:07,720 a display face that fits the right vibe. 39 00:02:07,720 --> 00:02:11,510 If you're creating a site that's set around a certain time period in history, 40 00:02:11,510 --> 00:02:13,930 look for typefaces that are true to that period. 41 00:02:13,930 --> 00:02:16,590 That will take some research, but instead of choosing the mood we 42 00:02:16,590 --> 00:02:20,868 think the period should look like, we'll be truly conveying what it is like. 43 00:02:20,868 --> 00:02:22,860 Jessica Hische has some great thoughts on this, 44 00:02:22,860 --> 00:02:24,359 which are linked to in the teacher's notes. 45 00:02:25,630 --> 00:02:30,060 Next, we'll again want to think about who are our readers or users. 46 00:02:30,060 --> 00:02:33,320 If we're creating a site for people in a specific industry, for 47 00:02:33,320 --> 00:02:37,870 relevance, let's say web designers, then that effects how we choose a type face. 48 00:02:37,870 --> 00:02:42,620 Take for instance this example on how to play into the typographic styles people in 49 00:02:42,620 --> 00:02:44,350 the web design industry are accustomed to. 50 00:02:45,600 --> 00:02:50,440 Let's say we want to display snippets of example CSS in blog posts on the site. 51 00:02:50,440 --> 00:02:52,020 Code programs like TextWrangler or 52 00:02:52,020 --> 00:02:57,290 Sublime are used by web designers, and default to mono-spaced typefaces. 53 00:02:57,290 --> 00:02:58,780 These are fonts originally created for 54 00:02:58,780 --> 00:03:04,000 typewriters whose characters all occupy the same amount of horizontal space. 55 00:03:04,000 --> 00:03:07,262 They're great for code, but they wouldn't be a great choice for 56 00:03:07,262 --> 00:03:10,831 text faces [SOUND] due to the decreased legibility and long paragraphs. 57 00:03:10,831 --> 00:03:13,982 We can still play into this [SOUND] industry norm with our CSS 58 00:03:13,982 --> 00:03:15,022 snippets though. 59 00:03:15,022 --> 00:03:19,328 By utilizing a mono-space font, we can typographically make the snippet appear as 60 00:03:19,328 --> 00:03:21,990 it would in an actual code environment. 61 00:03:21,990 --> 00:03:26,080 Chris Coyier does an amazing job of this at http://www.csstricks.com. 62 00:03:26,080 --> 00:03:27,920 And even goes a step further with color. 63 00:03:29,420 --> 00:03:31,960 So take into account who are your readers, and 64 00:03:31,960 --> 00:03:34,240 what style of typefaces they might be accustomed to. 65 00:03:34,240 --> 00:03:37,810 I won't fully go into other priorities again, 66 00:03:37,810 --> 00:03:39,770 as they were covered in the previous video. 67 00:03:39,770 --> 00:03:44,050 But similarly to text typefaces, take into account the budget, and make sure 68 00:03:44,050 --> 00:03:49,050 the display face has everything you need in regards to weights, styles, or accents. 69 00:03:49,050 --> 00:03:51,500 Because display is used in less context. 70 00:03:51,500 --> 00:03:53,090 There's a bit more flexibility here, 71 00:03:53,090 --> 00:03:56,710 but you never want to set body text in all caps, you can actually 72 00:03:56,710 --> 00:04:01,330 utilize a display face to great effect that only has upper case characters. 73 00:04:01,330 --> 00:04:05,440 Also, it's possible to have a good typography with a single weighted font for 74 00:04:05,440 --> 00:04:06,010 your display face. 75 00:04:06,010 --> 00:04:09,840 These situations might not be ideal, but they can be worked with. 76 00:04:11,250 --> 00:04:14,060 Lastly, there might be a scenario where you land a client who 77 00:04:14,060 --> 00:04:16,440 already has a typeface for their brand. 78 00:04:16,440 --> 00:04:19,760 The process then is sometimes as simple as finding the web font 79 00:04:19,760 --> 00:04:21,900 version of that typeface. 80 00:04:21,900 --> 00:04:26,410 But other times there might not be web font licenses available for it yet. 81 00:04:26,410 --> 00:04:30,180 In that case you want to find a typeface that channels a similar mood and 82 00:04:30,180 --> 00:04:34,170 style to the print version as you translate their brand to the web. 83 00:04:34,170 --> 00:04:38,380 You could Google alternative to insert typeface name here. 84 00:04:38,380 --> 00:04:40,010 But what's the fun in that? 85 00:04:40,010 --> 00:04:43,610 Utilize all the knowledge you take in here to make a well informed decision for 86 00:04:43,610 --> 00:04:47,010 what alternative fits best your client's needs. 87 00:04:47,010 --> 00:04:50,500 You might just arrive at a different conclusion than those online forums. 88 00:04:51,620 --> 00:04:55,700 Later on in the course, we'll get into more details on how to pair typefaces. 89 00:04:55,700 --> 00:04:59,110 But I hope this has helped to still some of the ambiguity around choosing 90 00:04:59,110 --> 00:05:00,720 a typeface for the Web. 91 00:05:00,720 --> 00:05:02,680 Think about where it's going to live, 92 00:05:02,680 --> 00:05:06,950 what makes it legible, if its mood matches the content and audience. 93 00:05:06,950 --> 00:05:08,540 Does it have everything you need? 94 00:05:08,540 --> 00:05:10,580 And what factor will cost play? 95 00:05:10,580 --> 00:05:14,790 This is by no means an exact science, so please have some fun along the way. 96 00:05:14,790 --> 00:05:17,780 The answer to these questions should help guide you in a good direction. 97 00:05:17,780 --> 00:05:21,460 And leave room for your own personal taste and design choices. 98 00:05:21,460 --> 00:05:24,590 Next, we'll look at the different ways to implement web fonts on a site.