An aesthetically written design diary,Online home of a Polish information & user interface designer based in Florence, Tuscany.

One of the key qualities of a good information designer is attention to details and since typography is the new cool trend we now seem to care more than ever about presenting text online correctly. The following article is based on my personal experience, yet there’s great probability that much of the following has already been said by somebody else. What you’ll find here is a few tricks for setting type on web I’ve learned over the past few months some of which, amazingly enough, I hardly ever see being used.

Don’t be shy to use soft hyphens.

When justifying text there’s a risk of ending up with rivers of white space flowing between words in a paragraph^[1] (figure 1.1).

Whether to throw a few & s h y ; (leave out the spaces) between the syllables of the words or not depends on your good will. I don’t recommend breaking all the words on all pages with soft hyphens not only because you wouldn’t find time to read this blog anymore, but also because there are a few search engines still having problems indexing hyphenated words correctly. However if it’s one or two paragraphs in a prominent place on a page you’re thinking about I’d give it a try.

There are also tools that can do all the hard work for you but you might want to think twice before using them^[2].

Beware of the default link underline.

Unless you want to risk compromising legibility and/or usability with an alternative link styling know that it is always ok to go with a simple underline (figure 2.1).

Wether the default underline may cause readability issues or not is for you to judge. I strongly recommend setting text-decoration to none and replacing it with border-bottom: 1px solid; padding-bottom: 1px. This way the underline won’t cut through nor melt with the descenders^[3] (figure 2.2).

Be careful with Helvetica.

Helvetica is beautiful. It is also almost unreadable at smaller sizes on some machines. Consider using Arial or — if you really must — Helvetica Neue when setting font-size to less than 12px^[4]. Set your pages’ body text to Arial — if sans-serif is what you’re after — and use Hel­vet­ica only for headings.

Use better CSS font stacks.

Last year Unit Interactive published an extremely useful cheat-sheet, a reference I’ve been using since then in every html & css coding job. Better CSS Font Stacks helps you chose the right set of typefaces to use on your website. It provides you with a wide range of ideal, web-safe choices (the one you wish would appear for possibly all the users) accompanied by fitting (for when the first is not present), common and generic alternatives. You’ll find download link in the Unit Interactive’s blog post (link) where you can read all about the document and learn how to use it.

Avoid sans-serif small-caps mishmash.

font-variant property is experiencing its renaissance. No wonder, it definitely does its magic when applied to serif typefaces and tagged along with positive letter-spacing (figure 3.1).

Avoid applying this property to sans-serif typefaces such as Arial and Helvetica (figure 3.2). Especially at smaller sizes. If you really have no other option try using text-transform: uppercase first.

Embrace the paragraph typography.

Text paragraphs don’t have to look dull. There is at least a dozen different ways to style paragraphs with css. Read Jon Tan’s article on The Paragraph in Web Typography & Design and take a look at the cheat-sheet accompanying the article for more information.

Experiment with different numerals.

This may seem outrageous to some of you but I’ve recently begun to enclose all the numbers I use throughout the posts here at Aesthetically Written in separate spans so I could have more control over their typographic presentation. If you have both Baskerville and Georgia installed on your machine you’ve probably already noticed that I differentiate numbers with the latter. It’s just because the Georgia’s numerals are much sexier than those of Baskerville! Try it in one of your future projects, not necessarily in the same configuration, and — I guarantee — you won’t regret it.

Style subscript and superscript text properly.

sub and sup tags may come in handy in only a few isolated cases. When they do an extra line of css is necessary. Otherwise leading may suffer (figure 5.1).

Set line-height to 0 in order to avoid the leading issues. (figure 5.2).

I hope that some of you enjoyed this article and found the tips listed above useful. I’d like you to know that I plan on making Type O’clock become a series of articles published on a regular basis. Hence, I’d really use a few words of encouragement and/or constructive criticism =) Have a great day and I’m looking forward to hearing what you have to say.

Oh! And all the best in 2009!

1. There’s an almost poetic detailed description of the river problem written by John Boardley’s over at iLT. You might want to check it out.
   http://ilovetypography.com/…/extreme-type-terminology…/ up ^
2. Hyphenator.js
   http://code.google.com/p/hyphenator/
   wp-Hyphenate Wordpress plugin:
   http://kingdesk.com/projects/wp-hyphenate/
   up ^
3. In typography, a descender is the portion of a letter in a Latin alphabet that extends below the baseline of a font. Read more about descenders at Wikipedia.
   http://en.wikipedia.org/wiki/Descender up ^
4. Trevor Davis prepared a couple of screenshots illustrating the issue with Helvetica at smaller sizes. There’s also a demo page for you to try Helvetica in your browser of choice.
   http://trevordavis.net/blog/web/stop-using-helvetica/ up ^

Both comments and pings are currently closed.