I’ve been building an online directory of gallleries, museums and arts organizations in New York City (mostly because I wanted one and couldn’t find one that did what I wanted). The design is basic—information-only—but I ran into a little quirk with the letter-spacing property in CSS when using right-aligned text.

The layout is built around a central axis, with the sidebar text right-aligned. I applied the letter-spacing property to the headlines and noticed that the value is also added after the last letter in the headline, pushing it to the left and out of alignment with the rest of the text. You can see what I mean here:

Luckily, the fix is extremely simple—just apply a negative margin-right to the element equal to the letter-spacing value. See the difference (and the code) in this example page. Now if only we could hang the punctuation…