Significance of letter-spacing for web design


In principal, letter-spacing is meant to provide even spacing between the letters. It is not the same as kerning, which affects the spacing between two specific letters.



Like many micro-typographical parameters, letter-spacing has a decisive influence on the legibility of text: If the letter-spacing is too large or too small, the words may not be correctly comprehended, and the reader must spell out the text, which is painstaking.



In principal, the smaller a text is, the larger the letter-spacing must be. In the era of lead typesetting, this was not a problem. The letters had a fixed size and were equipped with
a corresponding spacing. Digital fonts are different: they can be set in any size and, since they are generally aimed at a size between 10 and 16 points, the typographer must make some light corrections for the other sizes. That is the theory.



On the Web, the practice is not so easy, since the minimum raster on which the letters can be arranged has a size of one pixel. In general this is much too much to make proper corrections to the text. Despite this, the CSS parameter “letter-spacing” is not entirely superfluous. In headlines with a size of 24 points or more, you can use it to correct carefully the spacing of the letters.
A significantly increased spacing can be used to create so-called “spaced text”, which is another way in which to make text stand out.


If nothing else, you should note that inversely set text, i.e. bright letters on a dark background, tend to appear overexposed in general and the letters must have a bit more spacing as a result.


One more tip before closing: As we have already done in the other articles in this series, we would like to strongly recommend that you use the font-size dependent unit “em” for letter-space corrections. In this way you make sure that the letter-spacing changes along with a change to the font size in the browser.