KD Web Hosting & Design Solutions

Practically every personal computer has a set of fonts installed. These fonts are the default fonts for the operating system. Different operating systems can have very different sets of fonts installed. When you are designing a Web site, you need to keep this in mind. If you decide to use a font on your page that a visitor doesn’t have, that font will render differently on the viewers machine – and often will be very ugly!

For this very reason you should only use Web safe fonts using the style attriute. The font family is set with the font-family property. More than one font family is specified in a comma-separated list:

<p style=”font-family: arial, helvetica, sans-serif;”>Content goes here.</p>

The first font listed, arial, is an extremely common font availale on most computers. In rare cases, a computer may not have arial installed. Helvetica, though, is widely installed among Apple computers, and it looks very similar to arial, so helvetica is listed second. And in extremely rare cases, some computers may not have arial or helvetica installed. In this case, sans-serif is used. This is a default font that the Web browser will use if it cannot find any of the previously listed fonts. There are four families of Web safe fonts:

Serif Web Safe Fonts

font-family: georgia, times, serif;
font-family: times new roman, times, serif;

Sans-Serif Web Safe Fonts

font-family: arial, helvetica, sans-serif;
font-family: verdana, geneva, sans-serif;
font-family: trebuchet ms, helvetica, sans-serif;
font-family: tahoma, geneva, sans-serif;

Monospace Web Safe Fonts

font-family: courier new, courier, monospace;
font-family: lucida console, monaco, monospace;

Cursive Web Safe Fonts

font-family: comic sans ms, cursive;

Common Fonts

The red ‘X’, indicates very common fonts; the green ‘X’‘ indicates Microsoft Core Web fonts which are somewhat less common for some operating systems; the grey ‘X’ indicates Vista fonts which may be installed in some older versions of Windows.

This tutorial was created on the Vista operating system, so fonts may vary in appearance depending on what system the viewer is using. On all examples, only the named font and generic font is being used.

Tips and Notes: Monospace fonts are useful when you want to make sure characters all line up with exactly the same width. Displaying code or tabular data without using a table are good uses for monospace fonts. Currently, there aren’t many Web safe cursive fonts, and they should be avoided.

Understanding browser and screen resolutions is important when doing Web design. You should design Web sites for the LOWEST resolution and the most COMMON resolution; with the end design still looking good for those that are using much larger screen resolutions.

In 1995, 640×480 resolution monitors were about the best you could get without going broke. In 2004, 640×480 resolution made up less than 1% of most Web site traffic. People are now using computers with 1024×768 and higher resolutions in greater numbers.

As you can see from the chart below, 23.2% of the visitors to my Web site have a screen resolution of 1024×768. Only 3.2% are still using 800×600.

If I were to design a site for this specific group of people I would use the common size of 1024×768, meaning a handful of viewers would have to scroll horizontally, for most it would fill the screen, and the rest would see more white space. If I wanted to make sure no one had to horizontally scroll, I would design the site for 800×600 screen resolutions.

Screen resolution is independent of browser resolution. Just because someone has a large monitor does not mean they keep their browser window maximized. I don’t because it makes reading Web sites much harder. My monitor is 1920×1080, but I keep my browser sized at 1024×768.

Here are 2 great sites to help you determine and set your browser size.

whatsmy.browsersize.com
setmy.browsersize.com

Following are 2 screen shots of my monitor. The first screen shot is my browser window maximized at 1920. As you can see, there is a lot of space on either side of the Web site, which makes it hard to read. The second screen shot is my browser window set at 1024×768.

In an informal survey of friends and family, all but three use monitors that are 1024×768 resolutions. Four kept their browsers maximized using the monitors default settings, one used 800×600 because they could not read the text, and the rest had their browser window sized smaller than their screen. Now, this isn’t a scientific survey, but it does show you that you can not rely on the fact that everyone views the Web the same way.

There are several things you can do to make sure everyone can view your Website easily.

Design your site with a fixed width. Fixed width pages are exactly like they sound. The width is fixed at a specific number and doesn’t change no matter how big or small the browser is. This can be good if you need your design to look exactly the same no matter how wide or narrow your readers’ browsers are. People with browsers narrower than your design will have to scroll horizontally, and people with really wide browsers will have large amounts of empty space on the screen.

Or you can use flexible width pages allowing you to design pages that focus more on your customers. But you need to be careful that a page viewed at 1920x is not too hard to follow.

To determine your screen resolution, XP users can right click on their desktop, go to PROPERTIES then SETTINGS. VISTA users also right click on their desktop, go to PERSONALIZE then DISPLAY SETTINGS. Mac users go to SYSTEM PREFERENCES then DISPLAYS.

So, with all of that said, what width should I make my Web site? Two years ago sites were commonly built at a width of 755 pixels. But with larger monitor resolutions being more the norm, the suggested width is 950 pixels.