CRYSTAL BEASLEY

Web typography: hyphenation & justification

Post in collaboration with Bram Pitoyo, Digital Design Strategist & Typographer at Wieden+Kennedy.


Firefox joined Safari in supporting hyphenation. Despite CSS coming out 14 years ago in 1996, we’re just now getting some of the fine-grained controls necessary for beautiful typography. Details of the proposed spec at Mozilla Developer Network.

    -webkit-hyphens: auto;

    -moz-hyphens: auto;

    hyphens: auto;

Words need to be hyphenated because paragraphs need to be justified. But do you know why most justified texts aren’t very readable even though it looks visually pleasing at a glance? It’s not because they’re justified. It’s because they’re not justified carefully.

Mental exercise: why is the documents you’ve justified in MS Word so hard to read compared to a book? Justified text in books looks great because a lot of things have been adjusted:

  1. Margin kerning. E.g. hanging punctuation.
  2. Character kerning. Ie. letter-spacing needs to be made tighter or looser to make the appearance more even to the eye. [1]
  3. Additional kerning for specific characters. E.g. when typesetting French, you’d need to add a word space before (:) and after («»), and a thin space before (?), (!) and (;). [2]
  4. Word-spacing. You can’t rely on spacing that’s mechanically widened to fit the paragraph width.
  5. Ligatures. Ie. when you letterspace loosely, ligatures should be turned off.

Justified text in a word processor doesn’t look pleasing because, well, the application doesn’t come with most of these settings.

But how far ahead (or behind) are web browsers in this department? All browsers have a setting to tweak word and letter-spacing (though not finely), and turn ligatures on and off (different browsers, different syntaxes). [3] Problem is, you’d need to adjust everything manually.

Firefox does allows for fine control of letterspacing, although it’s the only browser that does. Here’s a great discussion of this still frustrating topic on the Treehouse Agency blog.

Sure, everything I’ve just described kind of returned us back at square one. But this isn’t to say that justified text isn’t appropriate to use on the web. Here’s how you can start today:

Many of us have control over words on the webpage, even as designers and developers. We can add, remove or change words around to make the word-spacing more even. If not, we have the capability to ask the copywriter sitting in the next room if this nicely-fitted wording still conveys the meaning just as well as the last version.

Since doing this to every paragraph isn’t practical, you might want to limit the use of justified spacing to shorter bodies of text that are easier to control in terms of wording. Longer subheads and introductory paragraphs are perfect.

Sources:

  1. http://texblog.net/png/blindtext.png
  2. http://www.microsoft.com/typography/developers/fdsspec/punc.htm
  3. http://marc.baffl.co.uk/browser_bugs/css-ligatures.html

Discover more in the archive!