HTM-Hell: Manipulating Fonts

Manipulating Fonts

This tutorial was the first to appear in the old HTM-Hell newsletter. A few people have asked me why I chose to do my first issue on the FONT Tag rather than something more basic.

I guess it is because we use the FONT Tag so much, and because coding the FONT Tag requires mastery of so many of the very basic necessary HTML skills, it seemed the perfect way to illustrate coding rules and techniques to a beginner.

Besides, we all have to start somewhere...:)

PROPER USE OF THE and TAGS

The   set is a basic HTML Tag. However, in this case, this particular tag requires extra Attributes to be of any use to you. Type Hello there! on your web page. You will notice that nothing at all seems to happen to the "Hello there!" text.

The  Tag is designed to let you make modifications to the text on your page but you have to decide which of the  Tag attributes you need. These are some of the attributes for this tag:

SIZE= lets you specify what size your text should be.

FACE= lets you specify what font your text should appear in.

COLOR= lets you specify the color your text will appear as.

Now you will notice each of the above Attributes has an = (equals) sign after it. To properly set these attributes up you have to give each a Value directly after the equals sign, with no spaces in between.

Each value should be entered with opening and closing quotation marks. (Some browsers do not require the quotes, some do... to ensure the best compatibility for all browsers though, you should always use the quotes)

SIZE="1-7"

The SIZE= attribute will let you enter text sizes from 1 to 7. If you do not enter a specific size 'value' the text will default to a size of 3. 1 is the smallest text size, and 7 is the largest. Try this tag on a web page and change the value number to see the difference in your font size:

testing the font size

Now change the 2 to any number between 1 and 7. See the difference?

FACE="Font name here"

The FACE= attribute will let you define the font you want the text to appear in. Pretty cool huh? The problem with this attribute is, it depends entirely on what fonts the viewer has on their computer. If you specify you want your text to show up in Arial, for example, and I don't have the Arial font installed on my system then the text will show up in whatever font I have defined as my default font in my browser.

Here is the correct way to use the FACE= attribute:

testing the face attribute

Pretty basic stuff. It gets more interesting though. If you want to specify several different fonts you can do that too. Lets say I want to have text show up in Arial, but I know some people don't have Arial, so I want to define a secondary font that they might have. This is easy to do... just type in another font name and separate the two with a comma, like this:

testing the face attribute

In this example, if I dont have Arial, then the browser will try to show the font in Times New Roman. If I dont have Times New Roman, then the text will be displayed in my browser's default font.

COLOR="Color Code here"

The COLOR attribute lets you define the color you want your text to appear in. There are a couple of ways you can do this. You can use a 6 character color identifier (Hexadecimal Color Code) or just use the name of a color. Sounds confusing doesn't it.

Try this example on your web page:

testing the color attribute

This will give you black text. However, you can also use a 6 character Hexadecimal Color Value to define the color you want. Try this on your web page:

testing the color attribute

This will also give you black text. Notice I used a # in front of the 6 characters. You must use this character in front of the Hexadecimal Color Code.

If you have trouble understanding the process of choosing colors for your fonts, please review the Using Colors tutorial on this site for a more detailed explanation.