1
00:00:01,190 --> 00:00:06,400
When laying out or setting type for print,
the process yields a tangible document,

2
00:00:06,400 --> 00:00:10,800
such as a piece of paper which
has the text as ink on a page.

3
00:00:10,800 --> 00:00:15,340
This final medium is quite different than
a lighted screen displaying a certain

4
00:00:15,340 --> 00:00:18,750
amount of pixels to
render type on a website.

5
00:00:18,750 --> 00:00:23,750
Now let's look at two main ways
web typography differs from print,

6
00:00:23,750 --> 00:00:26,800
and how we can smartly
design with that in mind.

7
00:00:26,800 --> 00:00:32,435
[SOUND] First, let's talk about
desktop fonts versus webfonts.

8
00:00:32,435 --> 00:00:35,900
Desktop fonts are used for
print layouts and design.

9
00:00:35,900 --> 00:00:38,840
They're fonts you install on
your computer, which gives you

10
00:00:38,840 --> 00:00:43,650
the ability to use them in word
processing programs or design programs.

11
00:00:43,650 --> 00:00:48,527
The final mediums they can
end up on are pages of paper,

12
00:00:48,527 --> 00:00:53,736
posters, billboards, JPEGs,
PNGs, the list goes on.

13
00:00:53,736 --> 00:00:56,520
Desktop fonts were made
those mediums in mind.

14
00:00:57,875 --> 00:01:01,370
Webfonts are font files that
are not intended to be used in

15
00:01:01,370 --> 00:01:04,120
the same way that desktop fonts are.

16
00:01:04,120 --> 00:01:07,940
Webfonts are created for the purpose
of serving up a font on a website or

17
00:01:07,940 --> 00:01:11,980
app that might not be installed
on a person's computer.

18
00:01:11,980 --> 00:01:13,880
This is crucial when designing for
the web.

19
00:01:14,950 --> 00:01:17,840
We'll get into where to
find webfonts in a bit.

20
00:01:17,840 --> 00:01:22,370
But for now, just know there are several
websites that let you download webfonts

21
00:01:22,370 --> 00:01:24,120
for free or for purchase.

22
00:01:25,820 --> 00:01:30,680
In the distant past, when creating a
website you could only use fonts that were

23
00:01:30,680 --> 00:01:35,625
already native to the person's computer,
also known as system fonts.

24
00:01:35,625 --> 00:01:39,650
The upside of using system fonts
is there's no loading time,

25
00:01:39,650 --> 00:01:43,650
the fonts are designed for
legibility on the devices, and

26
00:01:43,650 --> 00:01:46,600
users have a familiarity with the font.

27
00:01:46,600 --> 00:01:49,550
However, it limits your
choices because you have to

28
00:01:49,550 --> 00:01:53,860
use fonts that are native to multiple
operating systems on Windows and Mac.

29
00:01:55,190 --> 00:01:58,202
Now that webfonts are common and
well-supported,

30
00:01:58,202 --> 00:02:02,040
you have more control and
customization over what your users see.

31
00:02:03,050 --> 00:02:08,809
When designing for a mobile app, the
easiest option is to use a system font.

32
00:02:08,809 --> 00:02:13,780
But if you prefer a custom font,
look for fonts with an app license.

33
00:02:13,780 --> 00:02:17,890
This makes it easy to use
the font across iOS, Android,

34
00:02:17,890 --> 00:02:20,260
and other digital publishing platforms.

35
00:02:21,890 --> 00:02:27,702
When shopping for a webfont, be sure to
inform the client about the ongoing cost.

36
00:02:27,702 --> 00:02:33,470
Some webfont licenses are charged based
on the number of monthly active users.

37
00:02:33,470 --> 00:02:36,780
Sometimes you'll have a larger budget for
webfonts,

38
00:02:36,780 --> 00:02:40,240
which provides you with some
flexibility and options to choose from.

39
00:02:41,460 --> 00:02:45,650
Other times there might not be room
in the budget for webfont licenses or

40
00:02:45,650 --> 00:02:47,400
subscription models.

41
00:02:47,400 --> 00:02:51,970
If that's the case, try to help the client
understand the benefits of good

42
00:02:51,970 --> 00:02:57,110
typography and why there is
a cost associated with webfonts.

43
00:02:57,110 --> 00:03:02,200
For example, I might tell a client
free typefaces are fine to use and

44
00:03:02,200 --> 00:03:05,030
I will happily go down
that route if needed.

45
00:03:05,030 --> 00:03:08,270
But be aware there's
a relatively small number of

46
00:03:08,270 --> 00:03:12,990
really good versatile free fonts,
which limits our options.

47
00:03:12,990 --> 00:03:17,240
Because of that, the good ones
are often used on many sites,

48
00:03:17,240 --> 00:03:21,540
which won't do us any favors
in distinguishing your site.

49
00:03:21,540 --> 00:03:23,590
To set your site and brand apart,

50
00:03:23,590 --> 00:03:28,090
I would recommend going with
a subscription webfont model.

51
00:03:28,090 --> 00:03:32,710
Although there is some cost, I think your
brand and users will get much more mileage

52
00:03:32,710 --> 00:03:35,990
out of paid webfonts than
if we went with free fonts.

53
00:03:37,780 --> 00:03:42,960
After that sometimes a client makes room
in the budget and sometimes they don't.

54
00:03:42,960 --> 00:03:46,810
In the latter case, we'll want to have
all these principles we discussed in

55
00:03:46,810 --> 00:03:51,129
the back of our minds as we browse
free webfont sites to find good ones.

56
00:03:52,550 --> 00:03:55,650
Another thing to note
about webfonts is this.

57
00:03:55,650 --> 00:04:00,150
Some popular typefaces have
desktop licenses but may not yet

58
00:04:00,150 --> 00:04:02,550
be available as webfonts.

59
00:04:02,550 --> 00:04:06,690
In this case, you should reach out to
the type designer or foundry to see

60
00:04:06,690 --> 00:04:11,570
if you can purchase a webfont license or
find out when one will be released.

61
00:04:11,570 --> 00:04:16,450
Do not try to use a desktop licensed
font and convert it to a webfont, or

62
00:04:16,450 --> 00:04:19,365
serve up desktop font files on your site.

63
00:04:19,365 --> 00:04:21,384
Not only is this not smart, but

64
00:04:21,384 --> 00:04:25,585
it's also breaking the license
agreement for most typefaces.

65
00:04:27,250 --> 00:04:30,060
Lastly, let's discuss another difference,

66
00:04:30,060 --> 00:04:33,700
which is fixed layouts
versus fluid layouts.

67
00:04:33,700 --> 00:04:38,110
In print or graphic design,
you're designing for a fixed layout.

68
00:04:38,110 --> 00:04:39,320
Meaning the type and

69
00:04:39,320 --> 00:04:43,480
elements are arranged in a specific
way that's locked into the medium.

70
00:04:44,560 --> 00:04:49,380
For example, if I was laying out
a magazine article, the type is set in

71
00:04:49,380 --> 00:04:54,880
a specific place with an exact width,
and linked to the block of text.

72
00:04:54,880 --> 00:04:58,690
Once that magazine is finalized and
printed, the type and

73
00:04:58,690 --> 00:05:02,910
layout remain that way, so you know
exactly how the reader is going to see it.

74
00:05:04,220 --> 00:05:06,780
With the web, it's much different.

75
00:05:06,780 --> 00:05:10,090
Users might be viewing your
site on a phone, tablet, or

76
00:05:10,090 --> 00:05:14,130
desktop, which all have
different screen sizes.

77
00:05:14,130 --> 00:05:17,110
Typography that might work
great when viewing the site

78
00:05:17,110 --> 00:05:22,414
on a desktop computer could take a turn
for the worse on a mobile phone.

79
00:05:22,414 --> 00:05:26,950
With responsive design, we can create
fluid layouts so that our type and

80
00:05:26,950 --> 00:05:30,390
layouts can respond to
a user's screen size.

81
00:05:30,390 --> 00:05:34,956
This gives us a ton of control,
such as changing font sizes,

82
00:05:34,956 --> 00:05:39,110
layouts, widths, and
more at certain breakpoints.

83
00:05:39,110 --> 00:05:41,310
We'll discuss this more later.

84
00:05:41,310 --> 00:05:44,910
That's it for now, and
good work finishing this stage.

85
00:05:44,910 --> 00:05:47,890
I'll see you in the next stage,
where we'll look at how to chose and

86
00:05:47,890 --> 00:05:49,260
use typefaces.