Horizontal Space: Measure and Margins7: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.
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