Tips & Tricks
Using Fonts

Different browsers allow developers to highlight text in different ways, so be sure who your audience is before you begin using one of these special fonts.

In order to specify a color for a particular line of text, the HTML FONT tag is used. This tag contains 3 parameters that allow a developer to specify different characteristics for the display of text.

Start the Font Tag Tag Parameters End the Font Tag
<font Size=1 to 7    
Color=#value     >
Face=type    		 </font>

<FONT SIZE=4 COLOR=#008000 FACE="Arial"> your text </FONT>

The above font command will produce:
your text
Color=#value
If you're using an HTML editor, you probably have a feature that allows you to highlight a certain word(s) and assign a color to that text based on a color palette.
This is very helpful, because the editor will insert the color value for you in the font command.
 
If you don't have an editor that provides this feature, take a look at our Color table to find the codes for their associated colors.
 Face=type
The face parameter allows you to modify the face type of a word or line of text. Again many HTML editors provide a feature where you can pick from a list of face types currently installed on your PC. This is very much like the face type options used in many of today's word processing packages.
 
One thing to keep in mind with this parameter. If your visitor does not have the same font face installed on their PC, their browser will not be able to display the text in the way you intended.

The size of a font is based on the default setting you give the overall page. This is called the BASEFONT. Most often the default size of a web page is BaseFont=3. My personal preference is to use BaseFont=2. Many people today are buying bigger monitors and the old BaseFont=3 size is just a little too large on the screen for my liking.

Again many HTML editors provide a feature where you can define the Base Font, Text Color, Link Color and even Visited Link Colors. If you chose to use these settings, you'll be over riding your visitor's browser settings for as long as they're on your web page. For instance, the settings we use for this page are defined in the Body tag. This sets the color and size of the over all page:

<BODY BGCOLOR="#ffffff" TEXT="#303061" VLINK="#ff0000">
<BASEFONT=2>

  • BaseFont = 2
  • Text Color = Blue, Value #303061
  • Visited Link Color = Red Value #ff0000

Using these settings in the Body Tag will change the way a font size appears on a web browser. In other words, font size=2 is not the same size on a web page when the base font is set to 3 rather than 2. Here's an example:
§ Font Sizes §
 When The BaseFont=2 When The Base Font =3
This is Font Size = 1
This is Font Size = 2
This is Font Size = 3
This is Font Size = 4
This is Font Size = 5
This is Font Size = 6
Font Size = 7 		 This is Font Size = 1
This is Font Size = 2
This is Font Size = 3
This is Font Size = 4
This is Font Size = 5
Font Size = 6
Font Size = 7  

When the basefont is defined at a higher setting, the fonts you use on your page will also set the text on your page to a higher size as well.

Depending on what type of web browser you're using to view this page. Font Size 6 and 7 in the right column may appear to be the same size. This is simply a limitation with some browsers. Technology and code changes occur so fast that it's hard to keep up with the demands of business applications running on the web. Many browser companies do a good job of updating their software as well, but there are some components that either get left behind in favor of other more imperative advancements, or they simply don't feel the need to make the changes within their browser.
 
 Next: Page Design while Using Color