Font Comparison Advent Digital - Website Design, Graphic Design, Business Marketing, Greg Schipper, web design

TYPE SIZE & FONT SELECTION

Changing Type Size

O MAKE webpages more interesting we can vary the size, color and design of type on the page. You must first understand what the default settings are: what you get when you specify nothing. The default type font is usually Times New Roman in about 12 pt. size as you would see it in your word processor.

Below are the Windows XP standard fonts:

Arial
Arial Black
Arial Bold
Arial Bold Italic
Arial Italic
Comic Sans MS
Comic Sans MS Bold
Courier New
Courier New Bold
Courier New Bold Italic
Courier New Italic
Estrangelo Edessa
Franklin Gothic Medium
Franklin Gothic Medium Italic
Gautami
Georgia
Georgia Bold
Georgia Bold Italic
Georgia Italic
Impact
Latha
Lucida Console
Lucida Sans Unicode
Microsoft Sans Serif
Modern MS Sans Serif

Mv Boli
Palatino Linotype
Palatino Linotype Bold
Palatino Linotype Bold Italic
Palatino Linotype Italic
Roman
Script
Symbol Symbol
Tahoma
Tahoma Bold
Times New Roman
Times New Roman Bold
Times New Roman Bold Italic
Times New Roman Italic
Trebuchet MS
Trebuchet MS Bold
Trebuchet MS Bold Italic
Trebuchet MS Italic
Tunga
Verdana
Verdana Bold
Verdana Bold Italic
Verdana Italic
Webdings Webdings

<H1>	Times New Roman	<+3>	Times New Roman
<H2>	Times New Roman	<+2>	Times New Roman
<H3>	Times New Roman	<+1>	Times New Roman
<H4>	Times New Roman	<+0>	Times New Roman
<H5>	Times New Roman	<-1>	Times New Roman
<H6>	Times New Roman	<-2>	Times New Roman

is the largest type size using that method (shown below). Because the method produces a narrower and cleaner look, I use it exclusively for all my webpages.

Times New Roman

here is yet one other method for controlling type fonts, size and color -- the use of style sheets. This is an advanced method for formatting webpages which will not be treated in depth here. I will simply point out that style sheets permit designating type size according to the standard printing point system, where 72 pts equals one inch. We can create sizes up to two inches in height, or 144 pts.

Style Sheets are not supported by all browsers. Netscape 4.7 will not display the ultra-large type sizes shown below, at least not using the style sheet method I chose. Use of style sheets, except for very simple formatting purposes, should come after you have mastered the basics of HTML.

Here are a few examples of ultra-large type sizes, created by using style sheets. If you make charts for eye exams, this might be for you. (Netscape 4.7 and MSIE 3.0 do not support this feature).

Style Sheet Coding Example: P.1 {text-align:left; font: normal 48pt; font-family: Times New Roman;}

A E B I S O N U Z 48 pt.

Z U N O S I 60 pt.

A E B I S O 72 pt.

Selecting Type Fonts

ow, let’s look at some of the more commonly used type faces. I have a Windows98 computer purchased in July 1999. The TrueType Fonts that came with my word processor are the ones most people will have on their computers. Remember, if you specify a font that someone doesn’t have, their browser will use a default font instead. The default font is usually Times New Roman.

Fonts are selected by coding  and are turned off by . Please notice that when the font name contains a space or spaces (i.e. a two or three word name) the name must appear within quotation marks. Arial does not require quotation mark, but “Arial Black" and “Times New Roman" do.

You might make a practice of developing webpages in Times New Roman (the default font) to make sure that everything fits well and that headlines don’t wrap words onto a second line. Then, when you are satisfied with the overall layout and appearance, change type fonts as you wish. But do check the page to see if retains a pleasant appearance. It’s a good idea to check all your pages in both the Netscape and Microsoft Internet Explorer browsers.

Here’s a list of 21 type faces stored on my computer. Fonts that appear identical to Times New Roman in the column at right are missing from the TTF folder on your computer.

Type Style Chart
Times New Roman	Times New Roman in <b>Bold </b> and <i>Italics </i>
Arial	Arial in <b>Bold </b> and <i>Italics </i>
Arial Black	Arial Black in Bold and Italics
Arial Narrow	Arial Narrow in Bold, Italics , and <u>Underscore </u>
Book Antiqua	Book Antiqua, in Bold and Italics
Calisto MT	Calisto MT, in Bold and Italics
Century Gothic	Century Gothic, in Bold and Italics
Comic Sans MS	Comic Sans MS, in Bold and Italics
Copperplate Gothic Bold	Copperplate Gothic Bold
Copperplate Gothic Light	Copperplate Gothic Light
Courier New	Courier New, in Bold and Italics
Franklin Gothic Book	Franklin Gothic Book, in Bold and Italics
Impact	Impact in Bold and Italics
Lucida Console	Lucida Console Bold Italics
Lucida Handwriting	Lucida Handwriting in Bold
Lucida Sans	Lucida Sans in Bold and Italics
Lucida Sans Unicode	Lucida Sans Unicode in Bold and Italics
News Gothic MT	News Gothic MT in Bold and Italics
Tahoma	Tahoma in Bold and Italics
Tempus Sans ITC	Tempus Sans ITC in Bold and Italics
Times New Roman	Times New Roman in Bold and Italics
Verdana	Verdana in Bold and Italics

Selecting Font Colors

ont color may be selected separately or in conjunction with size and/or face. It is best to make color selections from among the standard 216 colors. Older web browsers and some computer systems do not recognize many of the other available colors. Using other than standard colors may result in an unreadable screen for some people.

In the <body> statement at the beginning of each html file you select the default color for all text on the webpage. This color should be black or whatever text color will be most commonly used on the page. There are 16 standard colors that you may specify in word form using the coding <body text=black> for instance. The named text colors are:

cyan/aqua	black	blue	magenta/fuchsia
gray	green	lime	maroon
navy	olive	white	red
silver	teal	purple	yellow