Introduction to HTML
Font Functions
Copyright © 1996 - 2002 Randy D. Ralph.    All rights reserved.
  Text Functions Lists & Indents   Course Contents  
In place May 18, 1996.    Last updated May 26, 2000.

Absolute
Font Size
Relative
Font Size
Font Color Font Face Font Defaults

 

Font Size:

<font size=[±]n></font>

Font size is specified using the general command format above where n is the size to which the font is set.  The default font size is 3 unless it has been changed using the <basefont size=n> command in the document Head Segment.  Basic font size can be changed in either of two ways: 

  • Font size can be specified as an absolute value in the range from 1 to 7

  • Font size can be changed relative to the default in the range from -2 to +4


Absolute Font Size -

<font size=n></font>

The values for font size n range from 1 to 7.  The default value for font size is 3

Examples:

<font size=1>Size 1</font> - Size 1
<font size=2>Size 2</font> - Size 2
<font size=3>Size 3</font> - Size 3
<font size=4>Size 4</font> - Size 4
<font size=5>Size 5</font> - Size 5
<font size=6>Size 6</font> - Size 6
<font size=7>Size 7</font> - Size 7


Relative Font Size -

<font size=±n]></font>

Font sizes can also be set relative to one another.  Note that the default font size is 3.  Any relative font size change made is made relative to the default font size.  Closure of the font size change command with </font> returns the font size to the default. 

Example:

    This text is in default size.  It <font size=+1>enlarges by one size,</font> <font size=-1>reduces by one size</font> and returns to normal.

    Yields -

    This text is in default size.  It enlarges by one size, reduces by one size, and returns to normal. 


Font Color:

<font color="{#RRGGBB/named color}"></font>

The surest way to indicate color in HTML is to specify the RRGGBB values for the red (R), green (G) and blue (B) color components, respectively .  Red, green and blue components are additive in nature, as shown in the color wheel to the left.  They can vary in the range from 0 to 255 for a total of 256 values for each color component.  A full scale of grays from black to white can also be achieved.  In HTML all fully specified colors are expressed in this hexadecimal format. 

Font colors can be controlled using the color="RRGGBB" command parameter where the color is specified using hexadecimal notation for the red (RR), green (GG) and blue (BB) components.  Values for color components range from 0 (decimal) = 00 (hexadecimal) to 255 (decimal) = FF (hexadecimal).  Note that hexadecimal codes are not case sensitive.

The table below shows the hexadecimal codes for the standard 16 Windows colors: 

black

#000000

gray

#808080

silver

#C0C0C0

white

#FFFFFF

red

#FF0000

maroon

#800000

yellow

#FFFF00

olive

#808000

lime

#00FF00

green

#008000

cyan (azure)

#00FFFF

teal

#008080

blue

#0000FF

navy

#000080

magenta (fuchsia)

#FF00FF

purple

#800080

The table also shows the color names which correspond to the hexadecimal codes.  These are the so-called Netscape named colors.  There are over 200 named colors.  Recognized color names can be used in place of hexadecimal color codes.

Obviously, there are literally millions of potential color variations possible if hexadecimal codes are used.  Some browsers, however, may only render a basic set of 216 standard colors without "dithering" them, i.e.,, rendering them as composites of small dots of color, like a mosaic or a pointilist painting.  This may depend on the color screen attributes set on the local microcomputer that is displaying the web page, as well. Most current browsers and up-do-date microcomputers are capable of displaying over 16 million different colors without dithering.

The basic 216 colors fall into a so-called "color cube" with six allowable color values on each side.    Allowable values for the RED, GREEN and BLUE settings on the RBG scale are:  00, 33, 66, 99, CC, and FF.  Three color indexes with 6 possible settings for each color index yields 63 - or - 216, possible color combinations.  See the standard 216 color table for more detail. 

Examples:

<b><font color="#800080">This text is in purple.</font></b>

or

<b><font color="purple">This text is in purple.</font></b>

Yields -

This text is in purple.


Font Face:

The face of the font to be used can be specified in the <FONT> command. However, the font face selected must be resident on the user's PC and installed for the effect to be realized.  The match on the font face name is exact (including spaces in the font name) but is not case sensitive.  If the browser fails to locate a matching installed font, then the default font face is used.  Some browsers will not override the default font settings.

Example:

<font face="Comic Sans MS" size=5><b>Comic Sans MS Font</b></font>

Yields -

Comic Sans MS Font

Several font face names can be indicated in the command parameter string in the order of their preference for loading.  The browser will default to the first named font found among installed fonts on the user's microcomputer.  If no match is found, the microcomputer operating system may attempt to replace the font requested with the closest match from an appropriate font family.

Example:

<font face="geneva,arial,tahoma,verdana,helvetica,helv" size=5><b>Swiss Sans Serif Font Family</b></font>

Yields -

Swiss Sans Serif Font Family

In this example the MAC font name "geneva" is included in the font face list first because MACs may have trouble reading past Windows font names in the list.  The remaining font names are some variants in the Windows Swiss sans serif font family which differ slightly in their appearance.  When running on a PC the browser application will use the first font name found which corresponds to an installed Windows font.  For this reason, font names should be listed in the order of preference with MAC fonts listed first.


Setting Font Defaults:

All font settings can be set up as defaults in the <HEAD> Document Segment.  The basic default setting command, which must be included in the Head Segment is as follows:

<basefont size="[font size 1 - 7]" face="[font face name(s)]">

The attributes are the same as those used in the basic <font></font> command.  Default font color is best handled in the <BODY> Document Segment command lines.  Note that default font settings are not applied to table data cells.  Font settings within table data cells must be set for every cell individually.

TOP Absolute
Font Size
Relative
Font Size
Font Color Font Face Font Defaults

  Text Functions Lists & Indents   Course Contents  
You are here:  NetStrider   »   Tutorials   »   HTML   »   FONTS   «