Terminology

[00:00:00]
>> Sarah Drasner: You probably know about monospaced fonts, we use those all the time as a programmer. You might know its counterpart, which is proportional fonts which is not monospaced. The reason we call it monospaced is because every letter takes the same amount of space, whereas proportional, it's proportional to how big the letters are.

[00:00:19]
That's probably easily known. Kerning and no kerning, you've probably heard people talk about kerning, right? Kerning is the space between the letters and whether or not they kind of tuck and nest into each other appropriately or not. So kerning applied, and no kerning. So no kerning, they're just, here's a letter and a space for that letter, here's another letter.

[00:00:39]
But you can see how A and V would then look visually very far apart from each other and then probably to close for some of the other characters. Whereas kerning applied kind of compensates for that with your eye, so it looks a little bit more evenly balanced. Leading is a space up and down.

[00:00:57]
So kerning would be like letter spacing in CSS world, leading would be like line height in CSS world. The reason why we call it leading is because when you're typesetting a book, you use lead letters. And then in order to make the letters further apart from each other, you put a tiny little piece lead that's like a little strip, like you see right there in between those blocks.

[00:01:24]
So you'd add more leading, you're adding more lead literally. So some of these old things. So leading is the space between the baselines, ascender, midline, baseline, descender, that's for all of those letters. And [LAUGH] there's all these jokes, I love this XKCD one. If you really hate someone teach them to recognize bad kerning.

[00:01:46]
It's one of those things where before you know what it is, you don't really notice it, and once you do it's really bothersome. It's just one thing that can really drive you crazy. It's important to do, [LAUGH] to work with kerning well because you can make accidents happen if you don't.

[00:02:06]
So make sure that there's adequate spacing between your letters. If you're working with Photoshop or Illustrator, something like that. In order to change it from, basically it's always gonna assume you want metrics as the default, you see in the character palette. Switch to optical, and then it will be well kerned, it will kind of understand kerning better, of course, this doesn't translate to the web.

[00:02:32]
For the web, you pretty much have to look at whether the fontographer who made the font took that into consideration when they made it. But in Photoshop, if you're making something for print that works. So kerning encode letter-spacing, leading encode, line-height. And then there's also vertical alignment, whether or not you're aligning with the baseline, mid, things like that.

[00:02:57]
Widows and orphans, this is another thing that I probably shouldn't teach you, because you'll start to notice it everywhere. [LAUGH] A widow is when you have this one word that just kinda hangs out at the end of a paragraph. I used to do layout for magazines, and widows and orphans were what I worked on constantly.

[00:03:18]
An orphan is when you go to the next paragraph. Orphans really bother people, they don't know why. But it just doesn't, you're trying to read the paragraph and then ends really awkwardly because there's just another piece there. Widows are not as big of a deal, I think. If you have content that's generated from an API, you probably can't do anything about these things.

[00:03:42]
But if you do have some kind of text lockups or things that are kind of titles and things like that that you can work on, it's good to keep an eye on this stuff and make sure just knock it into place. So if I was working on this widow one, that it is, I would probably break after the it is.

[00:04:00]
You see that on the second line, how it kind of jets out? I would do a hard-break there and that would push that line out, so I would no longer have a widow. So widows and orphans, that what those look like.
>> Sarah Drasner: Yeah, again, more widows and orphans good versus bad, it actually is easier on your eyes to read without those widows and orphans hanging out there.

[00:04:25]
Ligatures, ligatures are different for code and code editors than they are for books and things. So there are some fonts that take these types of things in consideration. So if you you have the one on the right, they understand that if you have and f and an i next to each other that they should be joined and it would make more sense.

[00:04:45]
Then it kinda looks clumsy in the first example, they're just kind of glopped next to each other. Code ligatures are pretty cool and I actually really like them, some people don't like them. You can work with different symbols and it actually turns them into that symbol. So for instance, if you're making an arrow function, it would be an equal and an arrow, but it actually turns it into an arrow.

[00:05:09]
Or the one that I really love is the three equals becomes a solid block of three equals. Some people say that for them it's less legible, I think it's more legible. Everyone is gonna be, feel a little bit different about them. So if they're talking about, if you hear someone talking about their code editor, and ligatures, that's what they mean.

[00:05:31]
>> Sarah Drasner: I'm not going over all this terminology, don't worry. It's just in here in case you wanna get super nerdy, and you wanna dive in. Again, not gonna go over all of this, but if you wanna dive in.
>> Sarah Drasner: One thing that Burke's figured out a while ago is that you can't center things in the middle of a page and actually when I learned this I was, no way.

[00:05:54]
[LAUGH] And I went and opened up all of my books, and was, is this true? And it turns out that it is true. I opened up every single one, all of the text always has a bigger space on the bottom than the top. They center it in the middle of the page, and then they push the text up so that there's more space on the bottom.

[00:06:14]
Because if it's centered, it looks like the text is falling down. It doesn't look, it's like the circle for some reason. The circle needs a line, it needs to be outside the line in order to look visually consistent. This is another one of those things where if I took a book and I put the text right in the middle, you'd be, why is the text so low?

[00:06:35]
Go home and open up all your books, they all have way more space on the bottom than the top. And you can use that in your web designs too, although I don't know that it works the same way. In terms of font performance, this is something that you should care about.

[00:06:51]
Zach Leatherman writes a lot of materials about font performance, and he just has a blog that's full of really good materials on how to get the most out of font performance. I think I followed one of his blog posts on this giant application I was working with. I made the performance of the site better by two seconds, two seconds is a lot.

[00:07:15]
Completely shaved that off just by changing the way that we were loading the fonts in our fonts strategy. So definitely check out his writings about that. Peter Mueller took some of what Zach wrote, there's a lot of stuff that you have to do. So he created this thing called sub-font that kind of automates some of these tasks for you.

[00:07:39]
So definitely check out his work there, there's a lot of really good stuff in it. Robin Randall who I worked with at CSS Tricks has a newsletter all about typography. And he's super good at typography and he knows everything about typography and he should probably teach this section of this course.

[00:07:56]
He has newsletter about it, and it's a really great newsletter. He kind of muses on typography, and things he's seen, and he goes to conferences and all sorts of stuff. So if you're interested in type, he's someone to follow. When we're creating, remember how I was using Lorem text when I was using Emmet and I was just dumping some text in there as placeholder.

[00:08:16]
There's all sorts of ways of generating text, Bacon Ipsum, Hipster Ipsum, Cat Ipsum. By the way, Hipster Ipsum has some bad words, which I didn't realize until I was in the middle of a review with the CEO. So just letting you know. [LAUGH] They're like, does that say this?

[00:08:33]
I'm like [LAUGH] no, [LAUGH] HodorIpsum, [LAUGH] Pirate Ipsum, Slipsum to Samuel L Jackson Ipsum. [LAUGH] So there's a lot of options out there. So there's no need for your Lorem Ipsum to be super boring if you don't want it to be.