0:00:01.089,0:00:05.634 Let’s take a look at the atoms of visual design: letterforms. 0:00:05.634,0:00:09.695 This is the letter R, typeset in Gill Sans. 0:00:09.695,0:00:13.877 Gill Sans was designed by Eric Gill and released in 1928. 0:00:13.877,0:00:17.243 There’s a couple of things that I’d like to point out about this letter right here: 0:00:17.243,0:00:23.023 One of them is that it has the perceptual characteristic of consistent weight all throughout; 0:00:23.023,0:00:28.016 however, the actual thickness of the letter varies considerably over different parts. 0:00:28.016,0:00:31.361 So, if you look at some points of the letter, like the bottom, 0:00:33.081,0:00:38.000 you can see that they are much thicker than at other points in the letter. 0:00:41.028,0:00:47.048 And what you see in these atoms is exactly what you’ll see throughout the entirety of graphic design, 0:00:47.048,0:00:50.482 which is that we’re going for something that feels perceptually balanced — 0:00:50.482,0:00:56.524 or may have perceptual uniformity — when the actuality may be quite different. 0:00:56.524,0:01:03.067 This letter was also my very first assignment as a graphic design student at the Rhode Island School of Design: 0:01:03.067,0:01:09.099 We had to draw this letter, one foot high, in black paint, on a white background. 0:01:09.099,0:01:11.528 It may seem like a silly exercise, 0:01:11.528,0:01:16.799 but it’s a great way to understand intimately the curves and strokes of the letterform, 0:01:16.799,0:01:20.037 and it’s also really good at training both your eye and training your hand; 0:01:20.037,0:01:25.058 Maybe it’s also a hazing ritual that I’ve just post-hoc rationalized. 0:01:25.058,0:01:32.002 Anyhow, moving along, let’s look at the different parts of a typeface. 0:01:32.002,0:01:38.006 One term you may be familiar with from using on your computer is the point size or the font size. 0:01:38.006,0:01:40.059 And what’s notable about this is 0:01:40.059,0:01:46.032 it seems like a number that ought to be set in stone and consistent across all typefaces, 0:01:46.032,0:01:48.001 but it’s really not. 0:01:48.001,0:01:53.001 Most of our terminology from typefaces comes from when they were set in lead, 0:01:53.001,0:02:00.005 and the point size of a typeface really just means the height of the lead block that the type was set in, 0:02:00.005,0:02:07.030 which has some relationship to the actual letter size, but is not completely consistent. 0:02:10.016,0:02:12.621 For example, you can see, for the same point size, 0:02:12.621,0:02:16.023 here’s a letter S in Gill Sans, and a letter S in Calibri, 0:02:16.023,0:02:22.393 and you can that the Calibri S is lower than the Gill Sans S. 0:02:26.762,0:02:29.001 Our second term is leading. 0:02:29.001,0:02:32.524 If we have solid blocks of lead type that form the letters, 0:02:32.524,0:02:39.016 the spacing that we get between the lines was achieved by putting thin strips of lead in between the lines, 0:02:39.016,0:02:42.020 and that was called the leading. 0:02:42.020,0:02:47.019 It’s customary to have 20% of your font size as your leading; 0:02:47.019,0:02:51.015 and so, if in your word processor you’ve set 10-point type, 0:02:51.015,0:02:59.036 it will usually automatically add an extra 2 points of spacing to put 12 points in between each line. 0:02:59.036,0:03:05.045 The height of the lowercase letters is called the x-height, from the “x”. 0:03:05.045,0:03:10.032 Some typefaces have a higher x-height, like Lucida Bright or Georgia; 0:03:10.032,0:03:13.691 other typefaces have a lower x-height, like Baskerville. 0:03:13.691,0:03:16.085 And this is important for design — especially online — 0:03:16.085,0:03:23.074 because typefaces that have a higher x-height will be easier to read at smaller point sizes 0:03:23.074,0:03:27.559 and on low resolution devices like most screens. 0:03:27.559,0:03:31.079 Conversely, typefaces with a low x-height, like Baskerville, 0:03:31.079,0:03:37.049 are used when you’re trying to give elegance, or a “Belle Époque” feel to something. 0:03:37.049,0:03:39.781 And sprouting up and dropping down from the x-height 0:03:39.781,0:03:44.960 are the ascenders — like the top stem of the h and the dot of the i —, 0:03:44.960,0:03:49.560 and your descenders — like the y, p, g. 0:03:49.560,0:03:55.214 In general, a typeface that has a low x-height will tend to have long ascenders and descenders, 0:03:55.214,0:04:01.338 and a typeface that has a tall x-height will tend to have more squashed ascenders and descenders. 0:04:05.754,0:04:08.079 Typefaces can also vary in their weight. 0:04:08.079,0:04:15.459 So here have an example of light on the left, regular or roman in the middle, and bold on the right. 0:04:15.459,0:04:19.087 Sometimes you’ll see weights in between like demibold or semibold, 0:04:19.087,0:04:23.081 and, even to the further to the right of bold, you’ll see black. 0:04:23.081,0:04:25.094 Number six on the list are serifs. 0:04:25.094,0:04:33.070 Serifs are the doohickeys on the end of letters that give them that chiselled look. 0:04:33.070,0:04:35.044 [There are] a couple more that are bonus: 0:04:35.044,0:04:39.091 Some faces (typefaces) will also include small caps — which sure are exactly what they sound like, 0:04:39.091,0:04:41.760 smaller versions of capital[s and] numbers. 0:04:41.760,0:04:44.730 These can be used as headers, or they can also be used 0:04:44.730,0:04:50.034 to put acronyms and other capital texts inside a block of body text. 0:04:51.592,0:04:53.540 And one thing that you may not know is — 0:04:53.540,0:04:59.677 just like letters come in uppercase and lowercase, numbers do too. 0:04:59.677,0:05:01.094 These numbers, set in Neutraface, 0:05:01.094,0:05:06.027 provide an example of something that has just small ascenders and descenders; 0:05:06.027,0:05:09.462 in some cases these can be more dramatic. 0:05:09.462,0:05:11.037 Lowercase numbers are useful 0:05:11.037,0:05:17.001 when you want numbers to fit in with a larger block of text and not stand out. 0:05:17.001,0:05:20.048 One of the most common questions I get asked about graphic design is: 0:05:20.048,0:05:22.060 “Which typeface should I use?” 0:05:22.060,0:05:24.063 And a lot of people have heard a story 0:05:24.063,0:05:28.082 where serif typefaces are generally recommended for body text 0:05:28.082,0:05:32.077 and sans serif typefaces are recommended for headers. 0:05:32.077,0:05:36.956 And that’s, on the whole, not bad advice. 0:05:36.956,0:05:41.644 There is an often-repeated claim that the reason that this is a good heuristic 0:05:41.644,0:05:47.005 is because serif typefaces, with those doohickeys at the end, 0:05:47.005,0:05:52.052 give your eyes something to latch onto, and consequently they’re easier to read. 0:05:52.052,0:05:55.054 It’s an interesting hypothesis. 0:05:55.054,0:05:58.007 So I looked into this a little bit for all of you, 0:05:58.007,0:06:00.082 and there’s some challenges in trying to figure this out. 0:06:00.082,0:06:07.088 For starters, individual differences in readers dwarf any manipulation effects of the typeface — 0:06:07.088,0:06:09.711 like, some people read a whole lot faster than others, 0:06:09.711,0:06:16.033 and so it’s difficult to measure differences in the readability of typefaces. 0:06:16.033,0:06:19.081 Also, reading requires familiarity: 0:06:19.081,0:06:23.076 It’s not like we’re born knowing what a letter R looks like; we need to practice. 0:06:23.076,0:06:28.037 And so if you learn with one style of the letter R, you’ll probably be faster with that one; 0:06:28.037,0:06:33.024 and if you learn with another style of the letter R, you’ll be faster with that one. 0:06:34.090,0:06:37.523 If even when we got past all those challenges, 0:06:37.523,0:06:41.026 it can be a little bit difficult to figure out exactly how you should measure this. 0:06:42.787,0:06:48.018 Well, I can’t go so far as to say that the serif hypothesis is definitively untrue; 0:06:48.018,0:06:53.026 what I can say is that there’s a lot of evidence to support that it actually is real. 0:06:53.026,0:06:56.679 And Alex Poole does a great job of describing this on his web site: 0:06:57.760,0:07:03.047 He writes that “What initially seemed a neat dichotomous question of serif versus sans serif 0:07:03.047,0:07:07.071 has resulted in a body of research consisting of weak claims and counter-claims, 0:07:07.071,0:07:10.653 and study after study with findings of ‘no difference’. 0:07:10.653,0:07:16.050 Is it the case that more than one hundred years of research has been marred by [repeated] methodological flaws, 0:07:16.050,0:07:21.041 or are serifs simply a typographical ‘red herring’?” 0:07:21.041,0:07:26.035 It does seem that mixed-case type like you get in a sentence — upper and lower mixed together — 0:07:26.035,0:07:29.773 is faster to read than all caps, presumably because 0:07:29.773,0:07:34.257 you get greater vertical variation with the ascenders and descenders in lowercase letters, 0:07:34.257,0:07:39.650 and that gives your eye more information as it’s reading. 0:07:39.650,0:07:45.083 Also, in general, proportional fonts seem to be faster than monospaced fonts, like a typewriter. 0:07:45.083,0:07:52.035 So, typewriter font[s] — slower to read — [but] that stuff only matters if you have to read a whole lot. 0:07:52.650,0:07:59.623 But the simplest summary is that, in practice, legibility simply amounts to what you’re accustomed to. 0:08:00.162,0:08:04.670 What do these words say? The bottom half is obscured. 0:08:04.670,0:08:08.996 As many of you guessed, “I am a jelly donut”. 0:08:09.011,0:08:13.472 How about this one here? Here the top half is obscured. 0:08:13.472,0:08:15.408 Seems a little harder? 0:08:15.408,0:08:19.027 “jfk spoke in berlin.” 0:08:19.027,0:08:24.715 Turns out that more information seems to be encoded in the top half of texts than in the bottom half. 0:08:25.191,0:08:27.450 And what does this say? 0:08:27.450,0:08:31.611 [I] bet many of you saw it as “THE CAT”, 0:08:31.611,0:08:36.039 and fewer people, “TAE CHT”. 0:08:36.039,0:08:42.287 And that’s because expectation plays a really important role in what we read. 0:08:42.287,0:08:44.029 And if you’re really perceptive, 0:08:44.029,0:08:52.633 you may have realized that those two middle letters are actually exactly the same letter, 0:08:52.633,0:08:57.051 so the only difference is what you’re expecting to see in each case. 0:08:57.051,0:09:01.055 Your prior probability influences your interpretation. 0:09:01.055,0:09:07.017 So, if you put all that together and return to our original question of “Which typeface should I use”, 0:09:07.017,0:09:09.078 the answer is “It depends.” 0:09:09.078,0:09:12.161 If you’re putting down a long block of text, 0:09:12.161,0:09:16.351 it’s best to use a typeface that many people will be familiar with; 0:09:16.367,0:09:21.455 and if you’re working online, use something that has a relatively high x-height. 0:09:21.455,0:09:25.084 On the other hand, if you’re making a logo or a sign, 0:09:25.084,0:09:29.046 or something that’s short and intended to be dramatic, 0:09:29.046,0:09:33.001 then you probably want to use something a little bit funkier as your typeface — 0:09:33.001,0:09:36.651 something that’s going to catch attention and be unique, memorable. 0:09:37.789,0:09:42.625 And typefaces — like everything in life — [build] up reputation. 0:09:42.625,0:09:46.694 So, over time, certain typefaces come to mean certain things. 0:09:46.694,0:09:50.910 And here’s a great example from Hoefler and Frere-Jones, writing on their blog. 0:09:50.910,0:09:56.033 They talk about how Baskerville seems like it’s out of a literary magazine 0:09:56.033,0:10:03.071 and Optima seems to remind us of cheap 1950’s hygiene products. 0:10:03.071,0:10:08.009 Here are two easy exercises you can use to improve your typographical eye: 0:10:08.009,0:10:14.046 The first one is: Look around you for all of the different ways that the same typeface gets deployed; 0:10:14.046,0:10:17.044 that will give you a sense of its range. 0:10:17.044,0:10:25.619 And the second one is: Look at how the same text, with different typefaces, really changes its meaning. 0:10:27.157,0:10:30.033 In this class we have a lot of ground to cover quickly, 0:10:30.033,0:10:33.071 and so unfortunately we can’t spend too much time on typography; 0:10:33.071,0:10:36.056 but it’s a fascinating subject, and if you’d like to learn more about this, 0:10:36.056,0:10:42.035 there are many great books and design resources online, and they’re growing rapidly. 0:10:42.035,0:10:48.005 Here are just a few that I think are particularly good.