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.
Project 2: HTML Basics
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 .
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:
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.
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.
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.
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.
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.
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.
Browsers 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:
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/6 has a menu command to change the text size larger or smaller -| .
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.
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!
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
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.
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>
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.
~~ 1 Cor. 10:31 ...whatever you do, do it all for the glory of God. ~~