Suite101

HTML: Chapter 2 (a.k.a., Fun With Fonts)


© Christopher Cummings

Last time we went over the beginnings of an HTML document -- commands you can use to create a standalone ... very plain ... HTML document.

This time, we jazz your text with fonts.

A font is an assortment of letters and numbers all of one size and style. On the Web, you can specify font faces and sizes using HTML commands. But before we delve into the commands, I wanted to -- as usual -- give you a specific piece of advice. In this case, two pieces of advice. About the danger of fonts.

  • Beware "cool" fonts you don't see widely on the Web.
  • Don't go crazy with the fonts.
Fonts depend entirely on the browser and computer being used to view your HTML. So if you specify fonts in your code and the person viewing your page doesn't have those fonts, he won't see your page the way you intended. Instead, he'll see his browser's default fonts.

To avoid this kind of browser woe, stick to the most common font faces -- that is, the kinds which come preinstalled on most computers: Arial, Helvetica, Verdana, Times New Roman.

Does this mean you can never use a "cool" font? Certainly not. If you need to use a "cool" or "rare" font (as a logo, for example), then create a graphic for it instead using Photoshop or Illustrator.

Also keep in mind that less really is more. Heaping multiple fonts on your page won't do anything but make it look busy and be harder to read.

NOTE: Suite 101 has specific guidelines about fonts. So I won't be able to demonstrate any of the various font commands in action. But take heart! Viewing any professional website, including this one, will give you working examples of fonts.

There are basically three font attributes: face, size and color.

To change any of your page's font attributes use the <font> and the </font> tag. Any text within those tags will take on the same face, size and color.

Font Commands

<pre></pre>
Makes preformatted text

<h1></h1>
Makes the largest headline

<h6></h6>
Makes the smallest headline

<b></b>
Bolds text

<i></i>
Italicizes text

<font size=?></font>
Sets size of font (from 1 to 7)

<font color=?></font>
Sets font color using name or hex value

For more font fun go to:

See you next time!

Go To Page: 1


The copyright of the article HTML: Chapter 2 (a.k.a., Fun With Fonts) in Web Editing is owned by . Permission to republish HTML: Chapter 2 (a.k.a., Fun With Fonts) in print or online must be granted by the author in writing.

Post this Article to facebook Add this Article to del.icio.us! Digg this Article furl this Article Add this Article to Reddit Add this Article to Technorati Add this Article to Newsvine Add this Article to Windows Live Add this Article to Yahoo Add this Article to StumbleUpon Add this Article to BlinkLists Add this Article to Spurl Add this Article to Google Add this Article to Ask Add this Article to Squidoo