Fonts are one of the more important elements that give a webpage its style. The default font for most browsers is Times or Times New Roman, but most operating systems come with a list of available fonts you can use for sprucing up your designs. A list of default fonts for the XP (Windows) and X (Mac) OS's can be found at X vs. XP. There are 12 fonts that are usually installed on both systems and should be safe to use. They are: arial, arial black, comic sans ms, courier, courier new, georgia, helvetica, impact, palatino, times new roman, trebuchet ms, and verdana.

Our document appears in Times New Roman. Nice enough, but studies show that serif fonts are easier to read in hard copy (books, etc), but sans-serif fonts like Arial, Verdana, and Tahoma are easier to read onscreen. Experts on web design say you can (and for aesthetic reasons probably should) leave your headings in Times New Roman or some other decorative font, but create your body text in a sans-serif font like Arial.

To change the font of a specific line or paragraph, you would use the tag. But this could be rather cumbersome for changing the entire body text and can be unintentionally overridden by other tags. Instead, HTML provides the element for changing the font of an entire webpage. So, for our document, that's what we'll use. Although, we'll be applying font tags to individual sections, too.



Basefont - In your document, put the cursor on the line immediately below the body tag and type . That's all there is to it, but once you've created a basefont tag, you need to give it some characteristics. To change a font, HTML uses the face= attribute. So, inside your basefont tag, include face="Arial, Helvetica, sans-serif", like this:




If you save and view your document, you'll see that the text is fairly large and ALL of it is Arial now. Something like this*:




Since Netscape doesn't change the font family using the basefont, we'll have to make that change using the tag. Ah...cross-browser compatibility can be such a pain! But we're going to have to make the same change in Internet Explorer soon, too — for a different reason. So, for now, we'll postpone worrying about it. (Trust me.)

Font Size - To adjust our font size, we're going to add the size= attribute. In HTML, there are basically six font sizes available (1-6). These numbers indicate an increase or decrease in the default font size of your visitor's browser. The HTML default (which will match whatever font size the user has chosen) is size="3". So, by using size="2", you size the text down one step; size="4" makes it larger (and so on). To complicate things further, you can also use size="-2" or size="+1", etc... These settings indicate a percentage smaller or larger than whatever font size you have currently set in your code. That may be very confusing at first, but after playing with it a while, you'll get the hang of it. So don't worry too much about it right now...you can always experiment until you get the size you like.

So, let's get back to our document: inside your basefont tag, either before or after the face= attribute, add size="2", so your tag will look like this:


Now, if you save and view your document, you'll see something like this:


While we're changing font sizes, the copyright notice at the bottom of the page is something I want to include, but I don't want it to interfere with the design of my webpage. So let's make it a very small font. Since it has no font tag, we'll insert one and to make the font just slightly different than the body of the document, I'm going to use Verdana, rather than Arial. Like this:


Now, the copyright notice should look something like this:


Font Family - As you can see, because of the pre-formatting included in the heading tags, our last basefont change didn't affect the size of the headings font. But since we wanted our headings in Times New Roman anyway, this isn't much of a problem. We'll simply apply individual font commands to the headings to change their size and/or font family.

• Starting with the first heading (Tree of Life Garden), put your cursor inside the heading tag (just before the word Tree) and type There's no need to include the forward slash, because this tag will require closing. The reason we put this command inside the heading tag is we dont want the heading tag to override the commands we're going to insert. The browser reads top to bottom, just as you do. If it read our font command first and THEN the heading tag, the font size command in the heading tag would take precedence over any font size we set in the font tag.



• Next, add the face= attribute to your tag with a value of "Times New Roman, serif".



• Remember to close your font tag, after the word Garden. (Last opened; first closed.) Like this:

Now, if you save and look at your document, you'll see the size difference isn't so great. This is because Times New Roman is actually a smaller font than Arial. At this point, the choice of whether you change the size of the headings or not is purely up to you as a designer. I like the difference as it is, so I'm going to leave mine...after I apply the same font face= tag to the rest of my headings. But you can add a size= attribute if you wish.