Text spacing refers to the amount of space between the letters of a word or between the words of a text. The CSS properties typically used for controlling it are letterspacing, font-keming, and word-spacing.
1. letter-spacing, font-kerning, and word-spacing
The letter-spacing, font-kerning, and word-spacing properties are all inherited. Table 14.3 lists their functions and Figures 14.13 and 14.14 show how they are used and their effects.
The rules in the example and their effects are self-explanatory. In the rendered outputs of the .kerningnormal{} and .kemingnone{} rules, notice the differences in spacing between some letters (i.e., “A,” “W,” “A,” “V,” “L,” and “Y”). Notice also that the text looks better when the kerning infonnation is applied.
2. text-rendering
The text-rendering property is actually not a CSS-defined property as of time of writing but supported by most browsers. It is inherited and used to optimize textspacing and balance quality against rendering speed. The values supported include auto (which lets browser decide), optimizeSpeed (which prioritizes speed over legibility and geometric precision), optimizedLegibility (which optimizes legibility over speed and precision), and geometricPrecision (which optimizes geometric precision). A rule, for example, could be p { text-rendering: optimizeReadability; }.
3. Text Spacing in Design
Text spacing, whether it is achieved via letter-spacing, font-kerning, or word-spacing, can influence legibility when used in an infonned way. Generally, the characteristics of a font and the spacing between letters and words interact to optimize legibility level. This means that adjusting one might require adjusting others. For example, the larger the space between letters, the larger should be the space required between words. Also, the bigger the font sizes are, the more legible the text is likely to be with bigger spacing between letters and words. For example, when an all-uppercase text is used, increasing the space between the letters a little can improve the speed at which the characters can be distinguished. Headings are especially likely to benefit from kerning, because their larger size makes the uneven spacing between letters more noticeable, particularly when in all-uppercase, although the problem also occurs when uppercase and lowercases are mixed. Not all letters cause this problem, and the magnitude also depends on typeface.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.