Fun with Fonts!

Now that you know the basics of HTML, let’s turn it up a notch and step it up by working with fonts! There’s many things you can do with fonts include change the font type, it’s color, and it’s size. The font tag; <font>; requires a closing tag and attributes must be defined or else it will not work properly. Let’s start by changing the type of font! For this to work you need to use the face attribute like so:

<p>This is the <font face=”Times New Roman”>Times New Roman</font> font.</p>

Above, I declared a set of words to only appear in the Times New Roman font. If you would like a whole paragraph to be in a certain font style, you must place the font right after the <p> tag. Don’t forget to close it!

Some other font faces include: Verdana, Arial, Helvetica, Geneva, Courier, and Bookman. It is best to use fonts that are available in all machines like the ones listed above or else the page will not appear properly. To cover all the bases, most designers specify at least two fonts like this: face=”Verdana, Arial, sans serif” or this: face=”Times, Courier, serif”.

Serif refers to fonts that have those extra small strokes at the ends of each letter. Times New Roman, for example, is a serif font whereas Verdana and Arial is a sans serif (sans mean without). Online, most people prefer to use sans serif fonts as it is easier to read than serif fonts. On printed material, preferences lie with serif fonts like Times New Roman. Regardless, work with the style you like. The only tip I suggest you remember is to keep it legible.

Speaking of legibility, I’ll now teach you how to add color! The number one option most amateur web designers do to make their web sites illegible. Colors can be defined by it’s hexadecimal value or it’s name. Below is some basic hexadecimal colors:

#000000 – black
#CCCCCC – gray
#FFFFFF – white
#FFFFCC – cream
#0000FF – blue
#00FF00 – green
#FF0000 – red

For a quick and easy hexadecimal chart, visit my development page in Ren’ai Games and download the Hue Color Chart. If you need some other colors, you can open up images in your graphic software and usually, you should be able to see the hexadecimal value for the color.

The easier way to define colors is to type in the name such as red, black, blue and so on. This method is rather limited since only the major colors are defined. In the long run, if you want specific colors, you will have to get used to defining colors in the hexadecimal value above. Btw, hexadecimal values may be types in upper case or lower case. Letters used in hexadecimals are letters A – F and numbers 0 – 9. Personally, I prefer typing them in caps since it’s easier to pick it out that way. Anyways, to change the font’s color, use the color attribute like so:

<p><font color=”red”>This JUST In!!!!</font><br>We are now having a HUGE, <font color=”#00FF00″>Blowout</font> Saaaaale!!!!!</p>

Pretty neat huh? To make that announcement even better, you could change the size of the fonts. As with links, you can set it in relative terms or in absolute terms. In relative terms, the font will change size basing on the current font size already used. If standard text size throughout the site was 12, then in relative terms by using the + or – sign, you define the font’s size. For example:

<p><font size=”+3″ color=”red”>This JUST In!!!!</font>

This will make the font for “This JUST In!!!!” to 15. Using the negative sign, you can subtract from the current default text size. Personally, I do not like using this since many users have their browsers set to different font settings. Some have it a the smallest font size, some to the highest and most – everything in between. To have a little bit more control over how your site looks, it’s best to define the font size in absolute terms. This means that you specify a specific size like so:

<p><font size-”15″ color=”red”>This JUST In!!!!</font>

Like I said earlier, changing font colors is usually one of the biggest mistakes new web designers fall into. For one thing, it looks ugly when you have a myriad of colors swimming in front of you and for another, 9 out of 10, it won’t be readable. If you’re going to use color, use it sparingly and make sure the result is legible.