Spacing of characters using CSS

In order to adjust spacing between individual letters in HTML documents, it is best to use margin properties for suitable elements. The letter-spacing property would seem to be more natural, but its meaning has been defined vaguely, and its effects on browsers are too different.

The problem

In typography, spacing between characters is often adjusted due to esthetic (and readability) considerations, such as

• reducing the spacing between “V” and “A” to avoid a gap
• adding some spacing between two “A” letters so that they won’t (nearly) touch each other
• adding spacing around an en dash character so that it does not (nearly) touch the characters around it.

We usually don’t care about such issues in Web authoring. But sometimes we might wish to, especially in logos, headings, and other visually important texts.

Demo 1: spacing around an en dash (–)

To create some small space around an en dash character in an expression like 100–600, put the en dash character inside a span element, and set e.g. a left and right margin of 0.1em for that element.

Here you could alternatively use the padding instead of margin, but it’s simpler to use margin, since it can also be used with a negative value. Sometimes you want to make characters closer to each other.

Demo 2: Adjusting spacing of letters

Letters like capital “A”, “V” and “W” are often esthetically problematic. If you have a “V” followed by an “A”, the spacing often looks too big due to the shapes of the characters. On the other hand, if you have two consecutive “A” letters, they may almost touch each other, creating an unpleasant look.

Consider the sample word “VAASA”, which has both problems:

A simple approach is to add markup that makes the second “A” an element and assign a negative left margin and a positive right margin to it. This effectively puts it closer to the preceding letter and a bit farther from the following letter.

The example uses this markup:

Here the margin property’s value consists of four quantities, which specify (by CSS definition) the top, right, bottom, and left margin, in that order.

The next example additionally makes the letter “S” an element and assigns a small negative left and right margin (margin: 0 -0.04em) to it:

You need to experiment with different values to get a satisfactory result. The appearance depends on the font and on the shapes of the specific character. Since you generally cannot have control over fonts in Web authoring, try to avoid trying too much. For example, don’t try to make letters “V” and “A” very close to each other even if that would be your esthetic preference. This risk would be that in some other font, the letters could touch each other, and even overlap. The risk is always there, of course, but you can make it fairly small. Using commonly available fonts only works for the same purpose.

What’s wrong with letter-spacing?

The letter-spacing property is suitable for adjusting spacing between letters in some piece of text in general, e.g. in a paragraph. But if you try to apply it to short fragments of text, such as individual characters, inside words, you get very inconsistent results.

In particular, Internet Explorer interprets the property as affecting the spacing between characters inside the element to which the property applies. Thus, if you have
V<span style="letter-spacing:0.2em">AA</span>SA
then IE increases the spacing between the two “A” letters. Mozilla and Opera, on the other hand, add a spacing of 0.2em after both letters. This has even been described as permitted by the specification, perhaps even as the correct interpretation. I disagree.

But the simple fact is that important browsers work differently. We might consider special techniques to work around this, serving different CSS rules to different browsers, but the margin approach described above makes this unnecessary.

Moreover, using the margin property often means simpler markup. For example, to put spacing around an en dash, you make just the en dash a span element, instead of using a span element that contains the neighboring characters as well.

Caveat: According to some reports, search engines may treat markup inside a word as breaking it into pieces. Thus, if you have V<span>A</span>ASA, a search engine may treat it as three words V, A, ASA. Thus, it is probably best to make sure that any important word that you split that way also appears as such, unsplit, in the text of the page.

The rest of this page is just miscellaneous tests on the letter-spacing property. They show that the property is not very useful for the purposes discussed here. The issue was discussed in the css-discuss list in the thread Can letter-spacing be used for detailed adjustments? in January 2005. The margin approach was suggested in the discussion by John Lewis.

Word styling

Word styling, with span elements bordered

Spacing around an en dash