The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing

There is a term used in typography called kerning. Kerning refers to the adjustment of space between letters. Fonts are generally fairly well calibrated by default, but at larger sizes you can begin to see imbalances in spacing between letters.

Kerning is used a lot in the print industry, especially for headlines and logotypes; but it’s something that’s not widely used on the Web because of the lack of control we have over fonts.

But we do have some control. There is a CSS property called letter-spacing which can be used to manage just that – the amount of space between letters. This isn’t true kerning since we cannot tweak individual letters, but it’s better than nothing. For large fonts used in headlines letter-spacing can come in very handy because at larger sizes the gaps between letters are sometimes a little too big. 

Let me show you an example. Here’s a sentence written in Arial size 28 pixels font:

Looks pretty good, but I think we can tighten that font a tiny bit. Here’s the same sentence but with a letter-spacing property of -1 pixel applied to it:

I think that looks nicer, especially for headlines. Here’s the CSS code used to achieve this:

#headline { font-family: Arial; font-size: 28px; letter-spacing: -1px; }

Letter-spacing is something that in my opinion should be utilized more on the Web. If you haven’t tried it out already, give it a go – your headlines will thank you for it.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: