<font>

Talk about HTML resources, styles etc.
Post Reply
User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

<font>

Post by JimBb » Sun Jan 09, 2005 8:11 am

Picking the right font and making sure it displays properly is key to your page's looks. Sounds logical, doesn't it? Then why do so many people make crappy-looking pages? I guess because a) they don't know that much about the usage of the <font> tag, and b) they don't know that much about the usage of fonts throughout the world.

Let's start with a), the <font> tag. As usual it's a pair, so you should open and close it:

Code: Select all

<font>This is my text</font>
Looks correct, but unfortunately it does nothing. The font-tag in itself doesn't do a thing, it requires some arguments. There are only three.

Code: Select all

<font face="Arial">This is my text</font>
This will most likely be shown in Arial, in your visitor's browser's default size. In other words: you control only a part of the behaviour of the font. If you want to have full control, add the size:

Code: Select all

<font face="Arial" size="7">This is my text</font>
That looks like: This is my text
Impressive, eh? Or try:

Code: Select all

<font face="Arial" size="1">This is my text</font>
That looks like: This is my text
Cool, now you control both the font and the size.
Well, partially, still. You see, now you are no longer using your visitor's browser's default font or fontsize, but there is another feature in a browser. In Internet Explorer, try "View | Text Size", in Mozilla try "View | Text Zoom". This allows people with large or small screens, or with less than optimal eye-sight, to reduce or enlarge the fonts regardless of what you do. It's always a good idea to try this for yourself when designing your page, and have a look at the results. You might want to tune your design a little so it doesn't become too much of a mess.

Right, the third argument: color!

Code: Select all

<font face="Arial" size="7" color="purple">This is my text</font>
That looks like: This is my text
Of course you can use hex color coding as well:

Code: Select all

<font face="Arial" size="7" color="#9900CC">This is my text</font>
This has exactly the same result.

And that's it.

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Sun Jan 09, 2005 8:20 am

But wait, there's more ;)

Isn't it silly to have to adjust your entire page - and believe me, the font tag will be all over the place - when you decide to adjust your default font? Fear no more, here is <basefont>!

Code: Select all

<basefont face="Arial">
This sets, for that page, the default font to Arial, it doesn't have to be repeated in every font-tag. On this page the following two lines of code have the same effect:

Code: Select all

<font face="Arial">This is my text</font>
<font>This is my text</font>
The <basefont> tag allows for just the same arguments as the <font> tag:

Code: Select all

<basefont face="Arial" size="2" color="black">
Now look at the following code:

Code: Select all

<font size="+2">This is my text</font>
This thing is called a "relative size". It would have the same effect as writing <font size="4">, since you should read it as "basefont size +2".

Why is this so interesting? Suppose you decide that your default font size should be "3" in stead of "2". In the example you should only change one tag per page, since the rest is relative to that one basefont. Large fonts will stay larger than the default, small fonts will stay smaller than the default.

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Sun Jan 09, 2005 8:43 am

But wait, there's even more 8)

Remember I said in the first post of this thread that many people don't understand how fonts are used throughout this world? A lot of people think that "if it works fine on my computer, it works fine everywhere". And if they want to use a special font: "How can I make it display in my special font on every machine?" Or worse: "How can I install my special font on every visitor's machine"?

Let me help you out of a dream: don't count on having every font everywhere. Don't count on pushing your visitors to installing that special font so that they see your site the way you want it. Don't count on forcing an installation of a font on every visitor's machine.
You should be adapting to your visitors, you should not expect your visitors to adapt to you. Imagine having to adjust your PC for each of the millions of sites out there...

The only thing you can do is use a commonly used font. And even then you cannot be 100% sure that this font is installed on every machine.

Hey, wait a second, can I then only use things like Times and Courier? Well, yes. And no ;)

Try the following:

Code: Select all

<font face="Verdana,Arial,Helvetica,Sans Serif">This is my text</font>
What happens is that your visitor's browser will display the first font of that list that is installed on your visitor's computer. So it will sort of go like: "Do I have Verdana? No. Arial then? No. Helvetica? Yes, let's use that.".

Combine your fonts carefully. This list for example are all "non-serif" fonts that sort of look like each other. The web designer preferred Verdana, could live with Arial, Helvetica is the next, and if that is not there the very basic "Sans Serif" should do. Go through your fonts for every "group" of fonts you intend to use.

Examples of "Sans Serif" fonts are Verdana, Arial, Helvetica, Century Gothic, Franklin Gothic, Gill Sans MT, Haettenschweiler, Impact, Trebuchet, Tahoma, ...
Examples of "Serif" fonts are Times, Times New Roman, Bell MT, Bodoni MT, Book Antiqua, Bookman Old Style, Century Schoolbook, Palatino Linotype, ...
Examples of fixed-width or monotype fonts are Courier, Courier New, Bitstream Vera Sans Mono, Lucida Console, Lucida Sans Typewriter, OCR A extended, ...

Just one thing: make sure you use the *exact* spelling of the font - including UPPER- and lowercase.

Jim

Post Reply