Does Kerning Matter in Web Design Projects?

You may have heard professional typesetters and graphic designers flip their lid while debating whether or not a particular line of text was kerned properly. While it might not seem like a big deal, kerning refers to the spacing located between individual letters when working with a proportional typeface. Designers will sometimes adjust the spacing between the characters to make text more readable and attractive.

On paper, this would have to be done before printing in order to ensure that all of the letterforms were evenly distributed on the page. Some typefaces, just as the ITC Avant Garde family by Herb Lubalin, have to be specially kerned in order to replace some characters with alternatives for use in logo design. On the web, however, the whole issue is often forgotten about. If you’re serious about design, then you’ll want to reconsider the look of individual letters the next time you design a page layout from scratch.

Since most HTML specifications don’t include tags that adjust kerning directly, you’ll want to deal more with tracking the white space between each line of text on your page.

Using Tracking in Place of Kerning

Unless you’re installing large numbers of web fonts on your site’s servers or specifying them from an outside source, you can’t exactly be certain that any given machine is going to render your page in exactly the same way. Chances are that it won’t even be displayed in the same font on multiple devices. As a result, kerning as it’s traditionally defined probably doesn’t have as much of a place in web design as it does in conventional typesetting.

You can, however, feel free to adjust the vertical height between each line of text in longer articles. There’s a dedicated CSS property called line-height that can be used with a majority of standard HTML tags to control just how much space surrounds each bit of text. As with any CSS property, you can define line-height as a percentage or a discrete number. The fact that you can also feed it a specific pixel size, which allows you a greater level of control over the tracking of your text blocks.

Since pixel size attributes are treated the same across devices, this is probably the best substitute for traditional kerning that web designers have access to. If you have your page layout divided up into various spans and divs, then you can normally apply different line-height attributes to each of these areas. Many of the best website builder packages can manage this automatically. You’ll sometimes be given a slider to control line-height graphically, which is a feature that many designers who grew up using Dreamweaver may find it hard to live without.

Those who really want to kern their text in the conventional sense might find this a poor substitute, however, so they may have to look elsewhere.

Authoring Documents Instead of Web Pages

Publishers prefer PDF files because they’re essentially already eBooks that are almost as flexible as printed words. If you’re concerned with the exact spacing of characters in a document, then you’re probably better off exporting it as a PDF and uploading it to your site. It’s easy enough to post links to it so your readers won’t have any difficulty finding it.

While this might seem like a pretty extreme way to preserve a layout, it might be useful when designing digital textbooks or other types of informational content that has to look a certain way. Fantasy authors and those who publish more esoteric texts like Psalters are more than likely going to want to work with small bits of type at a time, so it might make sense for these users.

Certain letter combinations can masquerade as others, such as how r and n can look like m in certain typefaces. When working with these, space is again an important consideration, though it might be best to avoid fonts that create this kind of confusion in the first place. Those who have to design only for dedicated web pages might want to consider using something with text figures if at all possible.

How Text Figures can Replace Kerning

Conventional typesetters are probably appalled by the idea of using a typeface with text figures in place of proper kerning, but those who can only manipulate HTML and CSS tags have little choice. The fact that these fonts place numbers in the same variable height lines as other characters make them easier for readers to follow along with. While this isn’t exactly the same thing as properly kerning a document, it does accomplish many of the same goals.

Web designers who are looking for something different will certainly want to keep that in mind when they pick a typeface for their next layout.