Why Do Some Beautiful Fonts in Print Look Horrible on the Web?
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:
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:
- 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.
- 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.
- 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.
- 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.
- 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:
Here’s what happens with the Helvetica font at 12px, 10px, and 8px, shown below 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.
One 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:
- Meet MiniMono, a New Variation on the Classic Mini7 Pixel Font
- Nano Sans: Another Great Pixel Font by Joe Gillespie
- Maxxi - Another New Pixel Font by Joe Gillespie
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 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.
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.
- 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.
- 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.
- 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.
Articles and Tutorials
Definition at Webopedia
Easy-to-understand article all about anti-aliasing, why some fonts can become blurred, and plenty of great examples. By Joe Gillespie, WPDFD (Web Page Design for Designers).
- Anti-aliasing Resources
About.com’s Guide HTML/XML section on anti-aliasing resources has quite a few links to helpful definitions and articles about anti-aliasing.
- Creating Graphics for the Web: Anti-Aliasing
by Jim Smith, Wide Area Communications. Helpful explanation and samples of anti-aliasing and Web graphics, links to more info, too.
- Photoshop Crash Course: Pro Anti-Aliasing
by Jim Frew for HotWired’s Webmonkey. Covers Photoshop’s anti-aliasing settings and how to create anti-aliased text images for the Web with Photoshop.
- Smooth fonts in Microsoft Windows
at Microsoft’s site
- TrueType and Anti-Aliasing
Helpful discussion of truetype fonts and anti-aliasing, by Truetype Typography.
- Using pixel fonts in bitmap editing programs - Photoshop, FireWorks, etc.
Helpful and easy-to-understand tutorial by Joe Gillespie at Minifonts.com.
Fonts for the Web
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.