Do you find this website helpful?
Help us by making a donation.
All donations go back to promote ebay stores.


Cash Register, POS, Credit Card Printer Ink Ribbons


Fonts and font attributes:

With the <font> tag we can define the font type, the font size and the font color. 


Thousands of fonts, which one do I use?

There are literally thousands of fonts available to you, but a few things to keep in mind before choosing a font.  PC's come with a set of fonts preinstalled, these fonts are the ONLY ones you can view on your PC.  If you are viewing a web page with some off the wall font that you don't have installed on your PC, your browser will display the default font, usually New Times Roman.

Another thing to consider is size, the browser text size on most PC's are set at medium, but a viewer with less than perfect eyesight (like me) may have it set to large or even larger.  So as you can see you don't have complete control over how your text is displayed.  It is best to use fonts that are common, I prefer Verdana, it has been proven to be the easiest to read on a PC monitor.  I try to limit the number of font types on a web page, usually 1, 2 at the most.

The font tag:

The font tag begins with <font> and ends with </font>, we can place attributes with the <font> tag to further define what we want.

Font size:

Font size is determined by a number, 1 is the smallest and 7 is the largest.

1 (8 pt) will display as this
2 (10 pt) will display as this
3 (12 pt) will display as this
4 (14 pt) will display as this
5 (18 pt) will display as this
6 (24 pt) will display as this
7 (36 pt) will display as this

Lets add some attributes to the font tag and see what happens.
<font size="2">place the size number inside quotation marks</font>

The above will result in this:
place the size number inside quotation marks

Another with color and font face this time:

<font size="3" face="verdana" color="#cc0000">place the size, face and color inside quotation marks</font>

The above will result in this:

place the size, face and color inside quotation marks

But how do I know what number means what?
Glad you asked, look here for the color chart.

That covers font size, font face and color.  Now lets add the, <b>Bold, <i> Italic and <u> Underline tags.

<b><i><u><font size="3" face="verdana" color="#cc0000">This is what we get</font></u></i></b>

This is what we get

Notice that the tags started with <b> for bold, <i> for italic <u> for underline then the <font> tag, contained within these tags is the content (This is what we get).  Notice that the closing tags are opposite from the start, we closed the last one first </font> then </u> then </i> and finally </b>.  Tags MUST be closed in this order.

That's about it for basic font attributes.

Oh but what about alignment?
By default the text will align=left, but if you want center here you go.

<center><font size="3" color="#cc0000" <b><i><u>This is center align<br> more text here and here<br>oh my look how hard it is for your eyes to follow<br> this text</u></i></b></font></center>

And the result is:


This is center align
more text here and here
oh my look how hard it is for your eyes to follow
this text

Oh how I hate this tag, a page full of center align looks like a stack of boxes, plus it's very hard to read.  A better way to layout a page is with tables, we will cover tables in a later lesson.

Next lesson:





Home | HTML Tutorials | HTML Editor | Templates |  Resources | E-mail
 Copyright 2004 - 2008 xample.net


More help sites

Need Help?


Lesley Feeney