3 Text Spacing Principles Every Designer Needs to Know
This is basic information for most of you but there are always new designers coming up that really don't have a clue about small detail stuff like this. Good info and principles can never be over-shared!
Many typographic decisions are based on spacing. This is something that has always been true with printed type, and became applicable to web type with the advent of CSS. Regardless of whether we’re talking about using type for print or for the Web, there are two directions in which we can control spacing — horizontally, and vertically.
Horizontal Spacing
Kerning and tracking are two terms you’ll often hear in conversations about horizontal letter spacing. Kerning is the process of adjusting the space between individual letters. Often when you’re working with type, you’ll notice pairs of letters that appear too close together or too far apart. Most fonts have a set of rules that determine the spacing between specific characters. The kerning between the letters “Wa,” for instance, should be — and is — much tighter than the kerning between “WV.” Most of the time, the rules for the font are sufficient to make the text readable. If not, you can adjust the individual letter pairs within your image creation software of choice.
For the text in a web page, it’s impossible to make letter-by-letter kerning adjustments. What you can do is adjust the letter-spacing CSS property, which is known in the print world as adjusting the font’s tracking. Like kerning, tracking adjusts the horizontal spacing between letterforms, but applies to the space between each letter. If you want your text to have a more open, airy feel, try adding a pixel or two to the tracking value. Figure 4.9 shows an example of the effect of spacing. The text in a web page is normally fairly tight, as you can see in Figure 4.9, so assigning a negative value here would probably reduce your text’s legibility.
Another horizontal spacing option in CSS is provided by the word-spacingproperty. This property can take a positive or negative length, or the keywordnormal. As you might expect, this property affects the amount of whitespace between words.
Read the rest @ designfestival.com