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.

Internet Explorer 8
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.

http://dunae.ca/2009/better-web-typography-with-spaces-and-hyphens/