Informative Writings
» Fonts: What to Avoid
Occasionally, I used to see people on various messageboards, stressing out about which font families to use and how to align their text. I'll admit that sometimes, this subject of "font" didn't seem quite that important to me, and I wondered why in the world these people where worrying. Sometimes, though, I even went as far as to wonder, "Why are fonts so important, anyway?"
The truth is that some web designers stress the imporance of font selection so much that they maintain that web design is 95% typography. Whether you agree with that number or not is completely up to you, but nevertheless, I think it would be safe to say that the font of a webpage is incredibly important to the page's overall design. We must remember that since text is vital to conveying a person's ideas, if that text isn't presented in an adequate fashion, communication is hindered, and the visitor doesn't perceive the idea in the way that the creator originally intended (or it doesn't perceive the idea at all, in some cases).
This article is here to prevent that from happening. While I do realize that I'm no professional on the matter, I have created several webpages in the past and viewed many sites with information on design-related subjects. Therefore, I feel I’ve established at least a basic knowledge on what to do and what not to do when it comes to fonts. Because of the importance of this subject, I decided to compose a list of major things you should avoid when making webpages.
Avoid Small Font-Sizes / Absolute Sizing
Despite any urges you may have to use small, “compact” font sizes in pt or px (absolute) sizing, you must never do so, because not everyone will be able to read it. Remember: the entire reason you add design to your webpage is so you can appeal to the largest audience possible. If you don’t care about what your visitor can or cannot read, you might as well save your webpage on your disc drive and never show it to the public. Since you’re probably not going to do that, it would be in your best interest to always, always, always value accessibility first.
Even though many say “well, you can change the sizing on your browser”, the truth is that in browsers like Internet Explorer 6, fonts cannot be resized on webpages that use absolute sizing. For some reason, Microsoft made a bunch of mistakes when they were creating the browser, which means that today, we still have to deal with the mess they made. And even though Microsoft recently released Internet Explorer 7, which is supposedly better with font resizing, a good portion of internet users still use IE6. For those of you that are interested in getting hits on your webpage (i.e. every sane webmaster out there) you simply can't just disregard that audience--the best thing you can do is leave absolute font sizing and move towards relative sizing instead.
Why use relative sizing?
What you perceive as readable isn’t the same as what everyone else perceives as readable. You might have perfect eyesight and have the ability to read 7pt fonts and then feel inclined to put them on your pages, but that doesn’t mean that everyone else can. And if they can’t? They’ll leave, and that means less return hits for you!
How to size relatively:
“Ems” are font sizing measurements like pts or pxs, except ems are relative while pts and pxs are absolute. The default em size is “1em”, which is set to the default setting on the webpage viewer’s browser. “.95em”, for example, is 95% of whatever the font size is set to on your viewer’s browser. Percentages are another measurement similar to the em, except it would be “100%” instead of “1em” and “95%” instead of “.95em”. Seeing as sizing in relative measurements is a tiny bit more complicated than sizing absolutely, please view this article from Clagnut on the technical aspects of sizing relatively (it's not too hard to follow).
Avoid Low-Contrast Font Coloring
If I can barely read your font against your background, we know there’s something wrong. Use light colors on dark colors and dark colors on light colors. If your background uses a variety of colors or is textured, put your text inside an element with a solid background color (like a div) instead of directly against the background. When in doubt of how well your text contrasts, use a color analyzer.
Avoid Tacky or Decorative Fonts
Avoid using tacky/decorative fonts for all regular text on your webpage, which means avoid using
script fonts or "funky fonts" for your main text. I personally restrict myself to
using fonts like Arial, Verdana, Georgia, Tahoma, Trebuchet MS, etc. It’s not that I’m being
boring, but I feel that it’s creativity is more effective when used on an area of my page that actually
shows my creativity–like images, for example.
On a related note, when putting text on your webpage, only use fonts that came with your computer. If you had to download the font to get it, chances are that your viewers don’t have the font. If your viewers don’t have the font, it will instead appear as some other font family that you didn’t intend to use.
That's it! I hope you've enjoyed these font tips and have found them at least somewhat helpful. Feedback is always appreciated, so if you'd like, you can send some.