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

Typography for Designers

Well done!

You have completed Typography for Designers!

Sign up for Treehouse Back to Library

How to Choose a Text Typeface for the Web

6:51 with Hope Armstrong

Good typography starts with a choosing of a good typeface. We’ll start by looking at how to choose a text typeface for the web because the majority of—if not all—copy on a site will be set in this typeface.

Further Reading

Font websites

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

    It's often smart to choose a text typeface before display. 0:01
    Because much of the copy on a site will be set in this choice. 0:05
    In his pocket guide on combining typefaces, 0:09
    Tim Brown calls on your anchor typeface because it acts as a reference point for 0:11
    every element in your composition. 0:16
    He encourages you to make your body text the anchor, if possible. 0:18
    So when choosing a text typeface on the web, your first priority is legibility. 0:23
    If a site's body copy is hard to read, then visitors won't stick around for long. 0:29
    Let's look at a few things to consider in determining if a typeface has good 0:35
    legibility and readability. 0:39
    First, does the typeface have a good x-height? 0:42
    An x-height that's too low will make the lowercase letters hard to read and 0:45
    tell apart at small sizes. 0:49
    An x-height can also be too high if it's nearing the cap height, 0:51
    making it hard to discern what's uppercase and what's lowercase. 0:55
    A general measurement to go by is if the x-height is around 60 to 75% of the cap 1:00
    height, then you've got yourself a good candidate for a text face. 1:04
    Next, let's consider the white space around the letter forms and 1:11
    its impact on legibility. 1:15
    If the space between letters, also known as letter-spacing, 1:17
    is too narrow or too tight, then at smaller sizes, 1:21
    the letters can get muddled together, which hurts legibility. 1:25
    Looser letter-spacing also allows the letter forms to still breathe at small 1:30
    sizes. 1:35
    While we do have some control over letter spacing with code, 1:36
    it's not advisable to manually letter space body text. 1:40
    Find a typeface that already has proper looser letter spacing for text. 1:44
    Next, you will want to make sure the typeface as overall even color, as it 1:50
    balances the positive space of characters and the negative space of white space. 1:55
    You wouldn't want your text to feel too dense in certain areas or 2:00
    characters, which can break the reading flow. 2:04
    A trick you can employ is to blur your eyes as you're looking at the typeface. 2:07
    We'll manually mimic that here. 2:12
    Do any dark splotches or uneven places of color show up? 2:14
    If so, you probably want to mark that one off the list. 2:19
    Avenir Next looks quite even though. 2:22
    Other areas that deal with white space are counters. 2:26
    A counter is the fully or partially closed white space inside letterforms like o, 2:29
    b or e. 2:34
    Larger open counters can also aid legibility 2:36
    because they are less prone to close up at smaller sizes. 2:40
    Let's look at Neutraface 2 by House Industries as an example on x-height and 2:44
    white space. 2:49
    This family comes with a text and a display version. 2:51
    Both of them here are set at the same point size, but 2:56
    we can immediately notice some differences. 2:59
    Though the cap heights are similar, the text version has a higher x-height, 3:03
    which helps retain legibility at smaller sizes. 3:08
    The letter spacing is looser in the text version than in the display version, 3:11
    giving the characters and counters more room to breath. 3:16
    Although the display face wouldn't work well at small sizes, its lower x-height 3:20
    and tighter letter spacing helps greater amount of text fit into tighter spaces. 3:25
    A trait that's beneficial for headlines. 3:31
    Next, you wanna think about the mood of the typeface matching the content at hand. 3:35
    Familiarize yourself with the content by taking the time to read it thoroughly. 3:40
    Then write down some ways to describe it in your own words. 3:45
    Is it serious, lighthearted, witty, pointed, classy? 3:49
    As you peruse typefaces, have these words in a back of your mind and 3:55
    see if a typeface speaks in that certain mood. 3:59
    Consider who your audience is and 4:03
    what kinds of styles of typefaces they might be accustomed to. 4:05
    Are they doctors, lawyers, kids? 4:09
    Are there certain genres that a target industry is known for? 4:12
    You might not want to choose something that's been overused. 4:16
    But you can still play into these norms and create familiarity or 4:19
    interest by choosing a proper typeface that speaks in the right mood. 4:23
    With text faces, it should be noted that mood can be 4:28
    conveyed with the slightest subtleties in the letterforms. 4:31
    A simple change in the way a serif is handled can 4:35
    be in the world of a difference in text because there's a lot of it on the page. 4:38
    Don't go for something that's overly ornate or 4:43
    has a lot of character, as it will have too much going on for body copy. 4:46
    In any case, the mood of the typeface should fit the content at hand, but don't 4:52
    sacrifice legibility just because you like the mood of another typeface better. 4:56
    Don't forget to make sure the typeface has everything you need. 5:02
    You would hate to get halfway through designing a layout and 5:06
    realize the font doesn't contain a certain character or symbol that's needed. 5:09
    Things to consider are, does the typeface have a range of weights? 5:15
    Does the typeface have italic styles? 5:20
    Will we need different widths for versatility? 5:23
    Are small caps necessary? 5:26
    What accented characters are included for language support? 5:29
    And what kinds of numerical figures are needed? 5:33
    To clarify that last note, there are a few different styles of numerical figures. 5:37
    We'll look at old style and lining figures. 5:41
    Old style figures vary in height and descend below the baseline at times. 5:46
    These are nice for text and body copy, 5:51
    as they flow well with the rhythm set by the text. 5:53
    And they're necessary when using small caps. 5:57
    Lining figures all have the same height and baseline and are generally good for 6:00
    display, headlines or a setting with uppercase only. 6:06
    That concludes how to choose a text typeface. 6:11
    Sometimes designers utilize a versatile text family that works for 6:14
    both small and large text sizes. 6:18
    Other times, a single typeface won't work for all text sizes because weird 6:21
    intricacies can appear in the letter forms at different sizes. 6:26
    Also, you might just want to have some variety with your type. 6:30
    So in the next video, we will look at how to choose a display typeface. 6:34
    For further study on choosing a typeface, there's some great articles and 6:39
    resources in the teachers notes that influenced what we discussed here. 6:44
    And I highly recommend taking some time to read them. 6:48

    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