Dragon Mage Graphics
Font Fun!

Well, now you have some text, why not tweak it to make it look better, eh? You can do many things within the <font> tag, below is a small chart of them:

Addition
Meaning
color
Changes Color of the Text
size
Change Size of the Text
face
Changes Font Style

Now that you know what you can add, below is a sample HTML file that will show a few different ways to apply it. You can change anything in red.

<html>
<head> <title> welcome </title> </head>
<body bgcolor="#000000" text="#FFFFFF" link="#0000ff" vlink="#FF0000" alink="#FFFFFF">

<center>
<font color="#00ff00">This is green font!</font> <br>

<font face="verdana, arial">This is a different style of font, Verdana or Arial, depending on what fonts you have on your computer!</font> <br>

<font size="-2">Tiny, tiny text!</font> <br>

<font size="+2">Big Text!</font>

<strike>Text that is crossed out.</strike> <br>

<b>Bold text</b> <br>

<i>Italic text</i> <br>

<u>Underlined text</u> <br>

<tt>Teletype font text</tt> <br>

</center>

</body>
</html>

Want to see this page that is above in action? Click here to open it up. As you can see, the font tags are doing different things. However, you can convert them all to the same font tag, such that:

The code is:
<font color="#00FF00" size="+2" face="verdana">This text is green, large, and its style is Verdana.</font>

This becomes:
This text is green, large, and its style is Verdana.

Now, for further explination, I have split the sections into different parts.

Color
Don't like green? Want to change the font colors? Always use Hex Codes, not color names. If you use proper Hex codes, you won't have to worry about the colors being different on other web pages. If you want a list of hex codes, please go to Doug's Hex Codes.

Size
The safest way to change the sizes of your text is to use size="-#" or size="+#". Put a number (usually 1 or 2 is good enough) where the # is. If you want to make the text smaller, usually "-1" or "-2" is a good size. Making it bigger is the same way: "+1" and "+2" are the best. "+3" sometimes is too big, and "-3" is sometimes too small. However, you can do whatever you'd like with the fonts.

Face
The face= tag can be used to change the text "face". I am using Arial...however, some good fonts are Verdana, Batang, Book Antiqua, and Tahoma. You can also find some at 1001 Free Fonts. WARNING! Not everyone has the same fonts downloaded to their computers, which means that they won't see the same style. So, if you are using exotic fonts, you might want to do this:

The code is:
<font face="babylon 5, Verdana" size="+1">This will either come out to be the font of Verdana or Babylon 5</font>

This becomes:
This will either come out to be the font of Verdana or Babylon 5

This will make it so that people will either see the font "Babylon 5" or "verdana". If the person has "Babylon 5" downloaded to their computer, then they will see that first (because it is listed first). If they do not have Babylon 5, then they will see "verdana" (it is second) because it is a common font, many will see it.

You can list as many fonts as you would like in the face= tag, but list them in order that you'd prefer them. For instance: Babylon 5, Tahoma, Arial. This will show Babylon 5 first, if the person has it. Then, if the person don't have it, it will be Tahoma. Finally, Arial will be shown.

Other Interesting Things
There are a few more things you can do to your font. Below is a small chart of them.

Tag
Change
<b> </b>
Makes Text Bold
<i> <i>
Makes Text Italic
<u> </u>
Underlines Text
<tt> </tt>
Changes Text to
Typing Style
<strike></strike>
Crosses text out

Back to HTML Help.
Back to Dragon Mage Graphics.


© drago. Please do not remove anything from this page. The backgrounds are offered in the free graphics sections.