CONNECT
SHOUT OUT BOARDS

YOUR ROOM
FIND OUT

HELP ME HEATHER

FAST FACTS

PLAY

gURL GAMES

QUIZZES

MORE PLAY
SHOW OFF

COMIX

PHOTOS

EXPLORE

BODY IMAGE

SEX

REACT

MOST POPULAR VIDEOS

SOUND CHECKS

 
Left Image
Font, Size, and Color
<<return to list of topics

The font tag works a little differently than a normal text tag because it has many parts to it, all of which go inside the same bracket until the tag builds into one giant monster tag that takes over your HTML kingdom! But never fear, brave soldier, for you have the gURL guide of Wisdom to protect you throughout the battle and guide you to safety...or something like that.

font face
The font face tag, which sets the typeface of your text, looks like this (with "times new roman" being the name of the typeface):

<font face="times new roman">Good typography is better than chocolate!</font>

Good typography is better than chocolate!

When you set a typeface for your text, the browser reads that information and then finds the typeface on its own computer to display in the browser.

So if you set a typeface that most computers don't have, then browsers on those computers won't be able to display the typeface. When that happens, it goes to the default font set for that browser and ruins your beautiful typographic vision!

The moral of our story? Use typefaces called "webfonts," or those that are guaranteed to work on the web because all computers come installed with them.

Here's a list of some webfonts:
Georgia
Verdana
Arial
Times New Roman
Courier

To set a "just in case" font, in case a browser can't find your first choice of typeface, list alternate typefaces in order of preference. So, if you want your text to be in Verdana, but you'd be willing to settle for Arial if Verdana isn't available, then the tag would look like this:

<font face="verdana, arial">Good typography is better than chocolate!</font>

If the computer that the browser is on has Verdana, it'll use that. Otherwise it'll use Arial.

font size tags
The default font size on most browsers is size 3, but you can override that with the font size tags, which control the size of your text. You can either set the size to a fixed number, like <font size= 5> , or set a relative size, like <font size= +2> or <font size= -1>. The sizes range from 1-7. The font size tag would look like this:

That Hummer SUV is the <font size="5">biggest</font> waste of gas I've ever seen!

That Hummer SUV is the biggest waste of gas I've ever seen!

font color tags
Colors on the web are named with a combination of letters and numbers called "hexadecimal color codes." For example, standard red is called "#FF0033." You can see a list of colors and their hex codes here.

Here's how you set a color for your text:

He makes me <font color="#FF0033">red</font> in the face.

He makes me red in the face.

combining font tags
Now, here's the fun part! If you're using more than one font tag in the same place, you can combine them into one long tag instead of piling them onto each other like the text format tags. Then, you only need one closing tag, like this:

Roses are <font face="arial" color="#FF0033" size="5">red</font>, Violets are <b><font face="arial" color="#3300FF" size="5">blue</font></b>, I spend my monthly paycheck, on shopping for shoes!

Roses are red, Violets are blue, I spend my monthly paycheck on shopping for shoes!

Notice how the font tags were all combined, but the bold text tag <b>still stood on it's own. That bold tag is one independent little guy.




page [ 123456789101112 ]

 
 
ADVERTISEMENT