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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Typography Terminology

6:47 with Hope Armstrong

We’ll need to be on the same page when talking about web typography. The terms covered here will help us define what we’re talking about down the road.

Further Reading

Resources

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

    Now that you understand what typography is, 0:01
    let's talk about some of the terms used to describe its different elements. 0:04
    This will include typefaces, parts of letters, layouts, and more. 0:08
    Instead of ambiguously trying to describe something like that 0:14
    low swoopy part of the lowercase y, these terms will make it 0:17
    much easier to know what you're talking about as we dive into typography. 0:21
    Let's look at the numerous elements that shape a typeface. 0:26
    First, we have the cap height. 0:30
    This is simply the height of the capital letters. 0:32
    Next is the baseline, which is pertinent to both the uppercase and 0:35
    lowercase letters as it's the guideline for which the majority of characters rest. 0:39
    The height of the lowercase letter set is determined by the lowercase x. 0:44
    So this is labeled as the x-height. 0:49
    The x-height varies across typefaces and can greatly affect legibility. 0:51
    Let's look at that. 0:57
    A high x height means the lowercase is larger in relation to the uppercase. 0:59
    Whereas a low x height means the opposite, it's smaller. 1:04
    When smaller font sizes come into play, a typeface with a high x-height can help 1:08
    retain legibility because the lowercase is larger in relation to the upper case. 1:13
    Let's say you have two different typefaces, and 1:19
    both are set at 12 point size. 1:21
    One could be easier to read than the other due to the higher x-height. 1:24
    You'll also notice there are certain areas where some lowercase letters 1:29
    descend below the baseline, and others ascend above the x-height. 1:33
    These are called descenders and ascenders respectively. 1:39
    The p here has descender, and the d has an ascender. 1:42
    You might be wondering how low can descenders go or 1:47
    how high can ascenders climb? 1:51
    Well, that also varies across typefaces. 1:54
    In some typefaces, ascenders climb up above the cap height. 1:57
    In others, they sit below. 2:01
    And in some cases, the cap height and ascenders are aligned. 2:04
    This last case, though, can affect readability and letter recognition. 2:08
    For instance, let's say you're using Helvetica, 2:13
    where the cap height and the ascender height are similar. 2:17
    You're writing out a headline which includes the word ILL. 2:20
    The uppercase I, and these two lowercase L's are hard to tell apart. 2:25
    Some might read that as ILL, but others might read it as the Roman numeral three. 2:31
    This would be even harder to decipher if the letters appeared mixed up in a coupon 2:37
    code, where uppercase, lowercase, and numbers are present. 2:42
    I'm not saying don't use Helvetica or typefaces with a similar cap and 2:47
    ascender height. 2:52
    I'm saying pay close attention to your ascenders and descenders, and 2:54
    know what's at stake. 2:58
    Let's move on to the next term. 3:00
    The typeface we are currently looking at has serifs on it. 3:03
    Serifs are projections that finish off the main strokes of a letter. 3:07
    They can sometimes aid legibility and letter recognition. 3:11
    For example, the problem we just encountered with the ILL would 3:16
    not happen here because the serifs are distinctly different on those two letters. 3:20
    Distinctive character shapes help differentiate letters, and 3:26
    serifs help letters flow. 3:30
    The shape of letters particularly helps those with dyslexia and 3:32
    reading disabilities. 3:36
    Other typefaces forego serifs on their letter forms. 3:39
    These are called sans-serifs, sans meaning without. 3:42
    Next, let's talk about contrast. 3:48
    Contrast can relate to a few different things in typography. 3:51
    The first deals with the actual letter forms in a typeface. 3:54
    A typeface with high contrast would have thick vertical strokes and 3:59
    thin horizontal strokes. 4:03
    A typeface with low contrast would have little to no 4:06
    difference in stroke thickness. 4:09
    Contrast can also refer to the actual text and how it relates to the background. 4:13
    Pure black text on a pure white background creates high contrast. 4:20
    Whereas a light gray on a medium gray creates low contrast. 4:25
    Later, we'll look at when creating high or low contrast is appropriate. 4:31
    According to the WCAG contrast guidelines, body text color should 4:36
    have a contrast ratio of at least 4.5:1 when compared to its background color. 4:41
    Large text that is 18 points and 4:49
    larger should have a contrast ratio of at least 3:1. 4:51
    Lastly, let's discuss color. 4:56
    Like contrast, color can mean a few different things in typography. 5:00
    The first is the simplest and is probably what comes to your mind. 5:04
    It's the actual color of text such as red, blue, yellow, etc. 5:08
    We can create page contrast with changes in color. 5:15
    Common color blindness conditions include red/green and blue/yellow. 5:20
    People with color blindness have difficulty 5:26
    discerning the differences between the two. 5:29
    Therefore, avoid pairing color text and backgrounds in those colors. 5:32
    There are browser plugins and other tools which allow you to test how those with 5:38
    color blindnesses see your design. 5:42
    Check out the teacher's notes for links. 5:44
    The second meaning refers to the overall density of ink or text on a page. 5:48
    If we want, we can utilize different weights of the typeface at different sizes 5:53
    to create even color on a page. 5:58
    We have lighter weights at larger sizes and regular weights of smaller sizes. 6:01
    Or we can create uneven color by setting our headings to be bolder weights 6:07
    while keeping the paragraphs the same. 6:12
    These heavy areas of color can create emphasis if needed. 6:15
    When we use this term, we'll distinguish its context to avoid confusion. 6:21
    There are many other terms used to describe different parts of 6:25
    letter forms and typography. 6:29
    If you're hungry for more, you can also check out the teacher's notes 6:31
    which includes links to a couple of glossaries. 6:35
    With what we know now from this video, 6:38
    we'll be able to better understand the different types of type in our next video. 6:41

    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