Why Typography is Important

Note: This article was originally published on the Omnistar Etools website.

When designing your site, a common mistake is to spend all your time working on nothing but content and layout. But, as in most things, it is always the little things that make you stand out from the crowd.

Typography is, when you think about it, one of the most important design decisions you can make on your website. Sure, your color scheme, layout, and logo are just as (if not more) important, but remember that the whole point of getting visitors to your site is for them to read your content, and that means that more than anything else, your site visitors are going to be looking at your typography near-continuously. So you can see why choosing a good typographic style is extremely important for every web designer.

There are a few main issues that you have to keep in mind when dealing with typography:

Minimalism

Never use more than three different fonts on a single page, unless you have an exceedingly good reason to. One for headers, one for subheadings, and one for content is more than enough.

Serif versus Sans-Serif

Serif fonts do not scale to smaller sizes well, so copy should always be in a sans-serif font. Headers are a different matter, so long as they are larger type.

Using CSS

Site-wide typography decisions should always be maintained at the stylesheet level. This is important for three main reasons.

• Good SEO technique requires content keywords to be coded semantically–headers should use tags, and emphasized content should use tags. By keeping typography out of the html code, you make it easier to code semantically, and to update for keyword-related issues later on.
• Your pages render better. On dial-up connections, if you don’t use CSS, then every time a new page is loaded, the browser has to read the style commands over again, and so momentarily, your site will look very different from how you wish it to appear. With CSS, this problem occurs only on the first page load; every subsequent load uses the same style sheet, and so the problem never recurs.
• Bandwidth conservation & load times: by using CSS for typography, you save on bandwidth costs and your pages will load faster as a result.

Font-family attribute

It is sometimes tempting to resort to all kinds of fancy font faces, but remember that the end user will only see the fonts that they have installed on their computer. As a consequence, you must always remember to cite a number of fonts, from your first pick to your last, ending with a description of the font-family you prefer. For example, you might use the following in your stylesheet:

h1   { font-family: Garamond, Georgia, serif; }

body { font-family: Verdana, Arial, sans-serif; }

Column width

Dictating a maximum column width is useful for many reasons, but the most important one is that when you have a large block of text, it is much easier for the eye to read the text in narrower columns than in columns that take up the entire monitor width. Magazines and newspapers limit column width for the same reason you should: the human eye finds it much less stressful to read in smaller blocks of text.

Browser variability

Remember that how your site looks on your computer is not necessarily how it may look on someone else’s machine. Every browser may show typography differently; that’s why you have to pay careful attention to your css specifications.

Of course, this is certainly not all you’ll ever need to know about typography. But it is a start that will not only make your site more user-friendly, but also will help to keep more visitors coming back. After all, that’s what being a webmaster is all about.