Fonts
Fonts can be fun but tricky.
Not all computers have the same set of fonts installed on them!
To confuse us even more, PC and Macs may use different names for the same font.
Choose carefully and only use fonts that are in general use.
font face <font face="…">fun with fonts</font>
To create a look of harmony, don't use more than two different font faces on your page.
Do use contrasting font faces to call attention to or highlight text.
Commonly Installed Fonts
|
|
PC
|
Mac
|
|
Times New Roman
|
New York (Times)
|
|
Courier New
|
Courier
|
|
Arial
|
Geneva (Helvetica)
|
|
Comic Sans MS
|
|
Verdana
|
|
Georgia
|
|
Trebuchet MS
|
|
Impact
|
Fonts without "tails" (sans serif) are easiest to read from a computer screen.
- Sans serif - Aria, Verdana, Geneva
- Serif - Times New Roman, New York, Georgia
- Monospaced - Courier
Ex: <font face="arial, geneva">text goes here</font>
Always mention both Arial & Geneva so the font code will work on both PCs and Macintosh.
NOTE: PC's and Macintosh's display type at different sizes.
font size <font size="3">fun with fonts</font>
Why use font sizes instead of headings?
Font sizes can be used anywhere on a page - with a letter, word, paragraph or section of a page. Thus, it is a much more flexible code than headings. The browser assumes that you are using the heading as a section heading for text - having blank lines above and below the heading text and always in bold.
Font sizes are the opposite of heading sizes:
|
Your Coding
|
Displays As
|
| <font size="1">This is font size 1</font> |
This is font size 1 |
| <font size="2">This is font size 2</font> |
This is font size 2 |
| <font size="3">This is font size 3</font> |
This is font size 3 |
| <font size="4">This is font size 4</font> |
This is font size 4 |
| <font size="5">This is font size 5</font> |
This is font size 5 |
| <font size="6">This is font size 6</font> |
This is font size 6 |
| <font size="7">This is font size 7</font> |
This is font size 7 |
When no font size is specified, the default is size 3.
Options
Though not recommended, you will see pages using the basefont code. For example, <basefont size="2"> set a "size" for whatever text follows it. This continues to be the basefont size until another <basefont> tag occurs - or for the entire page. Make sure not to set the basefont size larger than your heading sizes! (Note: this is a single tag)
Use plus or minus as a size - this is called setting a relative font size versus an absolute font size. This allows you to easily shift the size of text for sections of a page - relative to other sections. Your users can also change the font size appearing on their screen. By using relative font sizes, your font sizes will remain relative to the user's settings.
Ex: <font size="+2">your text goes here</font>
Combination of font face and font size:
Ex: <font face="arial, helvetica" size="-1">text goes here</font>
font color <font color="green">fun with fonts</font>
The font color default is black.
Use the font colors blue and magenta sparingly. It could confuse users into thinking they are looking at a hyperlink (which defaults to the color blue and magenta).
It is recommended that you use the hexidecimal colors rather than the color words - we'll talk about this a bit more when we cover COLOR.
Return to the Top
|
