Web design and font useage

A tutorial on how to use fonts in web design.

There are two things you need to learn about text that is on a monitor compared to printed text - resolution and luminosity. First, when it comes to resolution, the text on a computer monitor is at a lower resolution than printed text. By resolution we mean that there are fewer pixels used to visually describe each letter. If you use too few pixels then the font will appear pixelated. The only way around this is to create anti-aliased type which means, for example, you would create grey pixels around a black font to make the letters appear more smooth. But this can make the letters appear fuzzy and is not an ideal solution. So on-screen text is not as easy to read as regular printed text because of the lower resolution of computer monitors.

The second difference between text on a monitor and printed text is that a monitor is luminous. Printed material is viewed by reflected light and the contrast ratio (the difference in brightness between the darkest and lightest parts) is restricted. The contrast on a computer display is much greater. Because of this pure-black type on a pure-white screen is difficult to read. Based on these factors, and other facts, here are some guidelines on choosing fonts for your web page.

Sans serif typefaces are better for the web

The old rule of serif fonts looking better than sans serif fonts when it comes to writing body text is reversed on the web. Sans serif typeface work best on the web for text copy because the serifs don't show up clearly on the low-resolution environment on computer monitors. Some of the common web fonts are Arial, Verdana, Trebuchet, and Tahoma.

Use a 10-point font size - 12-point at the most

The 10 and 12-point fonts are most popular font sizes for body text although sometimes they go as low as 8 and as high as 14. One thing to keep in mind is that the text looks bigger when you print it compared to on screen. For example a 12-point font looks big when printed on your printer so keep in mind how it looks on screen and printed - unless you have a special "printer friendly" page setup with a different font. An 10 or 11-point font is best for printing. If your design has narrow columns then the font size can even be reduced to 8 or 9 points.

Use Simple Fonts

Many beginning webmasters understand that in order for your page to get attention that you need to be different. This rule applies to many aspects of the web site business but fonts isn't one of them. If you use an alternative font that you think looks cool there is a good chance it will look amatuerish, stupid, and unprofessional. Choose a commonly used classic font like Arial. Body text should not be decorative - it should be purely functional and utilitarian. Decorative fonts can be used for special purposes only - like logos and maybe headers. If you are afraid you will use over-used fonts and look like everyone else then you can look at some of the lesser-known fonts like Gill Sans or Optima.

Don't mix fonts within a page

Using multiple fonts on one page and making them look good together can be difficult. Therefore, as a beginner it is best to use only 1 font on a page instead of taking the risk of the page looking bad. If you have to use 2 different fonts (for example, one for headings and the other for body text) then a serif font will work best with a sans serif font and the other way around.

Adjust line spacing to improve the readability of the body text

Line spacing, also called "leading," is very important not only for readability but also for appearance and should be analyzed because the default settings are rarely optimal and the difference between a text badly set and text with correct leading is a huge difference - even if you can't tell exatly what the difference is. In fact, incorrect line spacing is usually one of those intangible problems where someone can tell something is wrong with the look of a page but can't tell why. As a general rule, the amount of space between lines, expressed as a percentage of point size, should be no less than 120% but leading should be increased proportionally as line length increases. Also, if you are using a sans serif typeface for body text, leading should be increased to as much as 140% of point size. So a 10-point sans serif font would should have line spacing set around 14 points.

Adjust your word spacing

One of the most common mistakes of inexperienced designers is to set all type with the same word spacing settings. There are several different guidelines designers use when it comes to word space. They are: the greater the leading, the greater the word space should be. Text set in all caps should have additional word spacing. Extended fonts (fat letters) should have more word space and fonts with condensed faces (tall and skinny letters) should have less word space. Small type needs increased word space and large type needs decreased word space.


 
Bookmark this page: