[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.09,0:00:05.63,Default,,0000,0000,0000,,Let’s take a look at the atoms of visual design: letterforms.
Dialogue: 0,0:00:05.63,0:00:09.70,Default,,0000,0000,0000,,This is the letter R, typeset in Gill Sans.
Dialogue: 0,0:00:09.70,0:00:13.88,Default,,0000,0000,0000,,Gill Sans was designed by Eric Gill and released in 1928.
Dialogue: 0,0:00:13.88,0:00:17.24,Default,,0000,0000,0000,,There’s a couple of things that I’d like to point out about this letter right here:
Dialogue: 0,0:00:17.24,0:00:23.02,Default,,0000,0000,0000,,One of them is that it has the perceptual characteristic of consistent weight all throughout;
Dialogue: 0,0:00:23.02,0:00:28.02,Default,,0000,0000,0000,,however, the actual thickness of the letter varies considerably over different parts.
Dialogue: 0,0:00:28.02,0:00:31.36,Default,,0000,0000,0000,,So, if you look at some points of the letter, like the bottom,
Dialogue: 0,0:00:33.08,0:00:38.00,Default,,0000,0000,0000,,you can see that they are much thicker than at other points in the letter.
Dialogue: 0,0:00:41.03,0:00:47.05,Default,,0000,0000,0000,,And what you see in these atoms is exactly what you’ll see throughout the entirety of graphic design,
Dialogue: 0,0:00:47.05,0:00:50.48,Default,,0000,0000,0000,,which is that we’re going for something that feels perceptually balanced —
Dialogue: 0,0:00:50.48,0:00:56.52,Default,,0000,0000,0000,,or may have perceptual uniformity — when the actuality may be quite different.
Dialogue: 0,0:00:56.52,0:01:03.07,Default,,0000,0000,0000,,This letter was also my very first assignment as a graphic design student at the Rhode Island School of Design:
Dialogue: 0,0:01:03.07,0:01:09.10,Default,,0000,0000,0000,,We had to draw this letter, one foot high, in black paint, on a white background.
Dialogue: 0,0:01:09.10,0:01:11.53,Default,,0000,0000,0000,,It may seem like a silly exercise,
Dialogue: 0,0:01:11.53,0:01:16.80,Default,,0000,0000,0000,,but it’s a great way to understand intimately the curves and strokes of the letterform,
Dialogue: 0,0:01:16.80,0:01:20.04,Default,,0000,0000,0000,,and it’s also really good at training both your eye and training your hand;
Dialogue: 0,0:01:20.04,0:01:25.06,Default,,0000,0000,0000,,Maybe it’s also a hazing ritual that I’ve just post-hoc rationalized.
Dialogue: 0,0:01:25.06,0:01:32.00,Default,,0000,0000,0000,,Anyhow, moving along, let’s look at the different parts of a typeface.
Dialogue: 0,0:01:32.00,0:01:38.01,Default,,0000,0000,0000,,One term you may be familiar with from using on your computer is the point size or the font size.
Dialogue: 0,0:01:38.01,0:01:40.06,Default,,0000,0000,0000,,And what’s notable about this is
Dialogue: 0,0:01:40.06,0:01:46.03,Default,,0000,0000,0000,,it seems like a number that ought to be set in stone and consistent across all typefaces,
Dialogue: 0,0:01:46.03,0:01:48.00,Default,,0000,0000,0000,,but it’s really not.
Dialogue: 0,0:01:48.00,0:01:53.00,Default,,0000,0000,0000,,Most of our terminology from typefaces comes from when they were set in lead,
Dialogue: 0,0:01:53.00,0:02:00.00,Default,,0000,0000,0000,,and the point size of a typeface really just means the height of the lead block that the type was set in,
Dialogue: 0,0:02:00.00,0:02:07.03,Default,,0000,0000,0000,,which has some relationship to the actual letter size, but is not completely consistent.
Dialogue: 0,0:02:10.02,0:02:12.62,Default,,0000,0000,0000,,For example, you can see, for the same point size,
Dialogue: 0,0:02:12.62,0:02:16.02,Default,,0000,0000,0000,,here’s a letter S in Gill Sans, and a letter S in Calibri,
Dialogue: 0,0:02:16.02,0:02:22.39,Default,,0000,0000,0000,,and you can that the Calibri S is lower than the Gill Sans S.
Dialogue: 0,0:02:26.76,0:02:29.00,Default,,0000,0000,0000,,Our second term is leading.
Dialogue: 0,0:02:29.00,0:02:32.52,Default,,0000,0000,0000,,If we have solid blocks of lead type that form the letters,
Dialogue: 0,0:02:32.52,0:02:39.02,Default,,0000,0000,0000,,the spacing that we get between the lines was achieved by putting thin strips of lead in between the lines,
Dialogue: 0,0:02:39.02,0:02:42.02,Default,,0000,0000,0000,,and that was called the leading.
Dialogue: 0,0:02:42.02,0:02:47.02,Default,,0000,0000,0000,,It’s customary to have 20% of your font size as your leading;
Dialogue: 0,0:02:47.02,0:02:51.02,Default,,0000,0000,0000,,and so, if in your word processor you’ve set 10-point type,
Dialogue: 0,0:02:51.02,0:02:59.04,Default,,0000,0000,0000,,it will usually automatically add an extra 2 points of spacing to put 12 points in between each line.
Dialogue: 0,0:02:59.04,0:03:05.04,Default,,0000,0000,0000,,The height of the lowercase letters is called the x-height, from the “x”.
Dialogue: 0,0:03:05.04,0:03:10.03,Default,,0000,0000,0000,,Some typefaces have a higher x-height, like Lucida Bright or Georgia;
Dialogue: 0,0:03:10.03,0:03:13.69,Default,,0000,0000,0000,,other typefaces have a lower x-height, like Baskerville.
Dialogue: 0,0:03:13.69,0:03:16.08,Default,,0000,0000,0000,,And this is important for design — especially online —
Dialogue: 0,0:03:16.08,0:03:23.07,Default,,0000,0000,0000,,because typefaces that have a higher x-height will be easier to read at smaller point sizes
Dialogue: 0,0:03:23.07,0:03:27.56,Default,,0000,0000,0000,,and on low resolution devices like most screens.
Dialogue: 0,0:03:27.56,0:03:31.08,Default,,0000,0000,0000,,Conversely, typefaces with a low x-height, like Baskerville,
Dialogue: 0,0:03:31.08,0:03:37.05,Default,,0000,0000,0000,,are used when you’re trying to give elegance, or a “Belle Époque” feel to something.
Dialogue: 0,0:03:37.05,0:03:39.78,Default,,0000,0000,0000,,And sprouting up and dropping down from the x-height
Dialogue: 0,0:03:39.78,0:03:44.96,Default,,0000,0000,0000,,are the ascenders — like the top stem of the h and the dot of the i —,
Dialogue: 0,0:03:44.96,0:03:49.56,Default,,0000,0000,0000,,and your descenders — like the y, p, g.
Dialogue: 0,0:03:49.56,0:03:55.21,Default,,0000,0000,0000,,In general, a typeface that has a low x-height will tend to have long ascenders and descenders,
Dialogue: 0,0:03:55.21,0:04:01.34,Default,,0000,0000,0000,,and a typeface that has a tall x-height will tend to have more squashed ascenders and descenders.
Dialogue: 0,0:04:05.75,0:04:08.08,Default,,0000,0000,0000,,Typefaces can also vary in their weight.
Dialogue: 0,0:04:08.08,0:04:15.46,Default,,0000,0000,0000,,So here have an example of light on the left, regular or roman in the middle, and bold on the right.
Dialogue: 0,0:04:15.46,0:04:19.09,Default,,0000,0000,0000,,Sometimes you’ll see weights in between like demibold or semibold,
Dialogue: 0,0:04:19.09,0:04:23.08,Default,,0000,0000,0000,,and, even to the further to the right of bold, you’ll see black.
Dialogue: 0,0:04:23.08,0:04:25.09,Default,,0000,0000,0000,,Number six on the list are serifs.
Dialogue: 0,0:04:25.09,0:04:33.07,Default,,0000,0000,0000,,Serifs are the doohickeys on the end of letters that give them that chiselled look.
Dialogue: 0,0:04:33.07,0:04:35.04,Default,,0000,0000,0000,,[There are] a couple more that are bonus:
Dialogue: 0,0:04:35.04,0:04:39.09,Default,,0000,0000,0000,,Some faces (typefaces) will also include small caps — which sure are exactly what they sound like,
Dialogue: 0,0:04:39.09,0:04:41.76,Default,,0000,0000,0000,,smaller versions of capital[s and] numbers.
Dialogue: 0,0:04:41.76,0:04:44.73,Default,,0000,0000,0000,,These can be used as headers, or they can also be used
Dialogue: 0,0:04:44.73,0:04:50.03,Default,,0000,0000,0000,,to put acronyms and other capital texts inside a block of body text.
Dialogue: 0,0:04:51.59,0:04:53.54,Default,,0000,0000,0000,,And one thing that you may not know is —
Dialogue: 0,0:04:53.54,0:04:59.68,Default,,0000,0000,0000,,just like letters come in uppercase and lowercase, numbers do too.
Dialogue: 0,0:04:59.68,0:05:01.09,Default,,0000,0000,0000,,These numbers, set in Neutraface,
Dialogue: 0,0:05:01.09,0:05:06.03,Default,,0000,0000,0000,,provide an example of something that has just small ascenders and descenders;
Dialogue: 0,0:05:06.03,0:05:09.46,Default,,0000,0000,0000,,in some cases these can be more dramatic.
Dialogue: 0,0:05:09.46,0:05:11.04,Default,,0000,0000,0000,,Lowercase numbers are useful
Dialogue: 0,0:05:11.04,0:05:17.00,Default,,0000,0000,0000,,when you want numbers to fit in with a larger block of text and not stand out.
Dialogue: 0,0:05:17.00,0:05:20.05,Default,,0000,0000,0000,,One of the most common questions I get asked about graphic design is:
Dialogue: 0,0:05:20.05,0:05:22.06,Default,,0000,0000,0000,,“Which typeface should I use?”
Dialogue: 0,0:05:22.06,0:05:24.06,Default,,0000,0000,0000,,And a lot of people have heard a story
Dialogue: 0,0:05:24.06,0:05:28.08,Default,,0000,0000,0000,,where serif typefaces are generally recommended for body text
Dialogue: 0,0:05:28.08,0:05:32.08,Default,,0000,0000,0000,,and sans serif typefaces are recommended for headers.
Dialogue: 0,0:05:32.08,0:05:36.96,Default,,0000,0000,0000,,And that’s, on the whole, not bad advice.
Dialogue: 0,0:05:36.96,0:05:41.64,Default,,0000,0000,0000,,There is an often-repeated claim that the reason that this is a good heuristic
Dialogue: 0,0:05:41.64,0:05:47.00,Default,,0000,0000,0000,,is because serif typefaces, with those doohickeys at the end,
Dialogue: 0,0:05:47.00,0:05:52.05,Default,,0000,0000,0000,,give your eyes something to latch onto, and consequently they’re easier to read.
Dialogue: 0,0:05:52.05,0:05:55.05,Default,,0000,0000,0000,,It’s an interesting hypothesis.
Dialogue: 0,0:05:55.05,0:05:58.01,Default,,0000,0000,0000,,So I looked into this a little bit for all of you,
Dialogue: 0,0:05:58.01,0:06:00.08,Default,,0000,0000,0000,,and there’s some challenges in trying to figure this out.
Dialogue: 0,0:06:00.08,0:06:07.09,Default,,0000,0000,0000,,For starters, individual differences in readers dwarf any manipulation effects of the typeface —
Dialogue: 0,0:06:07.09,0:06:09.71,Default,,0000,0000,0000,,like, some people read a whole lot faster than others,
Dialogue: 0,0:06:09.71,0:06:16.03,Default,,0000,0000,0000,,and so it’s difficult to measure differences in the readability of typefaces.
Dialogue: 0,0:06:16.03,0:06:19.08,Default,,0000,0000,0000,,Also, reading requires familiarity:
Dialogue: 0,0:06:19.08,0:06:23.08,Default,,0000,0000,0000,,It’s not like we’re born knowing what a letter R looks like; we need to practice.
Dialogue: 0,0:06:23.08,0:06:28.04,Default,,0000,0000,0000,,And so if you learn with one style of the letter R, you’ll probably be faster with that one;
Dialogue: 0,0:06:28.04,0:06:33.02,Default,,0000,0000,0000,,and if you learn with another style of the letter R, you’ll be faster with that one.
Dialogue: 0,0:06:34.09,0:06:37.52,Default,,0000,0000,0000,,If even when we got past all those challenges,
Dialogue: 0,0:06:37.52,0:06:41.03,Default,,0000,0000,0000,,it can be a little bit difficult to figure out exactly how you should measure this.
Dialogue: 0,0:06:42.79,0:06:48.02,Default,,0000,0000,0000,,Well, I can’t go so far as to say that the serif hypothesis is definitively untrue;
Dialogue: 0,0:06:48.02,0:06:53.03,Default,,0000,0000,0000,,what I can say is that there’s a lot of evidence to support that it actually is real.
Dialogue: 0,0:06:53.03,0:06:56.68,Default,,0000,0000,0000,,And Alex Poole does a great job of describing this on his web site:
Dialogue: 0,0:06:57.76,0:07:03.05,Default,,0000,0000,0000,,He writes that “What initially seemed a neat dichotomous question of serif versus sans serif
Dialogue: 0,0:07:03.05,0:07:07.07,Default,,0000,0000,0000,,has resulted in a body of research consisting of weak claims and counter-claims,
Dialogue: 0,0:07:07.07,0:07:10.65,Default,,0000,0000,0000,,and study after study with findings of ‘no difference’.
Dialogue: 0,0:07:10.65,0:07:16.05,Default,,0000,0000,0000,,Is it the case that more than one hundred years of research has been marred by [repeated] methodological flaws,
Dialogue: 0,0:07:16.05,0:07:21.04,Default,,0000,0000,0000,,or are serifs simply a typographical ‘red herring’?”
Dialogue: 0,0:07:21.04,0:07:26.04,Default,,0000,0000,0000,,It does seem that mixed-case type like you get in a sentence — upper and lower mixed together —
Dialogue: 0,0:07:26.04,0:07:29.77,Default,,0000,0000,0000,,is faster to read than all caps, presumably because
Dialogue: 0,0:07:29.77,0:07:34.26,Default,,0000,0000,0000,,you get greater vertical variation with the ascenders and descenders in lowercase letters,
Dialogue: 0,0:07:34.26,0:07:39.65,Default,,0000,0000,0000,,and that gives your eye more information as it’s reading.
Dialogue: 0,0:07:39.65,0:07:45.08,Default,,0000,0000,0000,,Also, in general, proportional fonts seem to be faster than monospaced fonts, like a typewriter.
Dialogue: 0,0:07:45.08,0:07:52.04,Default,,0000,0000,0000,,So, typewriter font[s] — slower to read — [but] that stuff only matters if you have to read a whole lot.
Dialogue: 0,0:07:52.65,0:07:59.62,Default,,0000,0000,0000,,But the simplest summary is that, in practice, legibility simply amounts to what you’re accustomed to.
Dialogue: 0,0:08:00.16,0:08:04.67,Default,,0000,0000,0000,,What do these words say? The bottom half is obscured.
Dialogue: 0,0:08:04.67,0:08:08.100,Default,,0000,0000,0000,,As many of you guessed, “I am a jelly donut”.
Dialogue: 0,0:08:09.01,0:08:13.47,Default,,0000,0000,0000,,How about this one here? Here the top half is obscured.
Dialogue: 0,0:08:13.47,0:08:15.41,Default,,0000,0000,0000,,Seems a little harder?
Dialogue: 0,0:08:15.41,0:08:19.03,Default,,0000,0000,0000,,“jfk spoke in berlin.”
Dialogue: 0,0:08:19.03,0:08:24.72,Default,,0000,0000,0000,,Turns out that more information seems to be encoded in the top half of texts than in the bottom half.
Dialogue: 0,0:08:25.19,0:08:27.45,Default,,0000,0000,0000,,And what does this say?
Dialogue: 0,0:08:27.45,0:08:31.61,Default,,0000,0000,0000,,[I] bet many of you saw it as “THE CAT”,
Dialogue: 0,0:08:31.61,0:08:36.04,Default,,0000,0000,0000,,and fewer people, “TAE CHT”.
Dialogue: 0,0:08:36.04,0:08:42.29,Default,,0000,0000,0000,,And that’s because expectation plays a really important role in what we read.
Dialogue: 0,0:08:42.29,0:08:44.03,Default,,0000,0000,0000,,And if you’re really perceptive,
Dialogue: 0,0:08:44.03,0:08:52.63,Default,,0000,0000,0000,,you may have realized that those two middle letters are actually exactly the same letter,
Dialogue: 0,0:08:52.63,0:08:57.05,Default,,0000,0000,0000,,so the only difference is what you’re expecting to see in each case.
Dialogue: 0,0:08:57.05,0:09:01.06,Default,,0000,0000,0000,,Your prior probability influences your interpretation.
Dialogue: 0,0:09:01.06,0:09:07.02,Default,,0000,0000,0000,,So, if you put all that together and return to our original question of “Which typeface should I use”,
Dialogue: 0,0:09:07.02,0:09:09.08,Default,,0000,0000,0000,,the answer is “It depends.”
Dialogue: 0,0:09:09.08,0:09:12.16,Default,,0000,0000,0000,,If you’re putting down a long block of text,
Dialogue: 0,0:09:12.16,0:09:16.35,Default,,0000,0000,0000,,it’s best to use a typeface that many people will be familiar with;
Dialogue: 0,0:09:16.37,0:09:21.46,Default,,0000,0000,0000,,and if you’re working online, use something that has a relatively high x-height.
Dialogue: 0,0:09:21.46,0:09:25.08,Default,,0000,0000,0000,,On the other hand, if you’re making a logo or a sign,
Dialogue: 0,0:09:25.08,0:09:29.05,Default,,0000,0000,0000,,or something that’s short and intended to be dramatic,
Dialogue: 0,0:09:29.05,0:09:33.00,Default,,0000,0000,0000,,then you probably want to use something a little bit funkier as your typeface —
Dialogue: 0,0:09:33.00,0:09:36.65,Default,,0000,0000,0000,,something that’s going to catch attention and be unique, memorable.
Dialogue: 0,0:09:37.79,0:09:42.62,Default,,0000,0000,0000,,And typefaces — like everything in life — [build] up reputation.
Dialogue: 0,0:09:42.62,0:09:46.69,Default,,0000,0000,0000,,So, over time, certain typefaces come to mean certain things.
Dialogue: 0,0:09:46.69,0:09:50.91,Default,,0000,0000,0000,,And here’s a great example from Hoefler and Frere-Jones, writing on their blog.
Dialogue: 0,0:09:50.91,0:09:56.03,Default,,0000,0000,0000,,They talk about how Baskerville seems like it’s out of a literary magazine
Dialogue: 0,0:09:56.03,0:10:03.07,Default,,0000,0000,0000,,and Optima seems to remind us of cheap 1950’s hygiene products.
Dialogue: 0,0:10:03.07,0:10:08.01,Default,,0000,0000,0000,,Here are two easy exercises you can use to improve your typographical eye:
Dialogue: 0,0:10:08.01,0:10:14.05,Default,,0000,0000,0000,,The first one is: Look around you for all of the different ways that the same typeface gets deployed;
Dialogue: 0,0:10:14.05,0:10:17.04,Default,,0000,0000,0000,,that will give you a sense of its range.
Dialogue: 0,0:10:17.04,0:10:25.62,Default,,0000,0000,0000,,And the second one is: Look at how the same text, with different typefaces, really changes its meaning.
Dialogue: 0,0:10:27.16,0:10:30.03,Default,,0000,0000,0000,,In this class we have a lot of ground to cover quickly,
Dialogue: 0,0:10:30.03,0:10:33.07,Default,,0000,0000,0000,,and so unfortunately we can’t spend too much time on typography;
Dialogue: 0,0:10:33.07,0:10:36.06,Default,,0000,0000,0000,,but it’s a fascinating subject, and if you’d like to learn more about this,
Dialogue: 0,0:10:36.06,0:10:42.04,Default,,0000,0000,0000,,there are many great books and design resources online, and they’re growing rapidly.
Dialogue: 0,0:10:42.04,0:10:48.00,Default,,0000,0000,0000,,Here are just a few that I think are particularly good.