1 00:00:00,528 --> 00:00:03,267 Once we get a good size for our body tax, 2 00:00:03,267 --> 00:00:06,602 well want to take a look at our measure in space. 3 00:00:06,602 --> 00:00:11,579 We first talked about measure which is also known as lining because it deals 4 00:00:11,579 --> 00:00:14,907 with how many characters fit on each line of text. 5 00:00:14,907 --> 00:00:19,876 Then we'll discuss the space between letters, these two concepts both work 6 00:00:19,876 --> 00:00:24,703 together to create readable layouts, which give the type room to breath. 7 00:00:26,280 --> 00:00:31,700 In elements of type of graphic style, Robert Richter recommends 8 00:00:31,700 --> 00:00:37,719 a measure of 45 to 75 characters per line for a single column of text. 9 00:00:37,719 --> 00:00:41,454 A measure that's too long can tire out readers eyes, 10 00:00:41,454 --> 00:00:46,275 as they have to travel far across the screen and back multiple times. 11 00:00:46,275 --> 00:00:51,283 When shifting to the next line below, they can potentially lose their place. 12 00:00:51,283 --> 00:00:56,890 A measure that's too short will have readers eyes quickly jumping back and 13 00:00:56,890 --> 00:01:01,972 forth to the next line, which is again quite exhausting enjoying. 14 00:01:01,972 --> 00:01:06,283 A measure that's just right will be comfortable to the user creating 15 00:01:06,283 --> 00:01:08,523 an enjoyable reading experience. 16 00:01:08,523 --> 00:01:15,734 Remember, 45 to 75 characters works well with the mid 60s being ideal. 17 00:01:15,734 --> 00:01:19,519 If you're working with multiple columns, you can choose for 18 00:01:19,519 --> 00:01:21,641 the 40 to 50 character range. 19 00:01:21,641 --> 00:01:26,133 In our figma file our layout currently isn't very readable. 20 00:01:26,133 --> 00:01:28,921 The lines of text spend the whole page and 21 00:01:28,921 --> 00:01:32,284 the measure is well about of whats recommended. 22 00:01:32,284 --> 00:01:37,681 I've placed bold asterisks at the 45th and 75th characters. 23 00:01:37,681 --> 00:01:40,379 We can remove this later but this guides us and 24 00:01:40,379 --> 00:01:43,647 gives us a good idea about where our line should break. 25 00:01:43,647 --> 00:01:47,823 To determine character counts, check out the teachers notes for a tool. 26 00:01:55,680 --> 00:01:59,213 If these two asterisks end up on the same line, 27 00:01:59,213 --> 00:02:02,208 then we know we need to fix our measure. 28 00:02:02,208 --> 00:02:04,786 Now, let's determine a good width for 29 00:02:04,786 --> 00:02:09,718 this text, a good place to start is to multiply your body font size by 30. 30 00:02:09,718 --> 00:02:16,300 Since the body font size is 20 pixels, we could set a max width of 600 pixels. 31 00:02:16,300 --> 00:02:20,527 The asterisks fall on two different lines which is what we want, and 32 00:02:20,527 --> 00:02:22,765 the text width feels appropriate. 33 00:02:22,765 --> 00:02:25,443 Always take time to read through a few paragraphs 34 00:02:25,443 --> 00:02:28,986 to make sure the measure feels appropriate or needs adjusting. 35 00:02:30,724 --> 00:02:33,563 Although commonly confused, tracking and 36 00:02:33,563 --> 00:02:37,949 kerning are two different techniques when it comes to typography. 37 00:02:37,949 --> 00:02:43,502 They both deal with the space around the letter forms but in different ways, 38 00:02:43,502 --> 00:02:48,473 we'll examine each one along with general rules of thumb for both. 39 00:02:48,473 --> 00:02:53,171 Tracking also known as letterspacing pertains to the amount of space 40 00:02:53,171 --> 00:02:56,979 between every character in a particular block of text. 41 00:02:56,979 --> 00:02:58,439 You could increase or 42 00:02:58,439 --> 00:03:03,232 decrease the amount of tracking which will affect the text is a whole. 43 00:03:03,232 --> 00:03:06,582 Tighter tracking will result in a heavier feel, 44 00:03:06,582 --> 00:03:10,680 whereas looser tracking gives it a lighter, airier look. 45 00:03:12,443 --> 00:03:17,572 For example, let's set the title in all caps to make a bold statement. 46 00:03:17,572 --> 00:03:21,475 Now we'll want to tweak the tracking to make it easier to read. 47 00:03:21,475 --> 00:03:25,096 We can set the tracking in our main title to be greater or 48 00:03:25,096 --> 00:03:27,552 less than the fonts normal spacing. 49 00:03:27,552 --> 00:03:30,584 Let's add 3% to the heading one style. 50 00:03:33,952 --> 00:03:39,915 Notice how every space between every character is affected as it loosened up. 51 00:03:39,915 --> 00:03:45,930 Now, let's change the value to a negative value of -3, which will track it inward. 52 00:03:48,788 --> 00:03:54,863 Looks good, notice how this also affects how heavy the element feels on the page. 53 00:03:54,863 --> 00:03:58,790 Tighter letter spacing will result in heavier feel, 54 00:03:58,790 --> 00:04:03,430 whereas looser letter spacing gives it a lighter airier look. 55 00:04:03,430 --> 00:04:05,595 General rules of thumb are, 56 00:04:05,595 --> 00:04:09,846 slightly reduce the tracking in headings by 3 to 5%. 57 00:04:09,846 --> 00:04:13,468 As type gets better the tracking increases, 58 00:04:13,468 --> 00:04:17,483 sometimes in headings it appears too spaced out. 59 00:04:17,483 --> 00:04:22,699 Tightening the heading to be more compact makes it more solid and more closely 60 00:04:22,699 --> 00:04:27,932 resemble the spacing of body type, this is also commonly done to logo types. 61 00:04:27,932 --> 00:04:30,065 Do not change the tracking and 62 00:04:30,065 --> 00:04:34,766 body copy unless it's absolutely necessary to aid legibility. 63 00:04:34,766 --> 00:04:40,457 Don't track your type out too much as words and spaces will get muddled. 64 00:04:40,457 --> 00:04:46,194 Increase tracking and small caps or uppercase tax by five to 10%. 65 00:04:46,194 --> 00:04:50,170 This generally applies to uppercase headlines, 66 00:04:50,170 --> 00:04:53,112 acronyms and long series of digits. 67 00:04:53,112 --> 00:04:58,012 If your design program gives you the option of metric or optical tracking, 68 00:04:58,012 --> 00:05:02,926 choose metric which uses character spacing information inside the font. 69 00:05:02,926 --> 00:05:07,284 This is valuable information the font designer included. 70 00:05:07,284 --> 00:05:12,017 Optical spacing throws out that carefully crafted information and 71 00:05:12,017 --> 00:05:17,580 instead uses an algorithm that tries to guess the kerning of every character and 72 00:05:17,580 --> 00:05:19,088 often gets it wrong. 73 00:05:19,088 --> 00:05:24,044 Now let's look at kerning, kerning deals with the amount of space between 74 00:05:24,044 --> 00:05:29,645 a specific character combination, rather than the spacing of a whole body of text. 75 00:05:29,645 --> 00:05:34,383 In a typeface, a type designer sets the space for the left side of a letter and 76 00:05:34,383 --> 00:05:39,342 the right side of the letter, so that it works best with all the other letters and 77 00:05:39,342 --> 00:05:40,396 their spacing. 78 00:05:40,396 --> 00:05:47,957 Certain character combinations can come up that are either too far apart, 79 00:05:47,957 --> 00:05:52,637 or too close together, such as uppercase AV, 80 00:05:52,637 --> 00:05:57,091 uppercase WA or uppercase T, lowercase a. 81 00:05:57,091 --> 00:06:01,712 With kerning character pairs are adjusted to be evenly spaced with 82 00:06:01,712 --> 00:06:03,535 the rest of the typeface. 83 00:06:03,535 --> 00:06:08,299 Generally, you wouldn't need to adjust kerning if you have a well designed font. 84 00:06:08,299 --> 00:06:13,193 If you find off balance letters, you can manually adjust the kerning, but 85 00:06:13,193 --> 00:06:17,483 if you find a lot then consider switching to a more balanced font. 86 00:06:17,483 --> 00:06:21,633 So, letter spacing affects the spacing of the text as a whole. 87 00:06:21,633 --> 00:06:26,047 Whereas kerning deals with the space between a specific pair of letters. 88 00:06:26,047 --> 00:06:29,639 Now, let's move into talking about ligatures. 89 00:06:29,639 --> 00:06:32,881 Ligatures improve the appearance of text for 90 00:06:32,881 --> 00:06:36,899 letters that are too close together like the f and the I. 91 00:06:36,899 --> 00:06:41,070 They create a smoother transition between letters by connecting 92 00:06:41,070 --> 00:06:45,937 certain character combinations, they can also give the text a nice touch. 93 00:06:45,937 --> 00:06:49,853 Ligatures are mostly found in Serif and script typefaces, 94 00:06:49,853 --> 00:06:53,230 because they aren't as necessary in Sans Serifs. 95 00:06:53,230 --> 00:07:00,064 So, just because a typeface does not have them, does not mean it's a bad typeface. 96 00:07:00,064 --> 00:07:04,905 In order to utilize ligatures, you'll need a typeface that supports them. 97 00:07:04,905 --> 00:07:08,339 Typeface specimen images will often showcase them, or 98 00:07:08,339 --> 00:07:13,390 you can look through the character map on a typeface to see if they're available. 99 00:07:13,390 --> 00:07:17,509 Here I'm viewing Brandon text font on myfonts.com, 100 00:07:17,509 --> 00:07:21,006 under OpenType Features I see it has ligatures 101 00:07:27,722 --> 00:07:31,115 To see it in action I can type the word figs. 102 00:07:34,653 --> 00:07:40,641 See how the f and i letters combine, the type designer decided to hide the dot of 103 00:07:40,641 --> 00:07:47,104 the i when it follows a lower case f, this helps legibility and simplifies the text. 104 00:07:48,759 --> 00:07:51,694 That's it for a horizontal space, stick around for 105 00:07:51,694 --> 00:07:54,840 the next video where we'll delve into vertical space.