

If you would like to manipulate the letter-spacing of text on your website, here are some guidelines on how to do it well and avoid making mistakes. Understanding the history, capabilities, and limitations of the technology allows for the creation of robust, beautiful solutions that everyone can use, regardless of device or ability. Much like practicing good typography, writing great CSS is all about minding the details-even a single property can contain a great deal of hidden complexity. For example, a judicious application of letter-spacing applied to legal copy or agate provides a much-needed assist in a situation where the reader is navigating small, dense, jargon-filled content. There are situations where it would be advantageous to apply letter-spacing to large sections of text, so long as it is in the service of optimizing legibility. While I would never presume to be as skilled or as knowledgeable about typography as Goudy, I would caution against the pitfalls of dogmatism. Some have taken this quote at face value and sworn to never apply letter-spacing to content containing any amount of lower case text. The-ahem-clean version is, “Anyone who would letter-space lower case would steal sheep.” Essentially, Goudy is saying that manipulating type without knowing the rules is bad. In researching the history of letter-spacing, you’re likely to run across a famous quote by type designer Frederic Goudy. However, when your letters are virtual, you can do whatever you want with them! Stealing Sheep When setting print type, no competent typesetter would have cut chunks out of their lead type to achieve this effect. Unlike its physical counterpart, it can be set to a negative measurement, which moves the letters closer together instead of further apart.

Letter-spacing accepts various kinds of lengths as a value. Naturally, the name of this property is called letter-spacing. While fine typographic control on the web is only a recent development, the ability to perform letter-spacing has been around since CSS1. On the web where available space is potentially infinite, letter-spacing is usually employed for its other prominent historical use case: creating a distinct aesthetic effect for content such as titles and headlines, pull quotes, and banners.

To work around this, designers would insert spacing between the letters-first by hand and then later digitally-so that a line of type would better fill the allotted space. The pressure of quick deadlines meant that reporters didn’t have the luxury of being able to rewrite sentences to better fit the physical space allotted for them on the page.

Historically, manipulating letter-spacing was a technique frequently used when laying out newspapers. Kerning is not usually practiced on the web. It is not to be confused with kerning, which refers to the manipulation of space between two individual letters. When working in print, typographers also refer to it as tracking. Manipulation of this space is intended to increase or decrease the visual density of a line or block of text. Letter-spacing, or character spacing, is the area between all letters in a line of text. In this post, I’m going to dive deep into a seemingly simple typesetting topic-effective use of letter-spacing-and how it relates to web typography. It stands to reason that the more attention paid to the legibility of your text, the more effectively you convey a message. How big? How small? How much line height? How much letter-spacing? All of these choices affect the legibility of your text and can vary widely from typeface to typeface. When setting type, the details really do matter. Considering that written words are the foundation of any interface, it makes sense to give your website’s typography first-class treatment.
