1 00:00:01,480 --> 00:00:05,780 Now that we understand how to anchor our content with text typeface, 2 00:00:05,780 --> 00:00:08,700 let's see how to go about choosing a display face for the web. 3 00:00:10,130 --> 00:00:12,930 As we saw earlier, display typefaces are meant for 4 00:00:12,930 --> 00:00:17,860 larger sizes like big headlines, site titles, or pull quotes. 5 00:00:17,860 --> 00:00:22,090 This allows for a bit more expressive and creative opportunities with letter forms. 6 00:00:23,490 --> 00:00:28,670 Nice intricacies like thin serapis would be lost at small point sizes, but 7 00:00:28,670 --> 00:00:30,880 here, they can shine. 8 00:00:30,880 --> 00:00:31,760 Big, bold, 9 00:00:31,760 --> 00:00:36,710 condensed text with narrow counters would close up at body text sizes. 10 00:00:36,710 --> 00:00:39,515 But here, you can soak them all in. 11 00:00:39,515 --> 00:00:45,420 A nice casual sign painters script would hardly be legible and paragraphs. 12 00:00:45,420 --> 00:00:48,267 But here, it can be flow beautifully as a heading. 13 00:00:49,660 --> 00:00:52,315 So how should we go about choosing one? 14 00:00:52,315 --> 00:00:56,490 First, make sure it's legible and readable. 15 00:00:56,490 --> 00:00:58,370 Just because the type is bigger, 16 00:00:58,370 --> 00:01:02,770 doesn't mean that every character of a typeface will be legible. 17 00:01:02,770 --> 00:01:05,000 If a person can't read a headline or 18 00:01:05,000 --> 00:01:09,200 a title, then the message hasn't been enhanced by good typography. 19 00:01:09,200 --> 00:01:11,405 It's been lost by bad typography. 20 00:01:12,622 --> 00:01:16,420 Although there's much more room for expression with display type, 21 00:01:16,420 --> 00:01:20,520 make sure you're choosing a well designed legible typeface. 22 00:01:20,520 --> 00:01:23,560 Just because something looks cool in a specimen image, 23 00:01:23,560 --> 00:01:25,940 doesn't mean it'll be usable. 24 00:01:25,940 --> 00:01:28,730 Make use of the tests we talked about by blurring your 25 00:01:28,730 --> 00:01:33,290 eyes to see if a typeface has an even overall color and all of its characters. 26 00:01:34,350 --> 00:01:38,555 Most fonts sites include a type tester with their typefaces. 27 00:01:38,555 --> 00:01:42,740 Write out example headlines to make sure it's evenly spaced and 28 00:01:42,740 --> 00:01:44,640 see what sizes it works best at. 29 00:01:45,640 --> 00:01:50,710 Display types should have a bit tighter spacing the text typefaces. 30 00:01:50,710 --> 00:01:52,760 Other things that can help readability and 31 00:01:52,760 --> 00:01:57,170 display faces are short ascenders and descenders. 32 00:01:57,170 --> 00:01:58,880 In the setting of headlines, 33 00:01:58,880 --> 00:02:01,630 these features help reduce choppiness in the text. 34 00:02:02,890 --> 00:02:06,360 Again, one of the big questions we'll want to ask is, 35 00:02:06,360 --> 00:02:09,248 does the mood of the typeface fit the content? 36 00:02:09,248 --> 00:02:14,690 For text faces, we talked about channeling the mood with subtle nuances in typefaces. 37 00:02:14,690 --> 00:02:19,360 With display, we have a bit more room for expressiveness in the mood. 38 00:02:19,360 --> 00:02:22,200 We can use the words we came up with throughout our content 39 00:02:22,200 --> 00:02:26,530 exercise in the previous video and apply them to our search for 40 00:02:26,530 --> 00:02:28,430 a display face that fits the right mood. 41 00:02:29,690 --> 00:02:32,878 If you're creating a site that set around a certain time period, 42 00:02:32,878 --> 00:02:36,970 look for typefaces that are true to that period. 43 00:02:36,970 --> 00:02:41,000 That will take some research but instead of choosing the mood we think 44 00:02:41,000 --> 00:02:45,030 the period should look like, we'll be truly conveying what it was like. 45 00:02:46,370 --> 00:02:48,950 Jessica Hitch has some great thoughts on this, 46 00:02:48,950 --> 00:02:50,760 which are linked to in the teacher's notes. 47 00:02:51,950 --> 00:02:56,920 Next, we'll again want to think about who are readers or users. 48 00:02:56,920 --> 00:03:00,510 If we're creating a site for people in a specific industry, 49 00:03:00,510 --> 00:03:05,295 let's say a web developer, then that affects how we use a typeface. 50 00:03:06,320 --> 00:03:11,110 Take for instance this example of how to play into the typographic styles, 51 00:03:11,110 --> 00:03:13,461 people in the web design industry are accustomed to. 52 00:03:14,540 --> 00:03:19,380 Let's say we want to display snippets of example code in a blog post. 53 00:03:19,380 --> 00:03:22,700 Coding programs like Adam or sublime text, 54 00:03:22,700 --> 00:03:27,870 are used by web developers and default to monospace typefaces. 55 00:03:27,870 --> 00:03:29,730 These are fonts originally created for 56 00:03:29,730 --> 00:03:34,480 typewriters, whose characters all occupy the same amount of horizontal space. 57 00:03:35,550 --> 00:03:39,470 They're great for code since it's easier to distinguish symbols and 58 00:03:39,470 --> 00:03:41,860 layout tabular data and plain text. 59 00:03:42,900 --> 00:03:47,858 But they wouldn't be a great choice for body text due to decrease legibility and 60 00:03:47,858 --> 00:03:49,043 long paragraphs. 61 00:03:49,043 --> 00:03:53,769 We can still play into that industry norm with our code snippets though, 62 00:03:53,769 --> 00:03:58,032 by utilizing a monospace font, we can topographically make this 63 00:03:58,032 --> 00:04:01,840 snippet appear as it would in an actual code environment. 64 00:04:03,590 --> 00:04:06,620 So take into account who your readers are, and 65 00:04:06,620 --> 00:04:11,590 what styles of typefaces might be the right fit for their industry. 66 00:04:11,590 --> 00:04:14,480 I won't fully go into the other parties again, 67 00:04:14,480 --> 00:04:17,230 as they were covered in the previous video. 68 00:04:17,230 --> 00:04:22,630 But similarly to text typefaces, take into account the budget and make sure 69 00:04:22,630 --> 00:04:29,428 a display face has everything you need in regards to weight, styles, or accents. 70 00:04:29,428 --> 00:04:33,930 Because display typefaces are used in fewer contexts, there's a bit more 71 00:04:33,930 --> 00:04:39,640 flexibility here that you'd never want to set body text and all caps. 72 00:04:39,640 --> 00:04:43,230 You can actually utilize the display face to great effect 73 00:04:43,230 --> 00:04:45,350 that only has uppercase characters. 74 00:04:46,570 --> 00:04:50,828 Also it's possible to have good typographic with a single weighted 75 00:04:50,828 --> 00:04:52,626 font for your display face. 76 00:04:52,626 --> 00:04:57,060 These situations might not be ideal, but they can be worked through. 77 00:04:58,130 --> 00:05:02,070 Lastly, there might be a scenario where you land a client who 78 00:05:02,070 --> 00:05:04,149 already has a typeface for their brands. 79 00:05:05,720 --> 00:05:09,870 This process then is sometimes as simple as finding the web font version of that 80 00:05:09,870 --> 00:05:11,130 typeface. 81 00:05:11,130 --> 00:05:15,650 But other times, there might not be web font licenses available for it yet. 82 00:05:16,710 --> 00:05:21,090 In that case, you want to find a typeface that channels a similar mood and 83 00:05:21,090 --> 00:05:24,830 style to the print version as you translate their brand for the web. 84 00:05:26,080 --> 00:05:31,020 You could Google alternative to insert typeface here. 85 00:05:31,020 --> 00:05:32,580 But what's the fun in that? 86 00:05:33,750 --> 00:05:38,270 Utilize all the knowledge you've taken here to make a well informed decision for 87 00:05:38,270 --> 00:05:41,220 an alternative that best fits the client. 88 00:05:41,220 --> 00:05:44,730 You might arrive at a different conclusion than those online forums. 89 00:05:46,120 --> 00:05:51,560 Later on in the course, we'll get into more details on how to pair typefaces. 90 00:05:51,560 --> 00:05:55,830 But I hope this has helped distill some of the ambiguity around choosing 91 00:05:55,830 --> 00:05:56,780 a typeface for the web. 92 00:05:58,110 --> 00:06:00,220 Think about where it's gonna live. 93 00:06:00,220 --> 00:06:01,870 What makes it legible? 94 00:06:01,870 --> 00:06:05,270 If its mood matches the content and audience. 95 00:06:05,270 --> 00:06:06,721 Does it have everything you need? 96 00:06:06,721 --> 00:06:09,240 And what factor will cosplay? 97 00:06:10,550 --> 00:06:15,530 This is by no means an exact science so have some fun along the way. 98 00:06:16,670 --> 00:06:22,120 The answers to these questions should help guide you in a good direction and 99 00:06:22,120 --> 00:06:26,463 leave room for your own personal taste and design choices. 100 00:06:26,463 --> 00:06:30,100 Next, we'll take a look at weights, styles, and sizes.