Letter Spacing Polish

[00:00:00]
>> Jason: Now, the fit and finish part, they're really sorta polishing things up. These are some of the details that I think, if you've never studied typography, are very easy to overlook. But once you see them, you'll never unsee them. So what I'm gonna show you are some things about kerning which is the spacing between letters and ligatures.

[00:00:25]
So those are features of the open type specification, which has enabled us to use these things both in print and online. So if you take a look at Moby's Trip and A Whale of an Afflicted Tale, and we turn on the open type features, you'll see a few things.

[00:00:44]
Between the i and the p in trip, is this beautiful little ligature connecting them. In afflicted, the f, f, and l are joined together and the c and t is also joined together. So I'm gonna go back and look at this again. Just watch the word afflicted. See how much more elegant that is?

[00:01:04]
It just kinda pulls it together a little bit more, it becomes more of a unit. It may not be something that you want for your body copy to have the sorta more ornate ligatures there, but it really does make a difference, just having those details. And if you look at it in print, you'll see it everywhere.

[00:01:22]
So two fs together or an f and an I, f, f, and l, those are some of the more common ligatures that you would see in every day usage. A lot of fonts actually have that turned on by default now. So those things will actually be there. It is controllable with CSS, you can turn these things on or off.

[00:01:41]
Kerning is also something. So Moby's Trip up top, I'm gonna do this again. Watch the spacing between the letters. See how everything kinda came together a little bit better? Not everybody agrees with me, but I think browsers are actually kinda lousy at letter spacing. I think quite often, if you don't do anything, browsers will tend to set type very loosely and I think that that is also something that is a little uneven between them.

[00:02:12]
So when you do have open type enabled fonts and you can ensure that kerning is forced on, you'll get a much nicer layout. You may still end up deciding on larger headings to tighten the letter spacing just a little bit. Just using like a minus one pixel. That will kinda bring things together a little bit more.

[00:02:35]
That just helps large type form a little bit more cohesive a unit. If it's set large and the letters are really kinda spaced out, it becomes harder to read. It slows people down. Again, just another example of looking at initial caps. We've seen this one before. Just using CSS columns, you're able to kinda go from two down to one, just based on breakpoints.

[00:03:02]
The margins on the block quote down below, the size of the initial capital, all of those things are really easy to scale. There's some libraries out there, I work a lot with the Drupal content management system. Anybody else work with Drupal much? So there's a module called Typogrify that you can turn on and enable for a given input format, and it will do a few different things for you.

[00:03:31]
One of the ones that I really love is it will make sure that all of your quotation marks and apostrophes are correct. It replaces all the straight hash marks with proper quotation marks, the curly ones, just like they should be, without you ever having to do anything. It doesn't even need to have anybody touch it in the source when you're editing the content.

[00:03:52]
It handles it on the output side. It also does things, if you watch the end of that paragraph, enthusiastic support mean the world. As it gets narrower, you'll notice that, technically there's space for the word the on the line above, but it bumped down with the world down below because this module is adding a non-breaking space between the last two words of every paragraph.

[00:04:17]
Fixing orphans is one of those things that magazine editors will get up and jump up and down on their desk and hug you if you can actually fix this automatically across any screen size. That module and Drupal makes that really easy. It's really just turning something on. Recently I became the co-maintainer of that and we're working on some updates for Drupal 8.

[00:04:39]
So that's actually coming along a little bit. But that library is a PHP library that's been enabled in some WordPress modules, I know Aaron Gustafson, a while ago, made an expression engine plug in for it. Or you can actually just pull it in on your own, it's just PHP.

[00:04:56]
So you can build it into any other system. I also have in here, in a lot of these projects, widow tamer which is a really simple JavaScript library that you can define fixes for any HTML element you want and decide how many characters you want to have on any given line.

[00:05:15]
So that way you could apply it to headings if you want to make sure that you have a minimum of eight characters or something like that so you don't end up with one short word that gets bumped down to the next line. That one, it hesitate a little bit about that one because it's client side, and we already have lots of other JavaScript going on client side, but it's pretty light weight.

[00:05:37]
And so if you don't have access to using a module, adding something in like this for a blog or for some reading focused website really will improve the reading experience quite a bit.