HTML Font Styles & Codes

...

On this page you'll find an overview of some commonly used HTML font styles and the codes that produce them.

To begin with, you can designate what font style, a.k.a., 'typeface', a browser will use to display the text on your web page using the face attribute in the font element. Theoretically, you can use any font that you have installed on your computer (if you are using Windows, you can see which fonts you have installed on your computer by browsing through your Fonts folder which is typically located at C:\Windows\Fonts).

HOWEVER, if you are creating a web page that you intend to make accessible to the World Wide Web, you must keep in mind that when other people view your web page, if they do not have your specified font installed on their computer then your web page's text will be displayed on their screen using their browser's default font. Incidentally, a browser's default font is also what is used when no font is specified in the source code of a web page. If you are using Internet Explorer, you can see what the default font is by opening Internet Explorer and then clicking on Tools » Internet Options » (General tab) Fonts.

Hence, for any web pages existing online, it is best to use fonts that most people are likely to have installed on their computer. Generally speaking, these web-safe fonts are: Arial, Verdana, Courier New, Times New Roman, Comic Sans MS.

This is Arial.

This is Verdana.

This is Courier New.

This is Times New Roman.

This is Comic Sans MS.

(For Mac users: The equivalent of Arial is 'Helvetica' and the equivalent of Times New Roman is 'Times'.)

The above five examples of font faces are all using the size=3 attribute. The type of font face you use will largely depend on the style of your web page and what level of professionalism you wish to convey. For a traditional or scholarly look, use Times New Roman. For a modern look, use Arial or Verdana. For an informal look, use Comic Sans MS. You should also bear in mind that different sizes affect the readability of different fonts. For example, several paragraphs of text using Arial rendered at size 2 may be perfectly readable but several paragraphs of text using Times New Roman rendered at size 2 may become tiresome.

To apply your selected font face, simply enter the attribute-value pair:

face="font name"

...into your  tag where font name equals the name of any official font.

Example:

This text will be displayed using Times New Roman. 

The  end tag terminates your formatting instructions at which point you can declare a new set of ... tags to display the text that follows in a different style.

Example:

Here is some text using Times New Roman font face...  <font face="arial">Here is some text using Arial font face... 

You can also 'nest' ... tags meaning that you place one set within the other. This has the effect of beginning one font declaration and then, before it terminates, a new or second font declaration begins. When the second font declaration terminates with its  end tag then your text returns to the original font declaration. In this manner your visible text 'inherits' font styles from all previous font attribute declarations (including size and color) until the associated  end tag terminates the declaration.

Example:

<font face="times new roman">This text is Times New Roman <font face="arial"> while this text uses Arial until the end tag is encountered</font> ...and now the text returns to Times New Roman.</font>

NOTE

For any font face value that has multiple words such as "Times New Roman" or "Comic sans MS", it is mandatory to place this value within double quotation marks ("..."). It's a good practice to place all attribute values within double quotation marks anyway since this will become the standard for future versions of HTML.

To ensure that a wide variety of computers with varying operating systems will display web pages as intended, some web authors make font face declarations in their source code using a comma-separated list of fonts. Macintosh computers may not have a typical PC font such as Arial installed and likewise PC computers may not have a typical Mac font such as Helvetica installed. Since Arial font looks like Helvetica, some web authors will make their font face declaration as follows:

<font face="arial,helvetica,sans-serif">Your computer will attempt to display this visible text using first the Arial font and then, if this is not available, using Helvetica. If neither Arial nor Helvetica is available then the computer will resort to the final choice,  sans-serif.</font>

The third font choice, 'sans-serif', refers to a member of a generic font family and acts as a kind of fail-safe in case both Arial and Helvetica are unavailable.

Using this technique of listing fonts, some web authors will attempt to have their visible text displayed using a less popular font by placing this font first in the list thus taking the chance that the user might have it installed on their computer. Then if this fails, the user's computer defaults to the remaining choices in their font list which are typically representative of fonts that are more 'web-safe'.

Now let's learn how to make bold, italics and other font styles on your web page...

See also:

Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates