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.