Typography & the Web

Go to: 6 Ways To Improve Your Web Typography

I’ve been reading a lot lately on web typography thanks to this great article from A List Apart on soft hyphenation, a blog post with tips on improving web typography and the web typography adaptation of Robert Bringhurst's "The Elements of Typographic Style." Since I came from the print world of strict word and line spacing and typographic manipulation, these resources have been very handy in figuring out how to override the basic browser settings for typography.

The soft hyphenation problem comes up with text that is justified. Justified text is both flush left and flush right so all lines of text except the last lines of paragraphs are stretched out to the same length. Hyphens are used to break words at the end of lines to help prevent gaps in word spacing. The hyphens that break up words in justified text are called soft hyphens. Generally, they aren't used on the web as the default alignment is left align, which leaves a ragged right edge on paragraphs.

However, this practice does not created the most readable text, especially when it comes to eBooks. Unfortunately, (as illustrated by the iPad and Kindle, ebook readers) though text can be justified, the soft hyphenation still gets ignored. They require readers put up with justified text withough natural breaking hyphens which causes odd spaces to show up.

Example of justification without hyphens:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nisi sed neque malesuada nec venenatis purus tempor. Suspendisse gravida ante ultrices lectus faucibus porttitor. Maecenas id nunc in eros fermentum auctor. Nunc at tortor magna, eget cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget tortor nulla, vel placerat turpis. Aenean volutpat, erat non lobortis rutrum, urna purus cursus lorem, ac laoreet ligula augue eu nisi. Proin elementum, nisi nec pulvinar facilisis, purus erat ullamcorper est, et dictum ligula nisi vitae libero. Mauris tincidunt vulputate mauris. 

Example of left align:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nisi sed neque malesuada nec venenatis purus tempor. Suspendisse gravida ante ultrices lectus faucibus porttitor. Maecenas id nunc in eros fermentum auctor. Nunc at tortor magna, eget cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget tortor nulla, vel placerat turpis. Aenean volutpat, erat non lobortis rutrum, urna purus cursus lorem, ac laoreet ligula augue eu nisi. Proin elementum, nisi nec pulvinar facilisis, purus erat ullamcorper est, et dictum ligula nisi vitae libero. Mauris tincidunt vulputate mauris. 

There is a way to hard code soft hyphens into text, but according to "A List Apart," using javascript to create hyphenated, justified text is a smarter way to achieve this end:

"Hard coding soft hyphens is a good path to understanding how they work, but a bad thing to do in practice. Soft hyphens make the HTML text hard to read and edit. Additionally, they may create difficulties for search engines. Users can’t turn soft hyphenation on and off with a simple UI widget. Using JavaScript to apply soft hyphens makes a lot more sense and works quite well."

The blog recommends the script, Sweet Justice, that can run English words through a hyphenation dictionary to break up words at the correct place to wrap to the next line. This looks like a very handy script!

Also, I found out how to insert en and em dashes this week as well! According the A List Apart blog, I can use en dash (–) or em dash (—). This is very exciting since we use a lot of em dashes in our writing to denote dramatic pauses and lists.

The Typographic Guide has really been a helpful resource for all my type-related questions including leading, kerning and more. So with great guides like these and scripts, I can continue to modify text and typography to my heart's content!