Grow your CSS skills. Land your dream job.

Making the Most of the Limited Choices in Web Typography

Published by Chris Coyier

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.

typetester.png

csstype.png

fonttester.png

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.

Comments

  1. Good article. You thought about suggesting sIFR? Its fairly simple and effective. I use it for my side bar headers on my website.

    This allows you to have nice decorative text and not use the web safe fonts as per above.

  2. Hey Jermayn,

    Yep! I mentioned that in the article =)

  3. Doh! Must have missed that paragraph. Excuss my stupidness :P

    In regards to sIFR I would only suggest them to be used for headings etc, which I think they were intended for. For content I personally think Verdana and or Georgina is the best solution as its the best for readability etc

  4. Permalink to comment#

    I can’t remember where I first came across the fact that widows was poor-form in typesetting but recently came across a jQuery plugin that at least allows you to add this level of detail automagically. http://tinyurl.com/2343yc.

  5. John Schires
    Permalink to comment#

    Here’s a good page that shows all the common web fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

  6. @Karl: Very cool. I saw on that link you posted there is actually a WordPress plugin by Shaun Inman. Installed it and it works great. All it does in include a &nbsp; character in between the last two words in the post titles. Brilliant really.

  7. I used Georgia all over my site and I love it. It looks particularly good really large. Unfortunately I think it sucks when made strong, but it’s a small trade-off for the rest of the look and feel.

  8. @Michael Ott: Yeah man, I had a Georgia fetish for a while too. I love it large, bold, and with the letter-spacing pulled in a few pixels. I think I’ve gone through fazes loving all the web fonts at one time. Better to love them than hate them.

  9. Edjuh
    Permalink to comment#

    Good article, thanks!

    1 thing:
    “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 =)”

    Take a look at this: http://www.csscripting.com/css-multi-column/example1.php

  10. That’s pretty cool Edjuh. It’s amazing how much javascript is starting to be used to handle actual layout and control CSS. And also how those things it’s doing are doing it because of a lack of that control with CSS, where it should be.

  11. Bert
    Permalink to comment#

    Regarding “widow-ing”; I always put a non-breaking space ($nbsp) before the third or fourth last word of a paragraph.

  12. Comin Sans! :O

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".