html - fonts

html tips: fonts

This page shows you how you can specify different types of fonts for the text of your html documents. Note that font colors are not discussed here, but are discussed on the colors page. You can copy the code off of this page and paste it directly into your own html documents. But first of all, if you're viewing from Japan on a Japanese system, try turning "Japanese auto-detect" off. See the difference? [If you don't know how to do this, here's how for Netscape: from the Options menu, go to Document Encoding. Select Western.]

If you can't see different types of fonts on this page, then your browser doesn't have the capability. It will work, though, in Netscape 3 for both Macintosh and Windows95. It also works in later versions of Explorer.

NOTE: If you're on a Windows machine, some examples given appear differently than intended due to Windows fonts. Also, if you're using Explorer 2 for Mac, your default font will not show up correctly.

Basic text commands
I'm assuming that you know how to do different types of basic font commands. A few of the basic ones are illustrated below, with the code being discussed given in red. (Changing font types is discussed in the next section; changing font colors is discussed on a different page, the Colors page.)

<font

size=5

>Hello

That command would give you this on the screen:

Hello

You can specify different size values for the fonts, from one to seven. Here are the sizes:

One

Two

Three

Four

Five

Six

Seven

You can also create bold text and italicized text, as well as combine the two:

Hello

Hello

Hello
Hello

Hello
Hello

A small caps effect for titles is easy to do. Just combine different sizes within the same word.

SMALL CAPS

MALL CAPS

Small caps can look even better if you make them bold:

MALL CAPS

Specifying types of fonts
All of the examples given above appear on your screen in whatever font you've selected as your default text font in your browser's option window. However, if you're using a reletively new version of Netscape or Explorer, this text is given in a different font, as are the section headings. This section shows examples of the code that does it. Before we begin, here's a comparison between your default font (whatever it is - note that it may not show up correctly if you're using Explorer for Mac) with a specified font (the new code is given in red):

This is your default font

This is your default font

This is geneva or arial
This is geneva or arial

Note that you cannot specify just any font; the number is limited, and the person viewing the page has to have at least one of the general fonts on their computer. For this reason, basic system fonts for both Macintosh and Windows should be given. You can name up to three fonts; the first font named is the one which appears if it is in the user's system, and if it isn't, the next one is used. Examples are given below; the code is given in red, and an example follows immediately below it. Note, too, that sizes can be given from -2 to +4 ; a value of zero means the default size that the viewer has chosen in their browser options. You can also choose to name the size using numbers from 1 to 7.

In the next two examples, notice that the order of fonts listed is only important if the viewer has those fonts; Windows95 users will see the first two examples as identical.

<font

face="geneva, helvetica, sans serif"

size=+1>This is geneva or helvetica (or some other sans serif font on Windows)

This is geneva or helvetica (or some other sans serif font on Windows)

This is helvetica or geneva (or some other sans serif font on Windows)
This is helvetica or geneva (or some other sans serif font on Windows)

This is arial black, monaco, or chicago
This is arial black, monaco, or chicago

This is times or times new roman
This is times or times new roman

This is arial or helvetica
This is arial or helvetica

This is palatino, times, or times new roman
This is palatino, times, or times new roman

This is courier or bookman
This is courier or bookman

This is Comic Sans MS, New York, or Times.
This is Comic Sans MS, New York, or Times.

If you're aiming for extra-special effects, the fonts named first should be ones which people might have, whereas the third should be one people probably have. In the next example, Impact is a standard Word for Windows 95 font, but Poster Bodoni is not a standard Macintosh font, so the third alternative, Geneva, is one I know Macintosh computers have preinstalled.

<font

face="impact, poster bodoni, geneva"

size=+1>This is Impact, Poster Bodoni, or Geneva.

This is Impact, Poster Bodoni, or Geneva.

These different fonts are usually easier to read than default fonts at very small sizes. Compare these examples:

<font

face="geneva, helvetica, arial" size=-2

>This is geneva, hevetica or arial, SMALL SIZE

This is geneva, hevetica or arial, SMALL SIZE

Most people, though, using Netscape have default fonts set as Times or another serif font, which looks like this:
This is times, SMALL SIZE

You can also get larger sizes of type face by using larger fonts (note that when only one Macintosh font is named, Windows users will probably not see any difference; that's why you should always have alternatives):

This is times, size 7

New York, size 7

This is arial or geneva, size 7

This is helvetica or geneva, size +4

This is bold times, size +3

This is bold times, size +4

This is bold bookman, size +3

This is bold arial or geneva, size +3

This is bold arial or geneva, size +4

This is bold helvetica or geneva, size +3

This is bold courier, size +3

That's the end of this quick tips sheet on specifing font sizes with html. I hope you found it useful.

back to
HTML Tips Articles Index

Bill Pellowe
e-mail: billp@gol.com