Alex Dunae

Better Web Typography with Spaces and Hyphens

One of the minor irritants of building websites is the lack of proper hyphenation and word-wrapping. Browsers don’t have the same level of text-flow smarts that InDesign or LaTeX have.

This has been discussed a few places, notably A List Apart’s article on dashes and typography, but they all end by saying that hyphenation and word spacing isn’t very well supported by browsers.

The Test

There are quite a few spacing and hyphenation options available in HTML. I just looked at the ones that I was hoping to use.

I put together a test page and, with the the help of Tom Hammarberg, Jeremy Latham and Clint Lalonde, collected some screenshots of the results.

Here’s how everything should look.

The Results

Non-breaking space     Š

Prohibits the browser breaking to a new line

The verdict: Perfect

Soft hyphen ­ ­

Suggests a hyphenation point to the browser.

The verdict: Perfect

Zero-width space ​ ​

Provides a breakpoint to the browser without showing a visible space.

The verdict: Good, with a caveat

The Caveat

Can you guess which browser we’re going to discuss?

Right, Internet Explorer 6.

IE 6 suprised me and handled soft hyphens beautifully. Things got a little messier with thin spaces, hair spaces and zero-width spaces.

Some fonts, like Palatino Linotype, include glyphs for each type of space and hyphen. Others, like Arial, Verdana and Times New Roman, do not.

In all the browsers I tested, the browsers didn’t care whether or not the glyphs were defined, they were able to render the spaces and hyphens anyway.

If IE 6 couldn’t find the glyph, it displays everyone’s favourite square: □.

Are They Usable?

Soft hyphens work perfectly with the standard set of web-safe fonts in every browser.

If you’ve decided to drop support for IE 6, you’re good with any space or hyphenation glyphs.

But, if you’re supporting IE 6 and still want the refined text flow available with spacing and hyphenation, you’ll have to choose a font that includes those glyphs.

Your web-safe choices are:

• Arial Unicode, Arial Unicode MS
• Lucida Sans, Lucida Grande
• Palatino, Palatino Linotype

To check if the font you’re targeting supports fancy spaces and hyphens, open up Character Map on Windows and search for either space or hyphen. Mac users will have to wait til my new iMac arrives for instructions.

In Conclusion

I think you have to be a “special” kind of person to care about these things, but that’s me and I know the site we’re building now will look at least 2% better because of this experiment.

If you use a browser that I haven’t included, send a screenshot to alex [at] dunae.ca and I’ll add it to the gallery.