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

Horizontal Space: Measure and Margins

7:55 with Hope Armstrong

How many characters should fit on a line of text? How do I give my type room to breathe? We’ll be addressing these questions in this video on horizontal space.

Resources

Letterspacing and Kerning

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

    Once we get a good size for our body tax, 0:00
    well want to take a look at our measure in space. 0:03
    We first talked about measure which is also known as lining because it deals 0:06
    with how many characters fit on each line of text. 0:11
    Then we'll discuss the space between letters, these two concepts both work 0:14
    together to create readable layouts, which give the type room to breath. 0:19
    In elements of type of graphic style, Robert Richter recommends 0:26
    a measure of 45 to 75 characters per line for a single column of text. 0:31
    A measure that's too long can tire out readers eyes, 0:37
    as they have to travel far across the screen and back multiple times. 0:41
    When shifting to the next line below, they can potentially lose their place. 0:46
    A measure that's too short will have readers eyes quickly jumping back and 0:51
    forth to the next line, which is again quite exhausting enjoying. 0:56
    A measure that's just right will be comfortable to the user creating 1:01
    an enjoyable reading experience. 1:06
    Remember, 45 to 75 characters works well with the mid 60s being ideal. 1:08
    If you're working with multiple columns, you can choose for 1:15
    the 40 to 50 character range. 1:19
    In our figma file our layout currently isn't very readable. 1:21
    The lines of text spend the whole page and 1:26
    the measure is well about of whats recommended. 1:28
    I've placed bold asterisks at the 45th and 75th characters. 1:32
    We can remove this later but this guides us and 1:37
    gives us a good idea about where our line should break. 1:40
    To determine character counts, check out the teachers notes for a tool. 1:43
    If these two asterisks end up on the same line, 1:55
    then we know we need to fix our measure. 1:59
    Now, let's determine a good width for 2:02
    this text, a good place to start is to multiply your body font size by 30. 2:04
    Since the body font size is 20 pixels, we could set a max width of 600 pixels. 2:09
    The asterisks fall on two different lines which is what we want, and 2:16
    the text width feels appropriate. 2:20
    Always take time to read through a few paragraphs 2:22
    to make sure the measure feels appropriate or needs adjusting. 2:25
    Although commonly confused, tracking and 2:30
    kerning are two different techniques when it comes to typography. 2:33
    They both deal with the space around the letter forms but in different ways, 2:37
    we'll examine each one along with general rules of thumb for both. 2:43
    Tracking also known as letterspacing pertains to the amount of space 2:48
    between every character in a particular block of text. 2:53
    You could increase or 2:56
    decrease the amount of tracking which will affect the text is a whole. 2:58
    Tighter tracking will result in a heavier feel, 3:03
    whereas looser tracking gives it a lighter, airier look. 3:06
    For example, let's set the title in all caps to make a bold statement. 3:12
    Now we'll want to tweak the tracking to make it easier to read. 3:17
    We can set the tracking in our main title to be greater or 3:21
    less than the fonts normal spacing. 3:25
    Let's add 3% to the heading one style. 3:27
    Notice how every space between every character is affected as it loosened up. 3:33
    Now, let's change the value to a negative value of -3, which will track it inward. 3:39
    Looks good, notice how this also affects how heavy the element feels on the page. 3:48
    Tighter letter spacing will result in heavier feel, 3:54
    whereas looser letter spacing gives it a lighter airier look. 3:58
    General rules of thumb are, 4:03
    slightly reduce the tracking in headings by 3 to 5%. 4:05
    As type gets better the tracking increases, 4:09
    sometimes in headings it appears too spaced out. 4:13
    Tightening the heading to be more compact makes it more solid and more closely 4:17
    resemble the spacing of body type, this is also commonly done to logo types. 4:22
    Do not change the tracking and 4:27
    body copy unless it's absolutely necessary to aid legibility. 4:30
    Don't track your type out too much as words and spaces will get muddled. 4:34
    Increase tracking and small caps or uppercase tax by five to 10%. 4:40
    This generally applies to uppercase headlines, 4:46
    acronyms and long series of digits. 4:50
    If your design program gives you the option of metric or optical tracking, 4:53
    choose metric which uses character spacing information inside the font. 4:58
    This is valuable information the font designer included. 5:02
    Optical spacing throws out that carefully crafted information and 5:07
    instead uses an algorithm that tries to guess the kerning of every character and 5:12
    often gets it wrong. 5:17
    Now let's look at kerning, kerning deals with the amount of space between 5:19
    a specific character combination, rather than the spacing of a whole body of text. 5:24
    In a typeface, a type designer sets the space for the left side of a letter and 5:29
    the right side of the letter, so that it works best with all the other letters and 5:34
    their spacing. 5:39
    Certain character combinations can come up that are either too far apart, 5:40
    or too close together, such as uppercase AV, 5:47
    uppercase WA or uppercase T, lowercase a. 5:52
    With kerning character pairs are adjusted to be evenly spaced with 5:57
    the rest of the typeface. 6:01
    Generally, you wouldn't need to adjust kerning if you have a well designed font. 6:03
    If you find off balance letters, you can manually adjust the kerning, but 6:08
    if you find a lot then consider switching to a more balanced font. 6:13
    So, letter spacing affects the spacing of the text as a whole. 6:17
    Whereas kerning deals with the space between a specific pair of letters. 6:21
    Now, let's move into talking about ligatures. 6:26
    Ligatures improve the appearance of text for 6:29
    letters that are too close together like the f and the I. 6:32
    They create a smoother transition between letters by connecting 6:36
    certain character combinations, they can also give the text a nice touch. 6:41
    Ligatures are mostly found in Serif and script typefaces, 6:45
    because they aren't as necessary in Sans Serifs. 6:49
    So, just because a typeface does not have them, does not mean it's a bad typeface. 6:53
    In order to utilize ligatures, you'll need a typeface that supports them. 7:00
    Typeface specimen images will often showcase them, or 7:04
    you can look through the character map on a typeface to see if they're available. 7:08
    Here I'm viewing Brandon text font on myfonts.com, 7:13
    under OpenType Features I see it has ligatures 7:17
    To see it in action I can type the word figs. 7:27
    See how the f and i letters combine, the type designer decided to hide the dot of 7:34
    the i when it follows a lower case f, this helps legibility and simplifies the text. 7:40
    That's it for a horizontal space, stick around for 7:48
    the next video where we'll delve into vertical space. 7:51

    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