|  | PageTutor.com

A very useful type of text effect is the mono-spaced font, or Typewriter Text.

    <BODY>
    <TT>Something really cool</TT>
    </BODY>

`Something really cool`

Each letter uses the same amount of horizontal space...

This is regular type `->` | iiiiiiiiii oooooooooo mmmmmmmmmm
`This is monospaced type ->` | `iiiiiiiiii oooooooooo mmmmmmmmmm`

We can change the f o n t s i z e t o o... It's pretty easy!

First add the `<FONT>` tags...

    <BODY>
    Something really <FONT>cool</FONT>
    </BODY>

Then specify a `SIZE` attribute.

    <BODY>
    Something really <FONT SIZE=6>cool</FONT>
    </BODY>

Something really cool

Fonts come in 7 sizes:

teeny tiny | small | regular | extra medium | large | real big & | yelling!
1 | 2 | 3 | 4 | 5 | 6 | 7

Two things I want to discuss now. First, a `<TAG>` tells the browser to do something. An `ATTRIBUTE` goes inside the `<TAG>` and tells the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3.

Every browser has a default font setting - font name, size and color. Unless you have messed with it the default is probably Times New Roman 12pt (which translates into 3 for our purposes) and it's black. Of course we can specify font names other than the defaults. Like ARIAL and COMIC SANS.

    <BODY>
    Something really <FONT FACE="ARIAL">cool</FONT>
    </BODY>

Something really cool

The font will only display if your viewer has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact!. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do something like this...

`<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>`.

For lunkheads like me that might not understand that right away, here's what's happening- The browser looks for `ARIAL`. If it finds it, it uses it. If not, it goes on to `HELVETICA`. If it can't find that, it looks for `LUCIDA SANS`. And if it can't find that it uses the default font.

What are some common fonts that are pretty safe bets?

Andale Mono Arial Arial Black
Comic Sans MS Courier New Georgia Impact
Times New Roman Trebuchet MS Verdana

To see how various fonts might look through your browser, you might want to use the Handy Dandy Font Viewer.

<< BACK NEXT >>

PageTutor - So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Upload Your Pages 216 Color Chart Color Picker
Index & Quick Reference Barebones HTML Guide Joke Break
Print version available - Get the PageTutor book & CD
Become a member - Get more good stuff!

Invest in the future - Hug your kid today.