Kerned Fonts. Get Yer Fonts Kerned Here!

Does it bug you when you see too much space between letters on a web page? Even just a little?

Kerning Text

You may not know this (ok, you do, but that other guy might not) but adjusting the spacing between letters is called "kerning". Kerning makes awkward letter combinations with too much space look better, like "Te". When enlarged, it becomes obvious that those two letters really want to be closer to each other.

Text Text

Now, if you're viewing this in a browser that supports a special CSS tag for text rendering (more on this in a bit), you'll see that the T goes over the e in the second line.

Here's another example:

AVAST! AVAST!

Again, if you're using a modern browser, note the space between the A's and V is shorter

If those pairs of words look identical to you, then your browser doesn't support a CSS element called 'text-rendering'. (But if you're reading this blog, then you're probably using Safari which does.)

Ligatures

Big F, Little F, what begins with F? Four fluffy feathers on a

fiffer feffer feff fiffer feffer feff

(with a nod to Dr. Seuss.)

Note that the first line has the dot on the letter i overlapping with the serif on the first f, and the bottoms of the f's overlap.

The same CSS applied gives some special treatment to the "fi" and "ff" combinations so they look better next to each other. These are called ligatures. They come from the printing press days when there was a separate chunk of metal for each letter. To get some letters to play nice together, they created special metal types that contained both letters.

How'd you do this?

Easy. In each case, I added the style:

text-rendering:optimizeLegibility;

to the second word.

Read more here.

Looks nice, but what can I do about this?

Normally, it would be up to the web designer to include this CSS in their stylesheets. But thanks to some Safari 5 extensions, you can take matters into your own hands.

If you just want to set it and forget it (or if you're just plain lazy), you can install the excellent Optimize Legibility Extension created by Paul Kehrer. It's a simple extension that does nothing more an add the appropriate CSS to the html element on every web page. One and done.

Or if you like to get your hands dirty, and maybe learn something along the way, you can install the even more excellent User CSS extension.

With it, you create a simple User CSS entry and put the appropriate CSS in there, like this:

You get the same effect, and you can use this extension for other purposes as well down the road.

The Eye of the Beholder

Now it may be a bit presumptuous for this CSS value to be called "optimizeLegibility". Some may in fact disagree, asserting some fonts are actually made less legible from overzealous ligaturing? ligaturization? Ok then, use of ligatures.

Try it out for yourself and let me know how it goes.