Typography is increasingly important to modern web design. We've realized that text should actually look good and be pleasant to read, given it's still the primary type of content on the web.
One important goal is avoiding overly jagged text like this:
In printed typography, you have enough control that can avoid this through hyphenation. In web typography, you don't know exactly how much space your text will take up: different browsers may render the text differently, and the user may have changed the zoom or font size. So hard-coding hyphens would go horribly wrong.
This is where soft hyphens come in! They mark places where the text layout may decide to break a word in two with a hyphen if it makes the text flow better. They stay invisible when not needed. Behold:
There's two ways of adding soft hyphens to HTML. One is as the HTML entity ­, the other is as a Unicode soft hyphen character. You can think of ­ as the counterpart to .
This is pretty neat, but the downside of using them is that it makes your source text a lot harder to read. Another option is to automate the hyphenation process. Hypher by Bram Stein does this pretty well. To use it properly, you need to be using node. Or you can use it client-side, with the mild downside that it causes a noticeable text re-layout after load.
The other downside to automatic hyphenation is that sometimes, it gets things wrong, breaking words in awkward places or breaking words you really don't want to break, like names. So I don't quite have a perfect solution to offer you, but I do think that soft hyphens are a useful tool to remember for anyone who writes for the web.