Making the Most of the Limited Choices in Web Typography

So, what do we really have here?

As far as variety of font choices, things are pretty bleak. But Helvetica isn’t on pretty much every computer in the world because it’s a bad font. It’s actually a great font if you ask me, it’s just people are sick of looking at it being used without the love it deserves. Since (generally speaking) there is no way to “embed” a font into a web page you need to choose fonts that are guaranteed to be present on all users systems. You could choose “Avenir 85 HeavyCondensed” if you want, but it’s going to default back to the browser default for 99% of your users. Even though there are only about ≈10 completely web-safe fonts out there, it doesn’t mean your web typography is destined to suck. There is plenty you can do to make sure you are making the most out of your limited choices.

At the bottom of this article there is a header and a sample paragraph for all the regular web-safe fonts. This probably won’t come across in RSS readers, sorry! View the post on the site for the live samples.

How to deal with “make the font bigger!”

I’m sure you’ve heard this one before from a client or even a family member trying to be helpful. What they are really trying to say is “it needs to be easier to read”. The answer to that sometimes is to make the font bigger, but just as often it is something else that it making it hard to read. Here are some things to try other than blindly making the font bigger:

• Give your areas of text plenty of white space (padding) around them. Text needs room to breathe to be easy to read plus white space is generally a good thing in design.
• Make the text smaller. It might not work, but you’d be surpised how often it does. Like I said, text needs room to breathe and making it smaller might open up some space and actually make it easier to read.
• Increase the leading. Again with the breathing, extra space between lines can be just what the doctor ordered.

Kerning: it’s possible but it’s not pretty

If you spot a glaring kerning foul on a particular word on your website, it is possible to fix it, but it’s not the most semantically healthy approach. What you need to do is isolate the letter before the kerning problem and give it positive or negative letter-spacing to fix it. For example:

<span class="kern">W</span>ashington

Then style the kerning class in your CSS:

.kern { letter-spacing: -0.1em; }

Notice an em value is used so that it can expand and contract with the size of the text if the user resizes it, as opposed to a static pixel distance. This trick taken from this example.

Controlling Widows and Orphans

Because text size is never an absolute on web pages, controlling your widows and orphans isn’t easy (or even possible in most cases). The best you can do is manually insert <br /> tags in places where you see offending orphans. Do a bit of testing after you do this by bumping your text up and down and make sure you don’t make matters worse by creating weird text flow. I find this can be an effective solutions for things like headers more-so than within paragraphs.

Since there is no way to flow text between vertical columns, widows are much less of a problem. Personally I think text-flow would be an awesome thing to add to CSS3, so if that ever happens, we can worry about it then =)

Do some testing

Instead of doing your own make-change-then-save-it-then-reload kind of testing, there are some tools out there to help you play with web typography and make your choices that way.

Is there NOTHING we can do?

There are options. sIFR is a web technology that leverages Flash to essentially replace text of your choosing of with a font of your choosing. The results look great, degrade well, and remain search engine friendly. There are a couple of downsides though. The text becomes unselectable which makes it unsuitable for full paragraphs and you are unable to apply and rollover styling so it’s not always obvious to users if you make the text into a link.

A little more labor-intensive is CSS Image Replacement, which allows you to replace text with graphics while remaining search engine friendly. With a little extra work you could apply rollover styles, but otherwise suffers from the same weaknesses of sIFR.

If we can all hold tight for CSS3, there is a good chance real font embedding will be a part of that. Sure that’ll be years and years down the road, but progress is progress. The big debates surrounding it are mostly about licensing restrictions. Since fonts aren’t always free (especially not the good ones), it would potentially be breaking restrictions built into the fonts by the font artists and distributors to just embed fonts all over the web that anyone can view. Personally I think it’s absurd, of course we should be able to. Because I don’t personally own Bauhaus Neue, does that mean I shouldn’t be able to lay eyes on it in a print magazine? Of course not. As long as there is technology in place to properly protect the font files themselves, this should be a non-issue.

Here are those samples

Helvetica
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Georgia
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Trebuchet MS
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Verdana
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Comic Sans MS
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Times
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Courier New
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Lucida Grande
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Impact
This is a paragraph of text intended to show the basic look of this particular font. This is a paragraph of text intended to show the basic look of this particular font.This is a paragraph of text intended to show the basic look of this particular font.

Also pretty much safe are Arial and Arial Black. Arial is very very similar to Helvetica and Arial Black is crazy heavy in weight that it would be even more atrocious to show in paragraph form than Impact.