Kerning Live Web Type With jQuery and Lettering.js

Yesterday we published an article outlining Eight Simple and Useful Tips for Kerning Type. This mostly focused on the basics of kerning: what it is, how it works, letter pairs to keep an eye on, etc.

Today we’re following that up with a discussion on how to use Lettering.js to kern your web type. Don’t worry, it’s much easier than you think!

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

Kerning Web Type: A Losing Battle

Typography on the web has come a long way in recent years. It used to be the case that there were only a handful of “safe” fonts used on any given website. These days, with options like Typekit and Google Web Fonts, you can achieve cross-browser, live, and fully selectable text using hundreds of different fonts.

As a consequence, web designers have fallen head over heels for type and can’t get enough of it. Unfortunately, with all the progress that has been made with embedding fonts via CSS, there’s still a key ingredient missing from the typographer’s toolbox: kerning.

It’s nearly impossible to structure well-designed headlines without control over kerning. There are in fact a few spacing options in your CSS arsenal, but they’re really ineffective for kerning. Let’s take a brief look at how these work.

Letter Spacing

If you Google “CSS Kerning”, you get a bunch of articles that inform you that applying “letter-spacing” to a given selector allows you to kern your type. This is actually inaccurate. Here’s an image from yesterday’s article that illustrates what I mean.

screenshot

As you can see, kerning affects the spacing between two specific letters, tracking affects the uniform amount of spacing between all the letters and leading affects the vertical space between lines. With this in mind, let’s take a look at what effect the “letter-spacing” property has on some text.

h2 {font-size: 6em; letter-spacing: .3em; }

screenshot

As you can see, the “letter-spacing” property clearly affects tracking, not kerning. Applying any given letter-spacing value changes the spacing across every letter in the word, line or paragraph.

Using Letter Spacing to Kern

To be fair, the statement in the previous section is a little simplified. In reality, the letter-spacing property applies to whatever letters are targeted with your selector. Because of this, the “h2” selectors affects everything in the header.

If we really want to get nasty, we could go adding extra markup to achieve true kerning with letter-spacing. This would involve the use of spans in your HTML.

<h2><span>K</span>erning</h2>

span {letter-spacing: -.1em; }

Obviously, this method is quite undesirable because of the extra markup. This is especially true if you need to kern multiple letters. The results are disastrous to the readability of your code.

<h2><span>K</span>e<span>r</span>ni<span>n</span>g</h2>

Word Spacing

Another CSS property that deals with text spacing is “word-spacing.” Once again, this is a cool property, but it doesn’t help us much in our quest to kern. This does exactly what it sounds like it does: adjusts the size of the space between your words.

h2 {font-size: 6em; word-spacing: .5em; }

screenshot

Meet Lettering.js

As you can see, current CSS kerning solutions pretty much suck. As far as I can tell, there’s really no good way to go about it without seriously messing up your markup.

Fortunately, there’s a free jQuery extension called “Lettering.js” that opens up a ton of options for easily styling web typography.

screenshot

What Does It Do?

Lettering.js wasn’t created solely with kerning in mind, but is instead a tool that makes it easy to target individual letters, words or lines in your CSS. This in turn opens up the possibility for a lot of different effects, including kerning!

As you can imagine, once you’re easily able to target specific letters in CSS, you can use margins or other layout properties to position and style everything exactly how you want it. Kern letters, apply different colors and rotations; go nuts!

How Does It Work?

To use Lettering.js, first stop by GitHub and grab the free download. Also make sure you include the latest version of jQuery.

Next, decide what you want to target. In most cases, this is going to be a headline or some other small piece of important text. You pretty much never want to go kerning an entire paragraph!

Let’s say we want to target an “h2” tag as in previous examples, here’s our no nonsense HTML markup:

<h2>Try the LAVA</h2>

Why did I use such a nonsensical sentence? Because the default kerning for this headline is a train wreck. Take a look at how the browser renders this type.

screenshot

As you can see, with an example this bad, it’s clear that we at least occasionally need some solution for kerning adjustments. Fortunately, we have our secret weapon.

To leverage the power of Lettering.js. simply insert the following code snippet into your code. You need only change the “h2” portion if you want to target something else.

  $(document).ready(function() {
    $("h2").lettering();
  });

With this in place, the JavaScript magic runs its course and essentially transforms our clean code into something more like the ugliness we saw with the letter-spacing trick. However, keep in mind that our source HTML is being transformed only when the user loads the page, our actual source file stays free of all of the span tags. However, when the page is loaded, it’s transformed into this:

<h2>
  <span class="char1">T</span>
  <span class="char2">r</span>
  <span class="char3">y</span>
  <span class="char4"> </span>
  <span class="char5">t</span>
  <span class="char6">h</span>
  <span class="char7">e</span>
  <span class="char8"> </span>
  <span class="char9">L</span>
  <span class="char10">A</span>
  <span class="char11">V</span>
  <span class="char12">A</span>
</h2>

This step is all Lettering.js takes care of for us. Armed with those class names, we can now do what we want with each letter in CSS.

Kerning

Jumping over to our CSS, we can easily target any of the classes that are automatically generated by Lettering.js. For instance, let’s say we want to work on the “AV” letter pairing. To do this, we count over to the “V” (the 11th letter) and move it over with the following code.

.char11 {margin-left: -0.2em}

Note that you could still use the letter-spacing property if you feel it’s more correct, here you would target the “A” instead of the “V” though.

.char10 {letter-spacing: -0.2em}

Either way, with very little work, we’ve achieved the effect that we want!

screenshot

Make Kerning Even Easier with Kern.js

Lettering.js is incredibly easy to implement and use, but kerning can still get a little tedious as you have to continuously make adjustments in your code and then refresh your preview to see if the adjustment was too much, too little or just right. Fortunately, we can use yet another free tool to help us out.

Kern.js isn’t a library or extension, but rather more of a web app that allows us to visually kern type like we would in Photoshop or Illustrator.

screenshot

To use this tool, stop by the Kern.js site and install the bookmarklet. Then, open up your test web page in your browser and hit the bookmarklet. From here, anything with Lettering.js applied will become interactive, meaning you can simply click and drag all your letters into place.

screenshot

Once you’re done, click “Finish Editing” and the necessary CSS will automatically be generated. Just copy and paste this into your code and you’re good to go!

screenshot

Pros and Cons

Obviously, this method for kerning web type isn’t without its faults. It is however, the best solution I’ve come across so if you know of anything better, leave a comment below. In the mean time, I recommend checking out Lettering.js and Kerning.js for your web kerning needs.

The benefits here are clear, you get an extremely simple and easy to implement solution for kerning live typography on the web. The text remains perfectly selectable and you don’t have to muddy up your HTML markup with a bunch of nasty span tags. They are added, but in an after the fact manner that keeps your code clean.

There are several cons as well. For starters, it’s a JavaScript solution so obviously it won’t work for users with JavaScript turned off. The great part about it though is that those users would essentially get the same experience as they would’ve gotten had you skipped this method entirely! So essentially, they’re really not out anything. Obviously, there are some very slight speed implications that arise when using JavaScript as well.

The biggest downside is that you end up with a decent chunk of awkward CSS. However, if you want to style individual letters, there’s really not much else you can do. In my example, here’s the resulting code after using Kern.js to move around a bunch of things manually. To be honest, it really isn’t too bad!

.char2 {margin-left: -0.096em}
.char10 {margin-left: 0.036em}
.char11 {margin-left: -0.181em}
.char12 {margin-left: -0.169em}

Conclusion

To sum up, kerning on the web sucks. Contrary to popular belief, the “letter-spacing” CSS property on its own is really geared more towards tracking than kerning, you really have to trash your HTML to us it to kern.

As an alternative, Lettering.js can be implemented in under a minute and really provides complete flexibility in terms of how you kern your type. You can even use Kern.js to kern your type in a visual interface just like if you were using graphics software!

If you’ve been looking for a better way to kern live web type, give this solution a try and let us know what you think in the comments.