Fonts

Introduction

A font is a pattern of characters designed to display a character, a word, or a group of words following a particular concept or design. The characters you are reading here are displayed in a certain way. If you look at other sections of the document, you will see that their display is quite different.

There are various fonts available either on your computer or on computers all over the world. The availability of fonts is particularly important here because, in the Internet world, your computer is part of a team, and if you are designing web files for the World Wide Web, you should know what font is likely to be available on other people's computers.

View my article on fonts.

As it happens, some fonts are very popular and can be found on most computers. Such fonts are Arial, Times New Roman, Courier New, Garamond, Verdana, Tahoma, etc. To make sure that your file displays fine on other computers, use one or some of the most popular fonts.

To use a font, you include the desired section between the <font> and the </font> tags. The font tag needs to know the name of the font you want to use. A font name here is recognized as its "face". Therefore, the <font face="Font Name"> will specify what font you want to use. To close the font tag, regardless of what else is inside of the opening tag, just close it with </font>.

Since the Internet is made of various computers and you cannot predict what fonts are available on your visitors' computers, you have two options: you can decide not to specify a font, or you can provide a list of fonts that are popular.
If you don't specify a font, the browser of your visitor will use a default font set in its settings.

You should check the default font of your browser.

You second option is to provide a list of popular fonts. A visitors' browser will check what fonts are installed on his or her computer, following your list in order. The first matched font will be used. You specify a list of fonts us ing the face attribute and providing the fonts in a list, each separated from the other with a comma, except for the last font.

A professional rule suggests that you use a list of fonts that belong to the same family. Therefore, decide if you want to use a Serif font, then provide a list of Serif fonts; on the other hand, if you decide to use a Sans Serif font, provide a list of three fonts of that family. It is very unprofessional to mix Serif and Sans Serif fonts for the same set/group of characters.

Here are examples of font families

 

Practical Learning: Using Fonts

  1. Start your text editor and type 
     

    <html>
    <head>
    <title>Grier Summer Camp</title>
    </head>
    <body>
    Located in the <strike>heart</strike> of <i>Rockville</i>, <u>Maryland</u>, the <b>Grier Summer Camp</b> <s>is an</s> attractive tourist setting aimed at entertaining and supporting youth activities during their <b><i>summer vacation</i></b>. Our youth programs and activities are as intense and stimulating as E=mc<sup>2</sup> yet as lively as H<sub>2</sub>O.
    </body>
    </html>

  2. Save the file as exo3.htm in the C:\htmltutorial folder.

  3. As an example of changing or specifying a font, change the word attractive as follows:
     

    <font face="Arial">tourist</font>

  4. Save the file and preview it in your browser browser. Return to your text editor

  5. To see an example of providing a list of fonts to the browser, make the following change:
     

    <font face="Verdana, Tahoma, Helvetica">entertaining and supporting</font>

    In this case, the browser will first check whether the visiting computer has the Verdana font, if it doesn't, then the browser will check whether Tahoma is available; if not, "what about Helvetica?"; if none of these fonts is installed, then the browser will use its default.

  6. Save the file. Preview it in the browser. Bring back Notepad.

  7. You can also control a font's size using one of 7 sizes. The font size is controlled using the <font> tag. Once again, inside of the <font> tag, you specify the size using the size attribute, like this <font size="Size">. The sizes available in HTML are 1, 2, 3, 4, 5, 6, and 7.
    For an example, make the following change on the file:
     

    <font size="5">activities</font>

  8. Save the file. Preview it in the browser. Bring back Notepad

  9. HTML also allows you to control the color display of a character, a word, or a group of words. You use the color attribute of the <font> tag to set a font's color, like this <font color="Font Color">. There are two ways you can set a color with the color attribute: using its recognized name or its HTML code.
    Almost all the color names that you know can be recognized by the browser. Examples include: green, red, blue, white, black, orange, yellow, navy, pink, gray, lime, lightgreen, light blue, etc. There are many others.
    The other option, which is safer but unpredictable for a beginning webmaster, is to use a combination of letters from a to f and digits from 0 to 9 to specify a color. To use this code, you precede it with #.
    Here are two examples. Make the following changes: 
     
    1st change: <font color="red">attractive</font>
    2nd change: <font color="#0000ff">setting</font>


    The first color is simply specified as Red. The second color is blue but using its HTML tag.

  10. Save the file. Preview it in the browser. Bring back Notepad.

  11. You can combine two or three of the font attributes in the same <font> tag. After starting the tag, list each of the desired attributes with its corresponding desired feature. There is no rule as to how the attributes should be listed.
    Here are some examples. Click to the left of </body>

  12. Press Enter to create an empty line. Starting on the new empty line, type:
     

    <font face="Garamond, Georgia" size="2">Seven Locks</font>

  13. Press Enter and type:
      

  14. <font color="fuchsia" face="Verdana, Tahoma">Havell Barrow</font>

  15. Press Enter and type:
      

  16. <font size="4" color="#FFFF00" face="Arial">Coolfront Island</font>

  17. Save the file. Preview it in the browser. Bring back Notepad.

  18. If the whole document is using a particular font color, you can include its attributes in the <body> tag, and this color will impact everything. Fortunately, any section that has a particular font color will not be impacted, it will keep its set color.
    To see how this is done, change the body tag to look as follows: 
     

    <body text="#008000">

  19. Save the file. Preview it in the browser
     
    Page Preview

  20. Now, you can close everything

 

Font Family Examples

Serif  Times New Roman, Courier New, Garamond, Georgia,
Sans Serif  Arial, Verdana, Tahoma, Comic Sans MS,
 
 

Previous Copyright 2000-2007 FunctionX, Inc. Next