The default font for most browsers is Times New Roman, unless we change this. Remember that the font you choose must be installed on the computer of your visitor for them to be able to "see" your page(s) as you intended them to be seen. If you use a font that you love, but no-one else has it, they will not see it on your page. Their browser will use the default font (Times New Roman). If you try to stick to some of the most common fonts you will be better off. The ones to try out are the ones that come with your Windows or browser programs.

Some of the most common fonts to use are:

• Arial -this is the one I am using for these pages.
• Algerian
• Arial Black
• Comic Sans MS -I am using this one for the titles at the top of the pages.
• Courier
• Garamond
• Impact
• Script MT Bold
• Times New Roman
• Verdana

There is one way to get around this, if you absolutely love a particular font you want to use for a heading...that is to create a graphic of the font. This is a totally different class and may be one I might tackle in the future.

OK....codes for this: FACE=" "   the FACE is the name of the font you want to use. These next few tags you are going to learn will all go inside the FONT tags: <FONT> </FONT>

These codes will go around any text you want to change on your page. The text will not change color (like it is above) until we learn that code. It will be in the color you choose for your body tag.

Let's add some text: I have just learned how to change the font of this sentence.

Here is your code:

<FONT FACE="Comic Sans MS">I have just learned how to change the font of this sentence.</FONT>

Add this to your page under the other sentences we did, using the font of your choice.

Ok...let's try changing the size of the font. Sometimes we want to make a point and have larger text on the page to do that. Other times we want to just add a small item, like a credit to someone (like at the bottom of this page). The code for this is SIZE=" " and will go inside your Font tags like above. We will be just adding these items to the Font tags, like we did with the body tags in an earlier lesson.

Remember with the headings we talked about the sizes 1-7, with size one being the largest? Well, with fonts this is the exact opposite...1 is the smallest with 7 being the largest (the way it should be). So we will need to insert a number between the quotes in the SIZE code. Let's take number 5 and create the code:

Let's add some text: I have just learned how to change the SIZE of this sentence.

Here is your code:

<FONT FACE="Comic Sans MS" SIZE="5">I have just learned how to change the SIZE of this sentence.</FONT>

And the sizes are:

• Font size 1
• Font size 2
• Font size 3
• Font size 4
• Font size 5
• Font size 6
• Font size 7

Add this sentence, changing the size to whatever you want, at the end of your document (as a separate sentence).

Font colors, again we will be adding this to our FONT codes: COLOR=" "

We will need to find a color by it's RGB (Red, Green, Blue) value. This value is a six digit number and letter combination that represents a color. The six digits are actually three, two digit numbers in sequence, representing the amount of red, green or blue as a hexadecimal value in the range 00-FF. Hexidecimal is base 16 (not base 10). Remember that not every browser or computer will display colors the same way. Many factors can change the way a color will appear on someone else's computer.

And some of the most common colors are:

Let's practice.... I like the color red! But, I love the color green!

Your code:
<FONT COLOR="ff0000">I like the color red!</FONT>
<FONT COLOR="008000">But, I love the color green!</FONT>

Add this to your document using whatever colors you want to.

Using these three items FACE, SIZE and COLOR with your FONT code works great. You can use only one or all three changing your fonts to any number of different looks. Practice changing them until you find something you like to use. I like the Arial font, it is nice and clean and I like the Comic Sans MS for headings.

Use colors of your fonts that contrast your page, or your visitor will not be able to see the words. For instance, on this green background the dark blue or black works great. The Red and lighter blue is great for making things stick out. The lime green and white is not a good match, it's very hard to see them.

Here are some links to other sites with color codes you can print out or bookmark to use later.

• Non-Dithering Colors by Hue
• Non-Dithering Colors by Value
• Color Charts provided by Doug (used here by permission).
• RGB to Color Name Mapping Colors are grouped together