Effective
Web Design

In contrast to “Web buttons, graphical mistakes” by ‘popular’ demand I have compiled a short article on choosing the best fonts for web design and staying away from those less appropriate ones. But before we even get into choosing fonts there are a couple things which should be understood with fonts in web design.

Make your font accessible.

Make sure that you use a font that was installed with your operating system by default. This will increase the chances that other people will have the font that is used on the web design as it was automatically installed on their computer as well.

In the beginning of the Web, the only typographic constant was Times New Roman under Windows and Times on the Mac. But even that wasn’t sure because the user was in complete control of the fonts they saw.

I learned this the hard way; I was showing my client his new site, only to have an ugly font replace my nice font because his computer did not have the font I used.

Remember that is no matter how ‘pretty’ or ‘cool’ the font you use is, it should be easily viewed by other people. There’s nothing worse than having good useful content, yet viewers leaving because they are having difficulty reading it.

Avoid crazy fonts unless they are for typography. If you have a text logo it is more acceptable to have expressionistic font then for news headlines or general text.

Make your font nice for the eyes.

Use contrast within the background and the foreground. Viewers shouldn’t need to squint because the font is a similar color to that of the background. A good way to test this is by simply asking a friend if it’s easy to read, they shouldn’t struggle reading it… at all!

Don’t use italicize font unless it is nenecessary, use image quotations for your testimonials and other quotes, make it easier for your reader, don’t forget that they are the most important thing in your website.

What fonts to use.

• Sans serif fonts – serif fonts are fonts that have small accents and fancy tails to the letters.
• Arial – generally is a nice font to use and suits nearly all web designs except medieval and futuristic.
• Verdana – is used by default in some browsers, it’s easy readable, but it takes more space than the other fonts.

What fonts to avoid.

Comic Sans, It’s been used so many times that I’m amazed it’s still being used. It’s unprofessional and belongs were it was originally created for; children’s books. There is many other fonts we must avoid like Tekton Pro, Aharoni, Bickham Script, Eccentric Std and much much more.

Oh and in case you haven’t noticed, applying many different fonts in one design is a big no-no.

Fonts Lists

If you want to see the full list of supplied fonts grouped by OS you can check this list “Fonts Supplied by Different Operating Systems”

To see the certain font, hot it looks like check this link: Microsoft Typography.

Fonts replacement technology

sIFR (Scalable Inman Flash Replacement ) is an open source JavaScript and Adobe Flash based technology that enables the replacement of text elements on HTML web pages with Flash equivalents. It was initially developed by Shaun Inman and improved by Mike Davidson and Mark Wubben.

To learn some basics on sIFR’s technology, advantages and disadvantages you can visit the Wikipedia page for this topic.