Tracking — CSS letter-spacing and Where to Use It

Simon Pascal Klein
Simon Pascal Klein
Share

The letter-spacing property is an oft forgotten CSS option which allows us to change the tracking between letters. Altering the default spacing is seldom needed as text fonts are designed and optimised for legibility and readability exactly for setting larger blocks of text. However, the granular control of this horizontal spacing between letters can be useful in particular circumstances.

The letter-spacing property

The letter-spacing CSS property has been available since CSS1 and enjoys thankfully an almost perfect support from all the main browsers. To employ the property we simply call it and give it a length value:
h1 { letter-spacing: −1px; }
This length value is inserted between characters in addition to the default spacing (called the kerning). Quick note: while negative values are permitted percentages aren’t (for good reason). If you want to ensure your tracking remains relative to the font size (in case it is decreased or increased) set your values in ems. The property also accepts the descriptive values “normal” and “inherit”, but the latter IE has some problems with. Tracking also interacts with text justification, which is computed by the user agent (e.g browser) and font rendering engine. When text is justified (e.g. text-align: justify;) the browser will not alter the tracking unless letter-spacing: normal;
is set. Remember however that “normal” and a value of “0” is not equivalent in this regard, so if you want to reset inherited letter-spacing and ensure it behaves accordingly be sure to set it back to “normal”. There is another CSS property similar to letter-spacing provides control to word-spacing. Use case: just about never.

Use Cases for letter-spacing

Increasing Legibility

First and foremost letter-spacing allows us to insert additional space between text, which can aid in providing better legibility. The two prime examples for this are setting acronyms and strings of lining numbers or figures.

Spacing Acronyms

Acronyms being chiefly a string of uppercase characters are harder to discern than their lowercase equivalents due to the uniformity in height and the baseline the uppercase letters sit on (see my previous post, Top 10 Dos and Don’ts of Web Typography: #6). A common technique to avoid causing acronyms in a block of text to spring out and act as eyesore is to set them in small-capitals (font-variant: small-caps;). By doing so the height of the now “small” capitals aligns to the x-height as sits nested better in the text. However as now smaller, the small-capitals can become somewhat illegible sitting as close as they are to one another by default. Here we can call upon tracking by adding a few additional units of spacing between the glyphs. For example:
acronym, .caps, abbr {
    text-transform: lowercase;
    font-variant: small-caps;
    font-style: normal;
    letter-spacing: 1px;
    }
A paragraph with full-cap acronyms with default tracking.
Same paragraph as above with acronyms set in small-capitals and with slightly enlarged tracking.

Spacing Lining Figures

A second example is additional spacing given occasionally to lining figures, that is figures (i.e. numbers) which are uniform in height and don’t extend beyond the x-height or drop below the baseline like text or “old-style” figures. The same principles from setting acronyms apply. Although not chiefly done for figures that reside in body copy (because ideally you’d use text figures) lining figures are commonly used in tabular work: e.g. financial reports. See below for an example where lining figures are intermixed with full-caps in the form of ID numbers: An example of ID numbers composed of lining figures and full-caps tracked loosely.

For Aesthetics

Tracking can be employed for aesthetics too. One particular popular trend is to negatively space Helvetica (or Arial): An example of both normal and negative tracking applied to Helvetica Bold Note: be very careful when applying negative spacing as not to make the text illegible and harder to read. The above styling would become difficult to read if set at a smaller size so reserve negative spacing for special occasions and only at ample sizes.

Closing

Tracking is just another tool that allows designers and typographers to fine-tune the horizontal spacing of text. Its application should by and large be to increase legibility. Be wary in applying tracking for purely stylistic reasons: don’t alter integral spacings without cause.

Frequently Asked Questions (FAQs) about CSS Letter Spacing

What is the significance of CSS letter-spacing in web design?

CSS letter-spacing is a crucial aspect of web design that influences the readability and overall aesthetic of a website. It refers to the adjustment of the space between characters in a text. By manipulating letter-spacing, designers can enhance the legibility of the text, especially in larger text sizes or headings. It also plays a significant role in creating a specific mood or style, contributing to the overall visual appeal of the website.

How can I use CSS letter-spacing to improve text readability?

To improve text readability, you can adjust the CSS letter-spacing property. For instance, increasing the letter-spacing can prevent the text from appearing too cramped, especially for fonts that naturally have tight spacing. However, it’s important to strike a balance as excessive letter-spacing can make the text difficult to read.

Can CSS letter-spacing affect SEO?

While CSS letter-spacing itself doesn’t directly impact SEO, it can indirectly influence it. Good letter-spacing enhances user experience by improving readability, which can lead to longer site visits and lower bounce rates. These factors can positively impact your site’s SEO ranking.

How can I adjust CSS letter-spacing?

You can adjust CSS letter-spacing by using the ‘letter-spacing’ property in your CSS code. The value can be set in different units such as pixels (px), points (pt), or em. For example, to set the letter-spacing to 2 pixels, you would use the following code:
p {
letter-spacing: 2px;
}

What is the difference between tracking and CSS letter-spacing?

Tracking and CSS letter-spacing are similar concepts, but they are used in different contexts. Tracking is a term used in typography to refer to the uniform adjustment of space across a range of characters. On the other hand, CSS letter-spacing is a property used in web design to control the space between characters in a text.

Can CSS letter-spacing be negative?

Yes, CSS letter-spacing can be set to a negative value. This reduces the space between characters, making them appear closer together. However, it’s important to use negative letter-spacing sparingly as it can reduce readability if the characters are too close.

How does CSS letter-spacing affect responsive design?

CSS letter-spacing plays a crucial role in responsive design. As screen sizes vary, the letter-spacing may need to be adjusted to maintain readability and aesthetic appeal. You can use media queries to adjust the letter-spacing based on the screen size.

What is the default value for CSS letter-spacing?

The default value for CSS letter-spacing is ‘normal’, which means the spacing is set to the default spacing of the current font. It’s equivalent to 0, where no extra space is added between characters.

Can CSS letter-spacing be animated?

Yes, CSS letter-spacing can be animated using CSS transitions or animations. This can create interesting visual effects, such as text that gradually spreads out or comes together.

How does CSS letter-spacing work with different languages?

CSS letter-spacing works universally across different languages. However, the impact on readability may vary depending on the language and script. For languages with scripts that have complex character combinations, adjusting letter-spacing might lead to unexpected results. Therefore, it’s important to test the effects of letter-spacing with different languages.