Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

3.1 Kerning.js

Not all fonts are created equal, and some web fonts honestly just don’t do a very good job of kerning. In this lesson, you will learn how to use the Kerning.js library to specify letter-by-letter kerning for your headings.

Relevant Links

3.1 Kerning.js

Hello and welcome back to Essential JavaScript Libraries for Web Typography. In this section of our course, I wanna talk about a few JavaScript libraries that give us character by character control over our typography. We're gonna talk about how to control the kerning or the spacing between any two individual letters in our text. As well as, later on, we're gonna talk about how to animate our text one letter at a time using different frameworks. So we're gonna start in this particular lesson talking about the Kerning.js library, which does just what it sounds like and then some. So first of all it allows you to apply some fine tuned kerning to your typography, kerning that you couldn't get with CSS. With CSS you have control over letter spacing, but that's gonna change the spacing between all of your letters in your paragraph or in your heading. But with Kerning.js, you can specify letter by letter what that spacing is going to look like. And then we'll also discover, as we move forward, that it has a few other things as well. So you can learn more about Kerning js as at kerningjs.com and all you really need to do as far as JavaScript is concerned is to include the script tag on your page. Everything else will be taken care of. We don't even have to type in a line of JavaScript to activate it. All we have to do is to include that script. So if we jump over to CodePen, I've got our starting pen opened up, and you can find the link for that in your course notes for this lesson. And once you've got that opened up, go ahead and click on Fork to create a new copy of it. And once that opens up, I'm gonna click on the Settings tab, so we can take a look at our settings. In our CSS you'll notice that I'm using a Google font called Able. And then in our JavaScript tab you'll notice that we'll using jQuery as well as the Kerning.js framework. So I'm gonna save that and close it. And again, we don't have to do anything in our JavaScript. We don't have to worry about our JavaScript window at all, because just by including that script tag, we're gonna have access to some extra CSS rules or properties that we didn't have before. So in this lesson in particular, I wanna take a look at this spacing between our letters for our headline here. And if we go to our HTML, we can see it's just an h1 with a class of main-title. So if we go to our CSS, you'll see we've already created a main-title rule here, but all we've done so far is I've set the font size to 60 pixels. But just looking at this font from a distance, even if you don't know a lot about typography, you can probably figure out what some of the problems are with it. And mainly I'm looking at the spacing between the letters. First of all, you can see right away that the r and the f are right up against each other. You can hardly tell that that's two separate letters. The x and t are really closed together as well, but the capital T next to the e, it looks like there's a lot of space between those two. So in this lesson, I wanna talk about how we can use Kerning.js to specify the spacing between each of these letters in order to get us closer to what we would expect to see with a block of a text like this. We want it to read a little bit better. So what this Kerning.js framework does for us, is it gives us another CSS property that we can use. And all of the CSS properties that Kerning.js adds for us start with a hyphen. And the particular property we're looking at in this lesson is called -letter-kern. And the way this property works is we're going to enter in a series of numbers, or series of pixel sizes that are going to determine the spacing between each of the letters. So for our very first one I'm gonna type -6px. And you'll notice I'm just gonna end it there with a semi-colon. Now one of the difficulties of using this particular framework or library within CodePen is that it doesn't always automatically update. So I'm going to save our new forked version here, and then I'm just going to reload the whole page. And now if we take a look between the capital T and the e, we see that they're a lot closer together than they were before. And if we were to right-click here and inspect that element, we could take a look at it in HTML and we can see that this Kerning.js framework has added span tags around each of these letters. So once we apply one of these rules to a block of text, one of these rules that are specific to Kerning.js, or one of these properties I should say. Then it will wrap each of those letters in span tags so that we can gain finer tuned control over each of those letters. So, we typed in -6px and that, you'll notice that that didn't change the spacing of all of our letters. It only changed the spacing of this very first letter. So we're gonna have one of these entries for every single letter in our heading. So this -6px just affects the T and whatever letter is directly to the right of that T. So if we wanted to adjust the spacing between the e and the x, we could bring that down a little bit as well. We wouldn't need to bring that one down quite as much, but maybe just nudge that x to the left one pixel. So after this -6px, we would say -1px, and that will affect only the spacing between the e and the x. So we can save that and refresh our page, and we can see the effect that that had there. So we've got the t and the e taken care of, and as we look through the rest of this heading we can see that maybe we need a little more space after the x, possibly a little less between the p and the e, and definitely some more space between the r in the f. Now normally, this would require a bunch of experimentation, but since I've already done that experimentation, I'm just gonna enter those values here. So between the x and the t, we're going to add 2px of spacing. After the t, we don't really need to worry about the kerning there because there's a space after the t. So if you're just going to leave it alone and let it use the default kerning for that particular letter, you would just type in the number 0. Let's expand this out a little bit more. So the t has a kerning value of 0, so it's not gonna change. Next is the p, which again, we're affecting the spacing to the right of whichever letter we're talking about. So when we're talking about the p, we're talking about the space between the p and the e. So we might wanna pull that e over to left a little bit. So, for that p, I'm gonna set -2px, space, our next one is going to affect the spacing between the e and the r, which is fine. So I'm gonna set that to 0 as well. Then between the r and the f, I'm gonna set that to 4px. Between the f and the e I might add 2px there, and then for our last three letters, they all look pretty good, so I'm gonna set those to 0. So now we're going to take one last look at our text before we refresh the page, and then I'm gonna save that. And refresh, and there we go. The first thing we'll notice is that the space between the r and the f is already looking a lot better, because we can now tell that those are two separate letters. But you might go in and make some more tweaks to this, to make it look a little bit better, or maybe even decrease the space after that lowercase f. But you get the basic idea. You wouldjust include a string of numbers here, and each one of these numbers represents the space to the right of whichever letter we're talking about. So you should have the same number of entries here as you have letters in your heading. So again, that's how you can use Kerning.js to gain character by character control over the kerning in your text. Thank you for watching, and I'll see you in the next lesson.

Back to the top