Beginning: Expressing Your Style with Font Faces

You may have begun to get caught up in the excitement of being able to publish your words to a world-wide audience but as you look back through your work your say to yourself "Self, I really wish I could use a nicer looking font than that default one." Well, you are in luck. Changing the font face is easier than changing your socks.

Where do I start?

Which tag do I modify?
Which font face do I want to use?
What are some common font faces?
Some cool examples of font usage.

Which tag do I modify?

The face of the font is an attribute just like the size and color that are controlled through the <FONT> tag. The attribute that you need to set in order to change the font face is called (strangely enough) "FACE". Remember that your must terminate any <FONT> tag with a </FONT> tag. You simply wrap the text that you want your specific <FONT> instructions to apply to between the starting and ending tags.

It is important to point out that by specifying which font face you want to use you are really only making a request of your visitor's web browser. If the font face that you are requesting is not installed on your visitor's computer then the web browser will pick a different font that IS installed on their computer. Because of this fact it is recommended that you specify a few "backup" font faces in case your first request is not found. The commonly used format for making "backup" requests is to name as your second and third choices, a specific font face, and finally as the last resort a general font family.

(One of the main reasons for doing this is that, although most Windows Users have a lot of fonts in common, Macintosh users have different font names. So you might want to name a Windows font, then a Macintosh font, and finally a generic font family.)

Here is an example to get you started:

<FONT FACE="Verdana, Arial, Helvetica, Sans-Serif">
Some text that will be displayed in the first one of those fonts that the web browser can find.
</FONT>

This example first requests the "Verdana" font, a specific font face, if that face is not installed in the visitor's computer (that's your computer in this case) then it tries the "Arial" font, another specific face, if that is not present then the "Helvetica" font (found on the Mac), yet another specific font face, and if none of those are found then as a last resort any font representing the "Sans-Serif" family of fonts. It then displays the text following the <FONT> tag in whichever font has been found, and then terminates the use of that font when the browser encounters the </FONT> tag which tells it that this is the end of those font rules.

Which font face do I want to use?

Font faces have been a part of the printed word for a very long time. While there are some traditional uses of specific font faces you are free to use whatever face you think best expresses your style. Here are a few paragraphs which should appear in different font faces (provided the computer that you are browsing this page with has each of the specific fonts installed.) Each paragraph has some general explanation about the font face and common situations where you might want to use that specific font.

<FONT FACE="Serif">
This text will appear in the default Serif family font (if one is available.) Serif is a family of fonts which are noted for their angular "feet". These fonts are excellent for headings because they are more ornate and artistic, but harder to read when displayed at a size that allows them to fit reasonably into a paragraph on the screen.
</FONT>

<FONT FACE="Sans-Serif">
This text will appear in the default Sans-Serif family font (if one is available.) Sans-Serif is a family of fonts that are noted for their lack of angular "feet". At least in regard to Internet publishing these are traditionally used in paragraphs of text because they tend to be easier to read and less stressful on the eyes over longer periods of examination on a computer monitor.
</FONT>

<FONT FACE="Arial">
This text will appear in the Arial font (if it's available.) Arial is a specific font which is a member of the sans-serif family and is widely available on computers running any of the Windows operating systems. This is a good first or second choice font because it is so widely distributed and thus likely to be installed on many of the computers that your visitors are using.
</FONT>

<FONT FACE="Helvetica">
This text will appear in the Helvetica font (if it's available.) Helvetica is a specific font which is a member of the sans-serif font family. It's not always available so if you choose it be sure to select a second choice as well.
</FONT>

<FONT FACE="Verdana">
This text will appear in the Verdana font (if it's available.) Verdana has gained popularity with its recent introduction into the context of web browsers. It's a member of the sans-serif family and very easy to read. It also sizes very well.
</FONT>

<FONT FACE="Times New Roman">
This text will appear in the Times New Roman font (if it's available.) Times New Roman is a serif font which is widely available on computers running any of the Windows operating systems. It's a popular font but it can be difficult to read when rendered very small.
</FONT>

<FONT FACE="Verdana, Arial, Sans-Serif">
This text will appear in the Verdana, Arial, or the default Sans-Serif family font (whichever is the first one to be found in the order specified.) Using multiple choices is the smartest way to beat the odds that a font that you want will not be available to some of your visitors.
</FONT>

What are some common font faces?

Here are some common font faces. Not all computers will have each font so remember to use backup choices when you create a <FONT> tag that you want to use to change font faces. A few factors play a major role here for example the kind of computer and operating system your visitor are using. Consider that a visitor using a PC with Microsoft Windows installed on it will have different fonts than a visitor using an Apple iMac running OS 8. This is why naming the general font family as a last resort is important.

 

Font Name	Appearance
Arial	Arial
Courier	Courier
Helvetica	Helvetica
Impact	Impact
Serif	Serif Family
Sans-Serif	Sans-Serif Family
Times New Roman	Times New Roman
Verdana	Verdana

Some cool examples of font face usage

Here are a few ideas to spark your imagination. You are free to cut and paste these into your own pages and modify them in any way that you desire. We'd also love to hear of any great examples that you have. Notice the neat effects that you can achieve by combining the available font properties such as size, color, and face. For example <FONT SIZE=X COLOR=X FACE=X> where "X" is replaced by a value.

This is a nice starting sentence.

Is the EMPHASIS noticeable?