HTML Basics:
Text Format Guidelines

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9, Chrome, Firefox; Notepad? Icon: Change web



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 BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPXTo subtopics
    Images in HTMLTo subtopics
    FormattingArrow - Subtopic open
        Page Format
    icon-footprintPage Colors Table: Named Colors
    icon-footprintBackground Image
        Text Format
    icon-footprintFormat Text
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics


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:

<font face="Time New Roman">My Job</font>

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 Button: Font

WarningThe 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

WarningMost 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.

Icon: IE5Icon: IE6In IE5/6 this is called a web font.

Monospaced font each letter is the same width, like on a typewriter.
IE5Icon: IE6In 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 programsIcon: Offsite page.

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 fontsIf 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:

<font face="Garamond, Georgia, Times New Roman, serif">

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 NewAndale 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.


Font Size

HTML sizes:

Font Sizes from 1 to 7 in Arial and Times New Roman, showing that the same font size can be a different physical sizeBrowsers usually have a default font size of 3 for normal text. Sizes range from 1 (smallest) to 7 (largest).

The HTML code for setting font size looks like:

<font size="4">My Job</font>

The  resulting physical size on the monitor will vary with:

  • font

  • operating system

  • resolution

For example, on a Mac the physical sizes for these font sizes are noticeably smaller than on a Windows computer. Text in a font size of 2 or 1 may not be readable on a Mac.

In most browsers the user can change the default size to suit their own monitor and eyesight. 

IE5.5 Icon: IE6IE5.5/6 has a menu command to change the text size larger or smaller -  View  |  Text Size .

Point sizes:

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 Buttons: Increase and Decrease Font size 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:

<font color="#FF0000">My Job</font>

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: Named ColorsTable of Named Colors
 

Icon: FrontPage In FrontPage use Button: Color 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.

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


One Tag, Many Attributes

When you want to set several characteristics for your text, you can combine them into one tag, like:

<font face="Garamond, Georgia, Times New Roman, serif" color="#FF0000" size="4">My Job</font>

Faces used in FONT tag which displays like this: My Job

Which font face did your browser use for the text above? At the right is an image of all three named fonts at work. 


By the way, Georgia is an example of a font that has been optimized for reading on screen. Do you agree that Georgia is easier to read?