The Problem Of Font Usage

I always maintain that in spite of advancements in [tag-tec]graphics[/tag-tec] technology, web is a text based medium and will remain this way for times to come. Graphics, animation and videos will compliment text but cannot replace it. It is surprising just how ignorant most page authors are about typography. If you use the wrong font, you make your page painful to read.

Why would somebody read your content if it is a pain.

The web has a big font problem. You can only specify fonts by name in HTML and CSS. That means that, apart from logos which can be done as images, you’re relying on the people visiting your site to have installed the fonts you’re using for headings and body text.

Most people will only have the basic fonts that come with their operating system. That should still be okay but they don’t even use the same operating system!

Therefore all you can do is provide an order of preference from a list of similar [tag-tec]fonts[/tag-tec], with your favourite first. The list will then end with either ‘serif’ or ‘sans’, depending on whether the font had serifs i.e. the extra little parts of the letters, like a little kick after a small d. ‘Sans’ is short for ‘sans-serif’, meaning that the font has no serifs. In French sans means “without”.

In practice, there are not many web fonts which can be used at all. You’re pretty much limited between choosing either Georgia/Times New Roman/Serif, or Verdana/Arial/Sans.

As a general rule, it is better to use sans-serif fonts on the screen, and serif fonts in print-outs. Serif fonts are difficult to read on a monitor because they’re hard to represent in pixels, while sans-serif fonts have a tendency to look ‘chunky’ when printed.

There are a few other fonts that most users have installed and that might be useful to you, although not for body text. These include

Courier New – A typewriter like font
Trebuchet – An interesting font for headings

Impact – A tabloid newspaper like font

Webdings – A set of images with things like fast forward and rewind symbols.

But inspite of this there are further limitations. Verdana looks terrible in larger sizes. Verdana is largely bad in headlines. You might try Arial instead for this, preferably in bold. An ideal combination for many sites is large Arial for headlines with small Verdana for body text.

However, you should also make sure that you don’t make your fonts too small, as older users or others with bad eyesight may have trouble reading them.

It is better if you specify font sizes in relative units (%), not absolute units (pixels). This will make sure that your font sizes pay attention to the preferences the user has set in their browser. If they’ve asked for very large fonts, they’ll get very large fonts.

Popularity: 5% [?]

If you enjoyed this post, make sure you subscribe to my RSS feed!

No tag for this post.

Home For Proofits runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Speak Your Mind

*

CommentLuv badge
Rss Feed Tweeter button Technorati button Reddit button Webonews button Delicious button Flickr button Stumbleupon button