HTML Basics:
Text Format Guidelines

español
Did you want IE9+, Chrome, Firefox; Notepad?

With HTML you can control the appearance of words and phrases or even individual letters. FrontPage and FPX include several toolbar buttons that make this easy. These buttons do not behave quite the same way as similar buttons in Word and Excel.

The first rule is the same as for pages:

Rule #1: Text must be easy to read.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser Basics

Project 2: HTML Basics
    HTML Code
    About HTML
    What You Need
    Code by Hand
    WYSIWYG
    FrontPage/FPX
    Images in HTML
    Formatting
        Page Format
    Page Colors
    Background Image
        Text Format
    Format Text
    Tables
    Print
    Convert
    Summary
    Quiz
    Exercises

Search
Glossary
Appendix

Font Face

What choices do you have for fonts? Any font that is installed on the computer!

To pick a particular font you add a FACE attribute to the FONT tag like:

My Job

The FONT tag has been deprecated, meaning it will not be part of the HTML standard in the future. FONT still works... for now. Stylesheets are the preferred way to format text. FPX does not understand stylesheets.

In FrontPage and FPX you can select one of your installed fonts using the Font drop list .

The viewer's computer must already have a font installed to use it when viewing your page. If the font is not installed, the browser will use one of the default fonts instead.

IE Default Fonts:

Times New Roman as the proportional font.
Courier New as the monospaced font

Most browsers nowadays allow the user to change the default font. So, you never know for sure what default fonts your viewers will see. Hopefully, they have chosen wisely for their own purposes.

Proportional font: The skinny letters like i and l do not take up as much of the line as wide letters like w and m.

In IE5/6 this is called a web font.

Monospaced font each letter is the same width, like on a typewriter.
In IE5/6 this is called a plain text font.

Which font to choose?

Will your HTML page normally be read on screen? You should use a font that is designed to be easy to read on screen. Most fonts are designed to print well, which means they are not particularly good on the screen.

Microsoft created several fonts (no longer available for separate download) that are tuned for screens: Andale Mono, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet, Verdana, Webdings. Many come in both Windows and Apple Mac versions. Microsoft has a page where you can look up which fonts come with which programs.

For illustrations of the fonts that you might expect to find on many computers, check my Web Fonts in another section of the jegsworks.com web site.

Title "Hector Chavez" in several fonts If you want to use a super cool font for titles and headings, you should use a graphics program to create text graphics, like the examples to the right. Otherwise, keep in mind that the font you assigned may not actually be there for the viewer.

Multiple fonts:

You can put a list of several similar fonts in the FONT tag. The browser will use the first one that it finds installed.

This is useful since different operating systems do not generally have the same fonts. For example, Arial is used by Windows systems as a non-serif font, but Helvetica is what Mac systems use.

Separate your choices with a comma, like:

FrontPage and FPX will not help you create a list. You must add the alternates to the tag yourself in the HTML View.

Generic fonts:

To cover all possible situations, you should include one of the 5 generic font names in your list of fonts to use. The browser will pick a font from the ones actually on the computer.

Generic font	Examples/Characteristics
serif	ex. Times, Times New Roman, Georgia Serif fonts have little extra marks at the ends of lines in the letters.
sans-serif	ex. Arial, Helvetica Sans-serif fonts do not have extensions at ends of lines.
monospace	ex. Courier New, Andale Mono, Letter Gothic In monospace fonts all letters use the same amount of space, like with a typewriter.
cursive	ex. Zapf-Chancery, Lucida Handwriting, Brush Script MT Cursive fonts have curving or even connecting lines, like handwriting or brushstrokes.
fantasy	ex. Algerian, Critter, Cottonwood, Western Fantasy fonts have decorative letters that would not work well for text but are interesting for titles and headings.

All font names in the table above are formatted with that font. Which ones are installed on your computer??

Your browser may not do anything special for generic cursive and fantasy types, depending on which browser you have and what fonts you have installed. Then, again, it may use a font that is not what you expect at all.

With basic HTML you cannot set the size of the text to an exact point size like you can in a word processor. You could use a stylesheet to do that, but it is not good idea. Particular point sizes wind up as different physical sizes for different fonts and different operating systems. For example, text at 8 pt. on a Windows systems is small but readable. On a Mac text at 8 pt. is illegible onscreen.

Relative sizes:

You can use + or - to increase or decrease the text size compared to the default size. For example, "+1" means "One size larger than the default." "-2" means "Two sizes smaller than the default".

FrontPage and FPX use the Increase and Decrease Size buttons to increase or decrease the font size, but do not have buttons to set the size to a particular number. Even though the Font dialog lists point sizes for the text, what they actually do is to assign a HTML size. Confusing!

Text Color

The HTML code to set the color of text looks like:

My Job

The color number is in the format #rrggbb, showing the amount of red, green, and blue in the color. The two digits for each of the three primary light colors is a hexadecimal (base 16) number. FF = 255, which is the largest value a color can have. 00 means none of that color.

For the numerically challenged, some colors can be set with names for the colors.
Table of Named Colors

In FrontPage use the Font Color button to pick a color for the selected text. FrontPage will put the correct number in the FONT tag in the HTML code.

In FPX you can set the color of particular words or phrases using the Color button or the Font dialog. FPX will insert a color number for you in the FONT tag.