Typography 101

[00:00:00]
>> Jason: I wanted to start with just some basic ideas about what we mean when we say typography and then how you apply that qualifier whether or not it's any good. So at its simplest, typography is simply deciding and putting into practice what type you are using in a given project.

[00:00:22]
That's the start. But you need to make some decisions about how you're using it. So in this example from Keith Houston's book about the book, he's made some decisions about initial capital, the illustration, the specific type face that he's using, how we're setting it. So he's justified that type, meaning, it's got an even left and right edge.

[00:00:48]
If I were to say, it's left justified, drag right. That would mean it would be a little bit uneven on the right hand side. That's how most books tend to be set because that keeps the space in-between words a little bit more even. He's using hyphenation, so that you can ensure that as words break, the spacing stays a little bit more even.

[00:01:10]
Those are all things that are doable on the web. And he's also made some decisions about the line height, or the space between each line of text. And all of those things, including even that mark between this and the next section, that is a common typographic convention to insert something between one section of text and another.

[00:01:32]
So those are all decisions that Keith made when he was designing this book, and thinking through what is the system. Every chapter is going to look like this. There is an illustration, a large initial capital, it's set at three stories, so it's the height of three lines of text, and then everything wraps around.

[00:01:52]
He's got a line height that's probably, roughly one and a half times the size of the type itself. That's a fairly common starting point. And then he's using justification and hyphenation. So those are the rules, those are the typographic conventions that he settled on for this particular example.

[00:02:10]
If we look at this web site here you can see there are certain other aspects of typography that are coming into play and one of that is, type face choice that relates back to publication and the brand. So whether or not you read the New Yorker, there is a good chance that you've seen that typeface before.

[00:02:30]
Even if I blocked the top of the page, you'd have a good chance of knowing what publication it is. So that's the power of branding and type. The decisions that are made there about hierarchy and size, and you can see that there's a few different ways that they've set this up.

[00:02:47]
In some cases it's all caps, but there are different sizes. In some cases they're using italics. There's sans serif type going across for the navigation. All of those are decisions about hierarchy and attention that you want any particular element to have and you'll notice that just given the way the web works, things stack down.

[00:03:13]
So they try not to get too hung up on some of these things that might break a little bit weirdly. But that daily comment on the left with China being alone on the last line, that's one of those things that in print, no editor would let slide. It's one of the things that's harder for people to control on the web.

[00:03:33]
It's not impossible it just takes some thought at the point where you're creating the system. And again this is where design systems and typographic systems come into play. Where you can put some of these things in place, baked into the CSS, and the JavaScript for the site itself.

[00:03:51]
So that it's not about what you do during the content publishing process, it's just always there any time you create a new story, any time you publish new content these rules get applied. That's the beauty of CSS. We want to make sure that all the things that we're doing today are not things that require that you go wrap the first letter with a span and add a specific class or anything like that.

[00:04:13]
None of that stuff is necessary. And some of the other things that you can get out of great typography are a reminiscence to a time or a place. So this is not an old piece of work. It certainly doesn't date back to the 20's but it feels like it.

[00:04:34]
Because of the choices that have been made in the typography. So when you look at this, now this is for something that, well it's 1990, so not that new, but certainly not as old as the feeling that you get from looking at this. That's the power of typography and typeface choice.

[00:04:53]
It can evoke a place in time. It can evoke a particular style. It can give you a feeling, even if I say, a jazz poster, you're probably gonna get an image of musical notes in a particular sort of whimsical way of setting type. Or if I say in a western, or like the old west, you might have something else that comes to mind.

[00:05:13]
Those letter forms are very powerful ways for us to make an emotional connection. Between the viewer and the content or the company that you're trying to represent. Now this one is an example of another page that we're going to be looking at playing around with. I did my best to try and create a typography for this that is reminiscent of something written in the 30's.

[00:05:40]
And I don't know that it's entirely successful, but I think looking at some of the covers and other things in context, I think it comes relatively close. But it's got a lot of similar techniques in terms of the initial capital, some of the decisions about line length and size, and relative hierarchy.

[00:05:59]
And you can see how it scales nicely going from one screen size to the other. A lot of these things still work pretty nicely, and that's what I mean about being able to do these things on screen, as well as, or in some cases, even better than you can necessarily do in print.

[00:06:19]
One of the things that is a little bit harder to notice here, I'm gonna show it in greater detail. But if you look at the headline on the left, and look at the lowercase y in crystal, and the lower case g at the end of printing. Look at the depth of the descenders.

[00:06:36]
The parts of the character that drop down below. And then look at the headline on the right, and what you'll notice is that one, they're a little bit thicker, so you don't lose the fine detail when it gets physically smaller and they're also shallower so they don't collide.

[00:06:54]
And if I didn't apply some of the things we can do with variable fonts, we wouldn't get as nice a headline. And if we were doing this in print, where we don't have access to some of these features, I wouldn't be able to set the headline that tightly on a small size.

[00:07:10]
So, this is where we're getting into some things that are actually possible because we are working on the web. And I think, that's really powerful, and really interesting it's far a point in time and place, as someone who really loves type, I can actually do my best work here, better than I can do on paper.