1
00:00:00,655 --> 00:00:04,951
Some of the most important
enhancements you can make using CSS

2
00:00:04,951 --> 00:00:07,910
are typographic improvements.

3
00:00:07,910 --> 00:00:11,860
After all,
typography is all about communication.

4
00:00:11,860 --> 00:00:15,093
No matter how beautiful
are your colors and images,

5
00:00:15,093 --> 00:00:19,510
your web page isn't doing its job
unless users stick around to read it.

6
00:00:21,470 --> 00:00:26,277
Creating functional typography involves
making adjustments to sizing and

7
00:00:26,277 --> 00:00:31,020
spacing, as well as choosing
the right typeface for the job.

8
00:00:31,020 --> 00:00:36,866
But up until this point, we've mostly just
worked with the browser default typeface,

9
00:00:36,866 --> 00:00:39,159
which tends to be Times New Roman.

10
00:00:39,159 --> 00:00:42,793
That's because we haven't learned
the font-family property,

11
00:00:42,793 --> 00:00:45,560
which allows us to choose
a different typeface.

12
00:00:47,550 --> 00:00:51,620
Font family declarations look
pretty simple at a glance.

13
00:00:51,620 --> 00:00:55,580
The value is the name of
the typeface you'd like to use.

14
00:00:55,580 --> 00:01:00,682
For instance, let's say you like
the look of the typeface Treehouse uses,

15
00:01:00,682 --> 00:01:04,604
Gotham Rounded, and
wish to use it for your body element.

16
00:01:12,776 --> 00:01:16,833
Notice the quotation marks
around Gotham Rounded.

17
00:01:16,833 --> 00:01:22,503
The CSS spec recommends typing quotes
around font names with whitespace,

18
00:01:22,503 --> 00:01:26,110
numbers, or
punctuation other than hyphens.

19
00:01:27,780 --> 00:01:31,173
Go ahead and try that out in your browser.

20
00:01:31,173 --> 00:01:35,840
While it works on my machine,
I'm guessing it didn't on yours.

21
00:01:35,840 --> 00:01:38,037
Why would that be?

22
00:01:38,037 --> 00:01:43,159
The problem is Gotham Rounded
isn't a web-safe typeface.

23
00:01:46,235 --> 00:01:52,680
Web-safe means the typeface is likely
already installed on most users' machines.

24
00:01:54,740 --> 00:02:00,760
Verdana is an extremely common sans-serif
typeface, so let's try that instead.

25
00:02:01,890 --> 00:02:05,766
Since Verdana is only one word,
we can remove the quotation marks,

26
00:02:05,766 --> 00:02:08,290
though if you leave them in, that's fine.

27
00:02:09,900 --> 00:02:12,807
Since you probably do
have Verdana installed,

28
00:02:12,807 --> 00:02:17,030
your Lake Tahoe page should now be
displaying the Verdana typeface.

29
00:02:18,290 --> 00:02:20,940
Note that I said probably, however.

30
00:02:20,940 --> 00:02:25,826
When it comes to using a web-safe font,
it's best to provide a fallback in

31
00:02:25,826 --> 00:02:29,872
case the user doesn't have your
original choice installed.

32
00:02:34,146 --> 00:02:37,566
Providing fallbacks means
writing a font stack,

33
00:02:37,566 --> 00:02:41,313
which is a list of typefaces,
in order of preference,

34
00:02:41,313 --> 00:02:46,540
that the browser can select in case of
a problem, such as a font not loading.

35
00:02:48,460 --> 00:02:53,229
I'm looking at a resource
called cssfontstack.com.

36
00:02:53,229 --> 00:02:58,178
Not only does it suggest that
Verdana is 99% likely to be

37
00:02:58,178 --> 00:03:01,511
installed on the user's machine, but

38
00:03:01,511 --> 00:03:07,885
it suggests the following font stack,
Verdana, Geneva, sans-serif.

39
00:03:14,216 --> 00:03:19,214
In this case, the user's browser
will most likely choose Verdana.

40
00:03:19,214 --> 00:03:21,991
But if for Verdana is absent for
some reason,

41
00:03:21,991 --> 00:03:25,550
the browser will attempt to load Geneva.

42
00:03:25,550 --> 00:03:27,753
And if that one's also missing,

43
00:03:27,753 --> 00:03:32,959
the browser will select whatever sans
serif typeface it does have available.

44
00:03:32,959 --> 00:03:39,400
So your text won't revert to a serif
typeface like Times New Roman.

45
00:03:39,400 --> 00:03:44,385
We've learned to choose a new typeface for
our webpage, and that's great.

46
00:03:44,385 --> 00:03:48,426
Except that you might have noticed
that the list of web-safe typefaces

47
00:03:48,426 --> 00:03:50,480
is pretty limited.

48
00:03:50,480 --> 00:03:54,020
How do we make use of
non-web-safe typefaces?

49
00:03:54,020 --> 00:03:56,000
We'll find out in our next video.