How to Choose a Display Typeface6:31 with Hope Armstrong
Display typefaces are meant for larger sizes which can allow for more expression in their style and letterforms. We’ll look at how to choose one that not only fits the right vibe but gets the job done well.
Now that we understand how to anchor our content with text typeface, 0:01 let's see how to go about choosing a display face for the web. 0:05 As we saw earlier, display typefaces are meant for 0:10 larger sizes like big headlines, site titles, or pull quotes. 0:12 This allows for a bit more expressive and creative opportunities with letter forms. 0:17 Nice intricacies like thin serapis would be lost at small point sizes, but 0:23 here, they can shine. 0:28 Big, bold, 0:30 condensed text with narrow counters would close up at body text sizes. 0:31 But here, you can soak them all in. 0:36 A nice casual sign painters script would hardly be legible and paragraphs. 0:39 But here, it can be flow beautifully as a heading. 0:45 So how should we go about choosing one? 0:49 First, make sure it's legible and readable. 0:52 Just because the type is bigger, 0:56 doesn't mean that every character of a typeface will be legible. 0:58 If a person can't read a headline or 1:02 a title, then the message hasn't been enhanced by good typography. 1:05 It's been lost by bad typography. 1:09 Although there's much more room for expression with display type, 1:12 make sure you're choosing a well designed legible typeface. 1:16 Just because something looks cool in a specimen image, 1:20 doesn't mean it'll be usable. 1:23 Make use of the tests we talked about by blurring your 1:25 eyes to see if a typeface has an even overall color and all of its characters. 1:28 Most fonts sites include a type tester with their typefaces. 1:34 Write out example headlines to make sure it's evenly spaced and 1:38 see what sizes it works best at. 1:42 Display types should have a bit tighter spacing the text typefaces. 1:45 Other things that can help readability and 1:50 display faces are short ascenders and descenders. 1:52 In the setting of headlines, 1:57 these features help reduce choppiness in the text. 1:58 Again, one of the big questions we'll want to ask is, 2:02 does the mood of the typeface fit the content? 2:06 For text faces, we talked about channeling the mood with subtle nuances in typefaces. 2:09 With display, we have a bit more room for expressiveness in the mood. 2:14 We can use the words we came up with throughout our content 2:19 exercise in the previous video and apply them to our search for 2:22 a display face that fits the right mood. 2:26 If you're creating a site that set around a certain time period, 2:29 look for typefaces that are true to that period. 2:32 That will take some research but instead of choosing the mood we think 2:36 the period should look like, we'll be truly conveying what it was like. 2:41 Jessica Hitch has some great thoughts on this, 2:46 which are linked to in the teacher's notes. 2:48 Next, we'll again want to think about who are readers or users. 2:51 If we're creating a site for people in a specific industry, 2:56 let's say a web developer, then that affects how we use a typeface. 3:00 Take for instance this example of how to play into the typographic styles, 3:06 people in the web design industry are accustomed to. 3:11 Let's say we want to display snippets of example code in a blog post. 3:14 Coding programs like Adam or sublime text, 3:19 are used by web developers and default to monospace typefaces. 3:22 These are fonts originally created for 3:27 typewriters, whose characters all occupy the same amount of horizontal space. 3:29 They're great for code since it's easier to distinguish symbols and 3:35 layout tabular data and plain text. 3:39 But they wouldn't be a great choice for body text due to decrease legibility and 3:42 long paragraphs. 3:47 We can still play into that industry norm with our code snippets though, 3:49 by utilizing a monospace font, we can topographically make this 3:53 snippet appear as it would in an actual code environment. 3:58 So take into account who your readers are, and 4:03 what styles of typefaces might be the right fit for their industry. 4:06 I won't fully go into the other parties again, 4:11 as they were covered in the previous video. 4:14 But similarly to text typefaces, take into account the budget and make sure 4:17 a display face has everything you need in regards to weight, styles, or accents. 4:22 Because display typefaces are used in fewer contexts, there's a bit more 4:29 flexibility here that you'd never want to set body text and all caps. 4:33 You can actually utilize the display face to great effect 4:39 that only has uppercase characters. 4:43 Also it's possible to have good typographic with a single weighted 4:46 font for your display face. 4:50 These situations might not be ideal, but they can be worked through. 4:52 Lastly, there might be a scenario where you land a client who 4:58 already has a typeface for their brands. 5:02 This process then is sometimes as simple as finding the web font version of that 5:05 typeface. 5:09 But other times, there might not be web font licenses available for it yet. 5:11 In that case, you want to find a typeface that channels a similar mood and 5:16 style to the print version as you translate their brand for the web. 5:21 You could Google alternative to insert typeface here. 5:26 But what's the fun in that? 5:31 Utilize all the knowledge you've taken here to make a well informed decision for 5:33 an alternative that best fits the client. 5:38 You might arrive at a different conclusion than those online forums. 5:41 Later on in the course, we'll get into more details on how to pair typefaces. 5:46 But I hope this has helped distill some of the ambiguity around choosing 5:51 a typeface for the web. 5:55 Think about where it's gonna live. 5:58 What makes it legible? 6:00 If its mood matches the content and audience. 6:01 Does it have everything you need? 6:05 And what factor will cosplay? 6:06 This is by no means an exact science so have some fun along the way. 6:10 The answers to these questions should help guide you in a good direction and 6:16 leave room for your own personal taste and design choices. 6:22 Next, we'll take a look at weights, styles, and sizes. 6:26
You need to sign up for Treehouse in order to download course files.Sign up