Fun With Fonts

Most of my pages have this line right after the <body> tag:

<basefont size=4 face="Times New Roman">

Front Page and all other page builders hate this and eat it, but it is a simple way to set the default text size and face for the whole page. Why do they hate it? Well, it turns out it is a deprecated tag in the HTML 4.0 standard. That is, the good folks at W3C, the organization that passes judgement on the "official" HTML standard, want this one to go away. And apparently Netscape agrees with them, because Navigator 6.0 (which I downloaded last night) ignores the my <basefont> tag on this page. So I guess one more useful item is now not so useful . . . oh, well.

Font sizes start with 1 and go up to 6 or maybe 7 (depends on the browser) and, for maximum confusion, they follow the opposite order from the heading tags. The default size is usually set at 3. I go with size=4 for my pages to make the print easier to read for those people with tiny monitors, or those poor souls who have to suffer with WebTV.

You can also set relative font sizes, as in <font=-1> or <font="+2" and it can be good practice for one reason: Internet Explorer, Netscape and probably Opera as well allow the user to change the default font size. The people who really need to do this are the sight-impaired; the option is under "Accessiblity" on Internet Explorer. But if you fix the font size by using absolute sizes (that is, no "+" or "-" sign), the font sizes won't change.

I put the text inside my menubars inside this tag:

<font size=2 face="arial, verdana, helvetica, sans serif"> </font>

This makes for tiny print. I make the whole bar bold so it's a little easier to read. Why four faces? The browser on the user's machine might not have the Arial font, so maybe it has Verdana, and so on. This is a another trick I picked up from stealing--uh, studying code written by my fellow webmasters.

Something else you can do with font tags and something I do once in awhile is make the closer look like the opener. For instance, I could close my bar section with:

</font size=2 face="arial, verdana, helvetica, sans serif"> </font>

I don't know if there is any browser smart enough to match these particularized end tags, but they do serve a purpose: they tell you and anyone else reading the code exactly what font definition is being ended. It's also useful to me when I clean up code by removing spurious font tags. By changing the end tags of stuff I want to keep, I can use Arachnopilia to take out all the font tags I don't want with search-and-replace.

I think you can use this technique with any tag that has a closer, if you want to. It's a practice that would be natural to a programmer. However, it has drawbacks: Comments (which is what this really is--the browser won't read anything after </[Name of the tag being closed]) are a great help for maintaining code, but in HTML, the comments stay in even though the browser isn't really using them, making the file bigger, and making it take more time to load. So you pays your money and you takes your chances . . .

There is a comment tag for HTML, incidentally: <!--...-->. Most often you'll see it used to "hide" Javascript and other stuff from older browsers. What Javascript is used for mostly is, of course, putting advertisements on your free websites. You should see a line of it at the bottom of this page if you view the code in your browser; it gets tacked on by Geocities as soon as you upload a page. And that's all I'm going to say about Javascript for now.

Here's a font I like called "Comic Sans MS" on the font picker in FrontPage Express. I first saw it used extensively at a site run by someone with the handle "Scubidriver3." The site seems to be long gone, but I picked up quite a lot from him--or her--just by looking at Scubi's code. I've included a page from Scubi's old site as an example. You can look at it here; it should come up in a new window. The code I used to make it come up in a new window is this:

<a href=scubi.html target=_blank>here</a>

We'll be examining Scubidriver3's code in the next chapter. Or if you like, you can go back to look at color codes again, or go to the table of contents for this tutorial. Or if you're getting tired of all this, you can pop back to the American Dream main index.

The font face I've been using for my coding examples is called "fixedsys" and I use it because I got used to it on my old Atari. It looks crappy in any other size besides "2" and doesn't work well with boldface or italics, but it looks better to me than "Courier" which is the fixed-size font you usually see, so I set Arachnophilia for it.

This is the "Courier" font, which you must have seen a lot by now because it's what you usually see when you have a fixed font. "Fixed?" Here that means that every letter is the same width, like on a typewriter. Ask your parents about typewriters, they may remember them . . .

You use fixed fonts when you want to line up things, or make something stand out from the rest of the text, like a bit of code or maybe a quotation. HTML actually has separate tag to do this, <tt></tt>. We'll use it in the next paragraph.

This is a code example using the <tt> tags:

<tt>The two t's stand for "typewriter text."</tt>

The "Courier" font came up again because that's what Internet Explorer uses for <tt>. You can probably set it up for another font, but I don't know how and I don't particularly care to find out right now. Probably "Courier" comes up on other browsers as well; it's ubiquitous.

Well, I've told you quite a lot about fonts here. Now for a kick in your teeth: Remember the W3C? I think that's the "World Wide Web Consortium" or something similar, but no computer nerd worth his pirated software is going to use a name when an obscure acronym is available. Anyway, the W3C has deprecated the <font> tag for the HTML 4.0 standard. They want you to use style sheets instead. Not many people are using those, including me, and Netscape hasn't handled them well--perhaps v6 will do it. Anyway, I have yet to write my first style sheet. FrontPage 4.0 (the full version) loves them, but I have yet to see a freeware editor or page builder that will make them for you. Anyway, there is too much legacy HTML out there for new browsers to stop recognizing <font>s for years to come, and too many people using old browsers to make style sheets a feasible replacement. There are some neat tricks you can do with them, though, and as soon as I figure one or two out, I'll tell you how to do them.

Hosting by WebRing.