Keeping track of letter-spacing, some guidelines

css-tricks.com

Eric Bailey managed to pull off the impossible: writing an immensely interesting and insightful article about letter spacing on the Web. Before you dismiss it as boring, I will seriously advise you to give it a chance, as I learned quite a few lessons myself regarding type crimes, and scenarios I hadn't considered before. Let's start with the obvious, and separate letter spacing from kerning, for the initiated:

When working in print, typographers also refer to it as tracking. It is not to be confused with kerning, which refers to the manipulation of space between two individual letters. Kerning is not usually practiced on the web

Turns out, dealing with letter spacing (and spacing between words in general) can hugely impact accessibility concerns. Did you know that screen readers literally read out loud non-breaking spaces in HTML? I didn't, and it's literally my job to know about these things, too.

From a CSS perspective, Eric shares loads of pro-tips to fine tune and control a good balance between letter spacing and uppercase letters. A few interesting things that some folks might not know, is some lesser known units of measurement in CSS available to us:

ex, which represents the font's x-height.
cap, which represents the height of the font's capital letters.
ch, which represents the width of the font's zero (0) glyph.

Another thing I had never considered: having ligatures enabled when using  a very positive value of letter spacing... you can try to imagine what happens. Ligatures will be forced to be glued together, as it's, well, their job as ligatures. To end, here's Eric's words on why you should not to overboard with too much playfulness on letter-spacing:

Reading comprehension is another factor to consider. We read written language by anticipating patterns of letters that will be in words, then going back to verify. Large areas of text set in all caps makes it difficult to predict these patterns, which reduces both the speed of reading and interpretation.

Read more...
Linkedin

Want to receive more content like this in your inbox?