Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Web-Safe Typefaces and Font Stacks

3:52 with Anwar Montasir

Creating functional typography involves making adjustments to sizing and spacing, as well as choosing the right typeface for the job. But up until this point we’ve mostly just worked with the browser default typeface, which tends to be Times New Roman. That’s because we haven’t learned the `font-family` property, which allows us to choose a different typeface.

Vocabulary

  • Web-safe typeface: a typeface that is already on most users’ machines.

  • Font stack: a list of fallback typefaces

Further Reading

Single quotes or double?

Should typefaces containing multiple words go in single or double quotes? I tend to use double quotes for HTML and single quotes for CSS and JS, but you'll see in this course that either method is accepted by the browser.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Some of the most important enhancements you can make using CSS 0:00
    are typographic improvements. 0:04
    After all, typography is all about communication. 0:07
    No matter how beautiful are your colors and images, 0:11
    your web page isn't doing its job unless users stick around to read it. 0:15
    Creating functional typography involves making adjustments to sizing and 0:21
    spacing, as well as choosing the right typeface for the job. 0:26
    But up until this point, we've mostly just worked with the browser default typeface, 0:31
    which tends to be Times New Roman. 0:36
    That's because we haven't learned the font-family property, 0:39
    which allows us to choose a different typeface. 0:42
    Font family declarations look pretty simple at a glance. 0:47
    The value is the name of the typeface you'd like to use. 0:51
    For instance, let's say you like the look of the typeface Treehouse uses, 0:55
    Gotham Rounded, and wish to use it for your body element. 1:00
    Notice the quotation marks around Gotham Rounded. 1:12
    The CSS spec recommends typing quotes around font names with whitespace, 1:16
    numbers, or punctuation other than hyphens. 1:22
    Go ahead and try that out in your browser. 1:27
    While it works on my machine, I'm guessing it didn't on yours. 1:31
    Why would that be? 1:35
    The problem is Gotham Rounded isn't a web-safe typeface. 1:38
    Web-safe means the typeface is likely already installed on most users' machines. 1:46
    Verdana is an extremely common sans-serif typeface, so let's try that instead. 1:54
    Since Verdana is only one word, we can remove the quotation marks, 2:01
    though if you leave them in, that's fine. 2:05
    Since you probably do have Verdana installed, 2:09
    your Lake Tahoe page should now be displaying the Verdana typeface. 2:12
    Note that I said probably, however. 2:18
    When it comes to using a web-safe font, it's best to provide a fallback in 2:20
    case the user doesn't have your original choice installed. 2:25
    Providing fallbacks means writing a font stack, 2:34
    which is a list of typefaces, in order of preference, 2:37
    that the browser can select in case of a problem, such as a font not loading. 2:41
    I'm looking at a resource called cssfontstack.com. 2:48
    Not only does it suggest that Verdana is 99% likely to be 2:53
    installed on the user's machine, but 2:58
    it suggests the following font stack, Verdana, Geneva, sans-serif. 3:01
    In this case, the user's browser will most likely choose Verdana. 3:14
    But if for Verdana is absent for some reason, 3:19
    the browser will attempt to load Geneva. 3:21
    And if that one's also missing, 3:25
    the browser will select whatever sans serif typeface it does have available. 3:27
    So your text won't revert to a serif typeface like Times New Roman. 3:32
    We've learned to choose a new typeface for our webpage, and that's great. 3:39
    Except that you might have noticed that the list of web-safe typefaces 3:44
    is pretty limited. 3:48
    How do we make use of non-web-safe typefaces? 3:50
    We'll find out in our next video. 3:54

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up