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.