Virtual Web Design

Home|Planning|Design|Storyboarding|Hosting|Promotion|Services|Links|FAQ|About|Privacy

Fonts

Virtual Web Designs - Choosing Fonts

One of the most important parts of a web page is text. The way in which you display the text on your web page will have a great impact on your success. It can make your page look very professional or very unprofessional.

To ensure your visitors see the fonts as you intended you need to use fonts that are common to most operating systems. When a font is specified within a HTML page, the browser first checks to see if the correct font is installed, as long as it is the page is displayed.

Within the design of a HTML page the web developer usually codes the font using more that one font, such as a font-family: Verdana, Arial, Helvetica, sans serif for sans serif fonts or Georgia, Times New Roman, or Serif for serif fonts. When you give the browser a selection, the browser chooses the selection.

More importantly, you need to use fonts that are designed specifically for screen use.

Tips

When placing text within your web page, always be consistent with your fonts. In other words, don't use different fonts throughout your pages. Don’t use all capitals or underlining in words. (It’s old fashion and underling usually makes users think its a link.  As far as capitals, it implies that you are yelling.)

About Fonts

Sans Serif include pics – a category of web typefaces that do not use the small lines at the ends of characters.

Serif – include pics – a category of web typefaces that are very plain with no small lines at the end of characters.

For serif fonts, traditionally Windows has used Times New
Roman while Macintosh has used Times or Palatino. For Sans Serif fonts, Arial is traditional for Windows and Helvetica is used for MacIntosh.

Fonts for Screen Use


Times New Roman is a Windows serif font that looks like something you'd see in a newspaper or magazine. It's specially hinted for easier reading on-screen, but Microsoft's free font Georgia is really a better typeface for the screen.

Times is a Mac serif font. It's similar to Times New Roman, but it isn't as carefully designed for on-screen viewing.

Georgia is a Microsoft's serif face. It's much easier to read on screen than other serif Web fonts because it was designed for the screen. Georgia has excellent italics that are easy to read and attractive.

Arial is a Windows sans serif font that has a streamlined, more modern look, but isn't easy to read on screen because it's narrow and can look very light in smaller sizes.

Helvetica is a Mac sans serif font similar to Arial.
Verdana is an extremely easy-to-read sans serif font that's included with the Internet Explorer.

Tahoma comes with Microsoft Office and is almost identical to Verdana.

Comic Sans MS is a sans serif font that's included with the Internet Explorer. It's informal and friendly, which is great for some Web sites, but not professional enough for others.

The main point I am trying to make here is don’t get stuck on the type of font you want to use on your web site as your visitors may not be viewing the screen the way you are.
You can use bold or italic to emphasize some text, but keep in mind that italic type looks better for serif fonts, while bold type looks better for sans serif fonts (sans serif means without serifs - the little doohickeys at the ends of each letter).

In HTML, all of the content of a web page is coded within tags. The <font> tag allows designers to display how the text will look on a page. In addition, web pages are coded with 3 various choices listing the best font first. The end user actually determines what the font will be. Therefore an experienced webmaster would code a font face as follows:

For serif faces, this should be...
<font face="Georgia,Times New Roman,Times,serif">


For sans serif faces, it should be...
<font face="Verdana,Arial,Helvetica,sans-serif">

Now we need to look at the pro’s and con’s of graphics as well as legal issues!

 

For more information please email webmaster@virtualwebdesign.ca.

Copyright © 2006 Virtual Web Design

[Home] [Planning] [Design] [Fonts] [Graphics] [Buttons] [Logos] [Backgrounds] [Layout] [Storyboarding] [Hosting] [Promotion] [Services] [Cool Stuff] [FAQ] [About] [Privacy] [Site Map]