{"id":260620,"date":"2017-10-04T07:55:17","date_gmt":"2017-10-04T14:55:17","guid":{"rendered":"http:\/\/css-tricks.com\/?p=260620"},"modified":"2017-10-04T08:00:36","modified_gmt":"2017-10-04T15:00:36","slug":"keeping-track-letter-spacing-guidelines","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/keeping-track-letter-spacing-guidelines\/","title":{"rendered":"Keeping track of letter-spacing, some guidelines"},"content":{"rendered":"

Considering that written words are the foundation of any interface<\/a>, it makes sense to give your website’s typography first-class treatment. When setting type, the details really do matter. 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. It stands to reason that the more attention paid to the legibility of your text, the more effectively you convey a message.<\/p>\n

<\/p>\n

In this post, I’m going to dive deep into a seemingly simple typesetting topic\u2014effective use of letter-spacing\u2014and how it relates to web typography.<\/p>\n

Some history<\/h3>\n

Letter-spacing, or character spacing, is the area between all letters in a line of text. Manipulation of this space is intended to increase or decrease the visual density of a line or block of text. <\/p>\n

When working in print, typographers also refer to it as tracking<\/em>. It is not to be confused with kerning<\/em>, which refers to the manipulation of space between two individual letters. Kerning is not usually practiced on the web.<\/p>\n

See the Pen.<\/a><\/p>\n

Historically, manipulating letter-spacing was a technique frequently used when laying out newspapers. 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. To work around this, designers would insert spacing between the letters\u2014first by hand and then later digitally\u2014so that a line of type would better fill the allotted space.<\/p>\n

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<\/a>, and banners.<\/p>\n

While fine typographic control on the web<\/a> is only a recent development, the ability to perform letter-spacing has been around since CSS1<\/a>. Naturally, the name of this property is called letter-spacing<\/code>.<\/p>\n

letter-spacing<\/code> accepts various kinds of lengths as a value. Unlike its physical counterpart, it can be set to a negative measurement, which moves the letters closer together instead of further apart. When setting print type, no competent typesetter would have cut chunks out of their lead type to achieve this effect. However, when your letters are virtual, you can do whatever you want with them!<\/p>\n

Stealing Sheep<\/h4>\n

In researching the history of letter-spacing, you’re likely to run across a famous quote by type designer Frederic Goudy<\/a>. The\u2014ahem\u2014clean 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.<\/p>\n

Some have taken this quote at face value and sworn to never apply letter-spacing to content containing any amount of lower case text. While I would never presume to be as skilled or as knowledgeable about typography as Goudy, I would caution against the pitfalls of dogmatism<\/a>.<\/p>\n

There are situations where it would be advantageous to apply letter-spacing to large sections of text<\/a>, so long as it is in the service of optimizing legibility. For example, a judicious application of letter-spacing applied to legal copy or agate<\/a> provides a much-needed assist in a situation where the reader is navigating small, dense, jargon-filled content.<\/p>\n

Much like practicing good typography, writing great CSS is all about minding the details\u2014even a single property can contain a great deal of hidden complexity. 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.<\/p>\n

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.<\/p>\n

Use letter-spacing, not spacing characters<\/h3>\n

In print, creating space between each letter in a line of metal or movable type historically involved inserting small pieces of metal between each letter. However, on the web you want to avoid adding any extra glyphs<\/a>\u2014such as spacing characters<\/a>\u2014between each typed letter. If you need to achieve the visual effect of letter-spaced type, use the letter-spacing<\/code> property. This one might seem obvious, but you’d be surprised!<\/p>\n

Maintainability<\/h4>\n

If spacing characters are<\/em> used, future styling changes will be more difficult to make and maintain. Every typeface has different widths. It is harder to predict or control how potential redesigns might behave, especially when making typesetting decisions for larger sites with a lot of varied content.<\/p>\n

See the Pen.<\/a><\/p>\n

If you find this is an emergent behavior amongst multiple site authors, you should investigate codifying it by updating site styles to reflect this desired aesthetic. This may also necessitate talking to designers to update style guides and other relevant branding documents.<\/p>\n

Accessibility<\/h4>\n

If letters are separated by spacing characters, some screen readers will read each letter individually instead of the whole word. In this scenario, usability is sacrificed for the sake of authoring ergonomics\u2014browsing becomes labored and people get unnecessarily excluded from using your site.<\/p>\n

Imagine for a moment that your eyesight isn’t as great as it is now<\/a>. Your experience on the web would be a lot like this:<\/p>\n