What Is Letter Spacing?

Table of Contents

Letter spacing, or tracking, is a part of typography. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Besides letter-spacing (tracking), type arrangement involves selecting typefaces, point sizes, line lengths, line-spacing, and kerning.

Why Use Letter Spacing?

Adjusting the space between letters in an optically consistent way changes the visual density of a line or block of text. Tracking is different from kerning, which involves adjusting the spacing between specific adjacent characters that would otherwise look poorly spaced.

Legibility & Fixed Spaces

Firstly, the effect on text legibility. Tight letter-spacing, especially in small-sized text, can reduce readability. Adding white space around characters enables individual characters to be recognized more quickly by the eye. Too much space, however, can detach letters making it harder for readers to recognize whole words and phrases, thus also diminishing readability.

A use case would be in news design, where deadlines are tight. For example, news editors have no time to rewrite paragraphs that end in split words or create widows or orphans. Hence, they adjust letter-spacing instead.

Secondly, is using letter spacing to insert fixed spaces. This practice was once done in hand-set metal type to achieve letter spacing. However, today designated spaces vary by size and include thin spaces, hair spaces, and word spaces. It also comprises en-spaces and em-spaces. The former is equal to half of the current point size, and the latter is the same width as the current point size.

Considerations for Foreign Languages

While basing the letter-spacing design on legibility, appeal, uniformity, and the like, it ignores that applying letter spacing to some written international languages would make the text look broken. For example, languages using Arabic script are expected to have visually connected letters. 

Line Spacing and CSS

CSS (Cascading Style Sheets) is not a programming language or a markup language but a style sheet language used to selectively style HTML elements. The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. 

Positive letter-spacing values cause characters to spread farther apart, while negative values bring them closer together. As mentioned above, accessibility concerns come into play. An excessive positive or negative value may cause the styled word(s) to become unreadable. For instance, by styling text with a substantial negative value, the characters could overlap to the point where the word(s) is unrecognizable.

The bottom line is that legible letter-spacing must be decided on a case-by-case basis, as different font families have different character widths. There is no single value that can ensure that all font families automatically maintain their legibility.


Recommended From Elementor

The Future
of Web Creation. Straight to
Your Inbox.

What Intrests You?


Awsome content is on the way.