Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

  • Articles Home
  • Why Do Some Beautiful Fonts in Print Look Horrible on the Web?

Articles: Why Do Some Beautiful Fonts in Print Look Horrible on the Web?

Originally published April 30, 2002

A font chosen by a publisher client of mine is beautiful (and appropriate) in print at various sizes but lousy on the Web in a comparable small size for the companion site I’m in the midst of designing right now. Why does that happen? I’ll explain some of the basics below and provide some Photoshop tips, too.

Choosing Fonts For Web Graphics

To choose appropriate fonts to use for your Web graphics, first let’s do a quick review of anti-aliased text. Below is a sample of anti-aliased and aliased text with Garamond. Notice the smooth edges of the anti-aliased text and how jagged the edges are with the aliased text:

sample of aliased and anti-aliased text - using Garamond, font size 172, created in Photoshop 7.

As shown in the magnification to the left, the anti-aliasing smooths the curved edges by adding intermediate colors to the edges.

And look how jagged the same letter edges are with the aliased text. Big difference, isn’t it?! Well, curves and diagonal lines on-screen will be jagged like that unless they’re anti-aliased.

How does anti-aliasing impact the fonts you choose to use on-screen for Web graphics?

If anti-aliasing smooths the curves and diagonal lines in your on-screen fonts, the problem is solved for creating Web graphics, right? Well, no unfortunately. I’ll explain why.

Variances Among Font Designs:

  1. The curves, diagonal lines, and widths of characters can vary substantially with the particular font design and shape of each letter, number, or symbol. Therefore, the anti-aliasing can also vary, naturally. Each font must be evaluated for its clarity when anti-aliased at the particular size needed, too (more on font sizes below).

    In the sample below using anti-aliasing for each one, check out which are readable and clear, which are unreadable, and which are somewhere in between at 12px and 30px.

  2. Many fonts are designed for print at high resolution and when transferred to on-screen use will not adapt well. (Print also is based on dots, not squares.) Fonts for on-screen use are created with square pixels in mind. This can make a big difference in clarity, especially in terms of anti-aliasing.
  3. Some fonts are more square in their character designs and don’t need to anti-alias as much as a result, coming across on the Web as far more clear and clean. If there’s a lot of anti-aliasing, the letters can appear blurry, and sometimes can be too blurry to read well on the Web.
  4. Another consideration with fonts and anti-aliasing is how fat or thin each line is within a character. Fatter, more square fonts may work better for Web graphics than fonts with narrow and more curved lines.

    Italic fonts are by nature more diagonal, thus having more anti-aliasing and potentially blurred lines. Therefore, they may need more care (see my tips below) or avoid them (there are ALWAYS exceptions).

    Thin handwriting fonts can be beautiful in print but may end up looking too blurry on-screen because of the amount of anti-aliasing compared to the thin line widths and usually combined with more curves and diagonals.
  5. The smaller the font size becomes, the more compacted all the curves become, and the smooth lines can end up becoming blurry. When letters are larger, they usually appear more clear and clean around the edges. However, if you use its aliased counterpart instead, the spacing between letters may not be even and they may still look jagged.

    Here’s what happens with the well-known Helvetica font at 20px, 18px, and 16px, shown below as aliased and anti-aliased:

    Samples of Helvetica font at 20px, 18px and 16px shown as aliased and anti-aliased

    Here’s what happens with the Helvetica font at 12px, 10px, and 8px, shown below as aliased and anti-aliased:

    Samples of Helvetica font at 12px, 10px and 8px shown as aliased and anti-aliased

    Pictures speak 1,000 words, don’t they?

    Also note that Helvetica for Web graphics at 8px shown above without any tweaking becomes unreadable, whether aliased or anti-aliased.

A sample navigation using Joe Gillespie’s Minomono fontOne of the reasons Joe Gillespie’s new Minifonts.com site is doing so well is because he’s created some great pixel fonts that work well at small sizes for the Web, and he’s been creating larger pixel fonts that work well on the Web, too. They’re created with square pixels in mind right from the start. They must be used with anti-aliasing turned OFF in graphics programs, which ends up creating cleaner lines. If there’s a disadvantage, it’s that they don’t size up and down in the same way as other fonts, although the size can be changed in multiples. (Joe’s Readme instructions included with each font explains the multiples to use.) Joe also provides helpful explanations at his site.

See also my reviews here of several of Joe’s terrific fonts:

So, if a font isn’t designed for digital media with pixels in mind, they’ll probably end up having jagged edges instead of smooth lines unless anti-aliasing is turned on and used in one’s graphics. Microsoft’s font smoothing makes the fonts have anti-aliased edges for your CSS- and HTML-designated fonts and other screen fonts, which is why they look smoother online and on your computer screen.

Photoshop Tips

Photoshop has several anti-aliasing settings (one more is added to Photoshop 7), which can come in handy for experimenting with various fonts and sizes to achieve the greatest clarity.

Photoshop 6 screenshotPhotoshop 7 screenshot

I suggest experimenting with each of these settings to see which provides the most clarity for the particular font and size that you’re using.

A Few of My Tricks

Here’s an overview of three of my tricks to help improve clarity after I’ve already chosen the anti-aliasing setting. While I use Photoshop, you can do something similar in Paint Shop Pro. Which approach I use depends on the look I need and the particular font (and sometimes I use more than one of these, too). Experimenting and playing around in Photoshop or other graphics program will show you a lot of possibilities, too.

  1. Sometimes I’ll create a duplicate layer to help achieve greater clarity especially for smaller font sizes (mostly for fonts that aren’t based on digital media). I then reduce the opacity of one layer as needed to help maintain clarity while not making the font look overly bold.
  2. Another trick is to create a very small subtle drop shadow, which will act to accentuate the edges and make the font appear more clear. Too much will end up making the font look more blurred, so once again, experimenting with settings to achieve the greatest clarity is best.
  3. Another trick that’s more time-consuming and sometimes more painstaking is to zoom in on your letters and retouch them. Joe Gillespie provides an example with the Helvetica font at 12px that shows what can sometimes happen and that retouching can help. He mentions a copy/paste approach, and I’ll do that in addition to using the Paintbrush tool in another layer to manually draw in lines and cover other problem areas. I’ve had to do this especially when a client requires a specific font that can be problematic on the Web.

Resources

Articles and Tutorials

Fonts for the Web

  • Minifonts.com
    Joe Gillespie’s exceptional pixel fonts designed with the Web in mind.
  • Pixel Fonts
    WebsiteTips.com’s Pixel Fonts resources. Lots of links to great pixel font sites. Some are free, some are reasonably priced.

Information about the Samples

All graphics were created with Photoshop 7.0, with the "crisp" anti-aliasing setting and saved as .gif images. No retouching or kerning was done to any of the samples.

08:46 am, pdt30 April, 2002 Comments, Trackbacks ·

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points, by 37Signals. New Riders Press (March 2, 2004). 

Web Accessibility: Web Standards and Regulatory Compliance

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/articles/typography/webfonts/
Page last modified 9 August, 2007 - 12:56pm PDT Page load time: 0.009536 seconds.