bla.st : what print designers should know about fonts on the web

You never know what fonts a user will have installed on their machine. Often it's only the default fonts installed with the system. On the web instead of specifying a single font, we can specify a whole list eg:

font-family: Optima, Helvetica, Arial, Sans-Serif;

The browser uses the first font it finds installed. In this case it will first try Optima, then Helvetica, then Arial, and if none of those were found, it will try the default Sans-Serif font for the browser. Optima and/or Helvetica is installed on Mac OS X by default, so almost all mac users will see one of those, while windows users will probably see Arial.

There are only a few fonts that come installed on both Windows and Mac OS X by default. The most commonly used of these include Courier, Times or Times New Roman and Arial. Here's a good guide to the default fonts.

Text should be text, not pictures of text

So if there is no guarantee the exact font we want is installed, why not simply make an image of the text? This is considered very bad practice, and has a number of negative effects on your site:

Search engines can't read your words, so your google ranking will suck
Images use more bandwidth and mean there are more resources that have to be downloaded, dramatically slowing down your site
Changing the text is a lot more time consuming
Screen readers for the visually impaired wont work
Users can't make the text bigger, which sometimes is essential on high resolution screens
The type of Anti-Aliasing used can't be changed, meaning text won't be looking as good as it could on some monitors.
With text, you can change fonts or style in two seconds using style sheets. You can't do that with images.

The user can change the size of the fonts

Almost all browsers allow the user to change the size of the fonts. For some people this is essential so they can read the page. For others it simply makes the page easier to read.

This is becoming more important as high resolution screens become more common. Some laptop screens have a ridiculously high resolution, which even people with 20/20 vision would have trouble reading.

It's important that the size of the fonts is not restricted in any way. This means not using text in images, and making sure the size has been specified in percentages or EMs, not pixels.

The user can change the size of the page

You never know what size a users browser will be. They might have a huge screen and like their browser maximised, or may be browsing your site on a tiny handheld computer. Design for a flexible "liquid" layout, with limits on the column width so lines don't get too long. According to Information Architects 100% easy 2 read page, 10-15 words is about right.

Users need high contrast and decent spacing

Many users have really crap monitors, or they are not calibrated properly. This means you have to have high contrast between text and background, otherwise it may be impossible to read. It's a real shame light grey on white looks so good, because you just can't use it.

More Information

These tips and more can be found at www.informationarchitects.jp/100e2r.

Web Design from scratch.com also has lots of good information on text and web design in general.

Design on bla.st
Digg This

Got a website? Promote it on bla.st free

Recent Entries

Older Entries

« bla.st Blog

What print designers should know about fonts on the web

Fonts may or may not be installed

Text should be text, not pictures of text

The user can change the size of the fonts

The user can change the size of the page

Users need high contrast and decent spacing

More Information