Hyphenation on the web

Posted on Feb 15, 2007 in Design, Web Dev | 0 comments

If you’re not a print designer who commonly works with voluminous amounts of text, you’re probably not interested in discussions of the relative merits of various hyphenation schemes. Oh, but what geeky fun to debate which is preferable: better spacing or fewer hyphens?

For many, many years text on the web was rarely fully justified. No, I’m not talking about how right and reasonable the text is, but rather its alignment to the left and right edges of the column, like in most newspapers. HTML just didn’t support it. But CSS brought it to the web with the text-align: justify property. And anytime you have justified text you run the risk of having ugly hyphenation.

For the fun of it, I’ve set the following paragraph to justified text using the CSS property I just mentioned. What do you think of how it looks?

Even I admit that anyone who’s trying to produce book-quality hyphenation and text layout on the web is, in a word, hardcore. But for those whose layouts and visual needs do require it, I came across an entry that describes the use of discretionary hyphens in a web page. It’s from the web version of Robert Bringhurst’s beautiful book, The Elements of Typographic Style. (If you’re even halfway serious about typography you need that book.) Discretionary hyphens are—wait; if you don’t know, you better read that article and the whole book!

Related: If you liked this, check out:

1. No support for max-width in IE 6 Having built a few one-off, stand-alone web pages (in strict...
2. Percentages to live by Striving for wealth often inspires people to label you as...
3. Usability—or lack of it—in GigaSize downloads Some sites’ usability is so atrocious it simply must be...