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:
- Margin kerning. E.g. hanging punctuation.
- Character kerning. Ie. letter-spacing needs to be made tighter or looser to make the appearance more even to the eye. [1]
- 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]
- Word-spacing. You can’t rely on spacing that’s mechanically widened to fit the paragraph width.
- 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){kind=link}
5 comments
Bram Pitoyo (@brampitoyo) says:
Aug 25, 2011
Co-written with @skinny: Do you know that Firefox 6 supports CSS hyphenation–justification? Oh, yes – http://t.co/BWkdDlb
Sam Foster says:
Aug 26, 2011
Typesetting in the browser faces the additional challenge that there are so many variables: column widths, font-size (OS/device variation and user preference), font-family, etc. These conditions are getting more diverse as we see more and more web-capable devices emerge, not the other way around.
Tweaking copy to “fit” assumes these variables are locked down – and everyone shares the same experience. Not so, though you can kid yourself if you restrict your testing to environments that agree with your assumptions. That said, I guess its the 80/20 rule: all you can do is make it look right for most, and allow it to degrade nicely further down the curve.
Ultimately, the typesetter has to be the browser; as a designer the best you can do is provide hints and break copy up to make it more likely to flow nicely. So the sooner the browser vendors take this one, the better
samfosteriam (@samfosteriam) says:
Aug 26, 2011
Commented: “@brampitoyo/@skinny: Do you know that Firefox 6 supports CSS hyphenation–justification? http://t.co/eWHVCmL ”
Bram Pitoyo says:
Aug 29, 2011
Sam, you brought up a good point. I think there needs to be CSS-level control not only over how type looks: style, line length, etc.—but also on how it works: justification spacing algorithm, hyphenation rule, preventing widows, etc.
This way, even when the text appearance may be different (due to rendering engines and unavailability of webfonts), the way it’s set on paragraph will still conform to a rule that designers can set. Simply put: it may flow differently, but it’ll look sharp.
This might be something worth proposing to the Gecko team and the W3C-font working group.
Demon says:
Dec 28, 2012
Hyphens are good for the texts. Your content looks attractive and good by them. In the above example the content with hyphens is looking well formatted. We have to consider many rules before using hyphens. I have read an article recently about hyphens. It was really good i think you should see it. use below URL-
http://docfixers.com/index.php/archives/424