2.1.9 Don’t alter the widths or shapes of letters without cause

In the world of digital type, it is very easy for a designer or compositor with no regard for letters to squish them into cattle trains and ship them to slaughter.”

CSS does not offer many opportunities for altering the width or shapes of letters. In fact only the letter-spacing property can be applied at all for this purpose, and that simply changes the width of the letters (but not their shape). The letter-spacing property can however be particularly destructive. Consider this maltreatment of a heading:

<h2 class="squish">letterfit</h2>

h2.squish { letter-spacing: -0.1em; }

Resulting in:

Letterfit is important

The result may differentiate itself stylistically from other websites, and that might be fine if the words are not important; legibility is the real loser in this instance.

Rhythm & Proportion

§ Horizontal Motion


Cover of ‘The Elements of Typographic Style’ by Robert Bringhurst

Cover of ‘Web Typography’ by Richard Rutter