Font Settings
When text is displayed in a browser, it appears in a default font face, size,
style, and color. Most browsers use the Times New Roman font face at approximately
1 em (12-point) size and rendered in black. However, several style sheet settings
permit you to change these default settings to bring a different look to your
pages.
When working with standard print documents, it is common to use absolute units of
measure when setting font size. Absolute units include points
and pixels. With
absolute units, the font size values render inconsistently across platforms and
can't be resized by the browser. For this reason, relative units of measure should
be used when setting the font-size for web documents. Relative units include the
em and percentages. The common 12pt font size is equivalent to 1 em.
When working with text fonts, you need to keep in mind that the faces that are
displayed in the browser are limited to those installed on the user's PC. Therefore,
you need to be aware of what kinds of computers your visitors use and what type faces
you expect to have been installed. It is best to stick with common faces unless your
Web audience is known in advance. The following are common font faces in all versions
of Windows and Mac, displayed here in 1 em size.
Windows font, Font family
arial
arial narrow (sans-serif)
comic sans ms (cursive)
courier new (monospace)
georgia (serif)
impact (sans-serif)
tahoma (sans-serif)
times new roman (serif)
verdana (sans-serif)
Mac Equivalents
helvetica
arial narrow (sans-serif)
comic sans ms (cursive)
courier new (monospace)
georgia (serif)
impact5 (sans-serif)
geneva(sans-serif)
times(serif)
verdana (sans-serif)
Figure 4-1. Common font faces.
Font Styles
There are six font style settings that can be used to add variety, interest, or emphasis
to the text on a Web page. These property settings are listed in &&&&&-FIGURE BELOW-&&&&&&.
| Property: |
Value |
| font-family |
Font name can be any system font or the generic font family category values
serif
sans-serif
cursive
monospace
fantasy
Multiple values can be specified in order of preference, separated by commas. The
first located font face is applied:
font-family:arial,verdana,sans-serif
|
| font-size |
Font size specified as a unit of measurement, normally points
(pt). If no unit of measurement is supplied, the
default is pixels (px). Other font-size units include em (em), and percentages (%). |
| font-style |
Font style specified as
normal
italic
oblique
|
| font-weight |
Font weight specified as
lighter
normal
bold
bolder
or a value from 100 (lightest) to 900
(darkest). Not all number values in the range are recognized by all browsers.
|
| font-variant |
Font variant specified as
normal
small-caps
|
| font |
A shorthand method of specifying a set of font styles by assigning
values separated by spaces in the exact order:
font-style font-variant font-weight font-size font-family.
Unassigned values can be missing from the listing:
style="font:italic bold .84em times new roman"
|
Figure 4-2. Font style properties.
Any combinations of these styles can be applied to any text on the page. They can be
associated with a <body> tag to apply to the document as a whole.
They can be coded for a p selector to apply to all paragraphs. They can be coded
as classes and applied with <span> tags surrounding letters, words,
phrases, sentences, or other selected strings of text within a paragraph. They can
be applied as classes through <div> tags to blocks of text.
The font-family property needs to be specified to change the
browser's default setting from Times New Roman. When using an uncommon font family
to display special font styles that may not be present on every user's computer,
you should provide other, more common type faces from which the browser can choose.
The font-family property gives these choices in a comma-separated list. The browser
searches the computer system for the first matching type face and uses it to display
the text. For instance, the following style sheet sets the standard font style for a page.
<style>
body {font-family:helvetica, verdana, sans-serif}
</style>
Listing 4-1. Font family value choices.
First, the browser attempts to use the Helvetica type face. If it is not present on
the user's system, the browser looks for the Verdana type face. If it is not present,
the browser uses whatever built-in non-serif type face is available. The generic font
names serif, non-serif, and monospace will always locate a type face that is similar
to Times New Roman, Arial, and Courier, respectively.
You also need to set the font-size property in order to change the
browser's default 1em (12-point) size. As mentioned earlier, font-size is commonly
given in point sizes; however, it is best to use a relative unit of measure such as
the em or percentages. Absolute units of measure such as points (pt) can render
inconsistently across platforms and can't be resized by the User Agent (e.g browser).
Keep the usage of such units for styling on media with fixed and known physical
properties (e.g print).
The following table shows the different types of font-size property
values and the recommended uses.
| Category | Values | Notes |
| Text Value |
xx-small, x-small, small, medium (default), large, x-large, xx-large |
A relative unit of measure. Scales well when text is resized in the browser. Text size options are limited. |
| Pixel Unit (px) |
Numeric value with unit such as 12px |
A relative unit of measure. Pixel display depends on screen resolution; may not scale well in every browser when the text is re-sized |
| Point Unit (pt) |
Numeric value with unit such as 12pt |
An absolute unit of measure. Use to configure print version of a web page. This measure may not scale in every browser when the text is resized. |
| Em Unit (em) |
Numeric value with unit such as .75em |
A relative unit of measure; Recommended by the W3C; Scales well when text is resized in the browser. |
| Percentage value (%) |
Numeric value with unit such as 90% |
A relative until of measure. Recommended by the W3C; Scales well when the text is resized in the browser. |
The font-style property is a choice between normal and italic
styles; oblique usually is rendered in italic as well. Browser default is the
normal style.
The font-weight property is a choice between normal and bold.
The values lighter and bolder are not commonly recognized in browsers; neither
are all numeric values recognized. Normally, values between 100 and 500 are
displayed in normal weight, and values between 600 and 900 are displayed in bold.
The font-variant style of small-caps changes all letters to
upper-case in a slightly smaller font size. Specifying normal returns the text
to standard display.
Font style declarations can make use of individual property settings, or values
can be combined in the single font property as a shorthand
way of expressing the declarations. That is, a set of style sheet declarations
can be made as shown in Listing 4-2,
{font-family:arial;
font-variant:small-caps;
font-size:.84em;
font-weight:bold;
font-style:italic}
Listing 4-2. Font settings through use of individual style properties.
or combined as shown in Listing 4-3,
{font:italic small-caps bold 10pt arial}
Listing 4-3. Font settings through use of a single font property.
with values separated by spaces. When using the font property, not all values
need to be specified, but they need to be in the order: font-style font-variant
font-weight font-size font-family. A typical declaration could include, for
example, only the font-size and
font-family values: {font:10pt arial}.
The following code uses an embedded style sheet with combinations of font settings.
In this example all font stylings use the shorthand font property.
Browser display of this page is shown in Figure 4-3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Font Styles</title>
<style type="text/css">
body {font:1em arial; text-indent:25px; margin:20px}
.head {font:bold 1.17em; text-align:center; text-indent:0px}
.offset {margin-left:25px; margin-right:25px; text-indent:0px}
.cap {font:bold 2em}
.fancy {font:1.09em comic sans ms}
.style1 {font:bold 1.17em times new roman}
.style2 {font:bold 1em courier new; color:fuchsia}
</style>
</head>
<body>
<div class="head">Font Stylings</div>
<p><span class="cap">T</span>his page show various font stylings applied with an embedded style sheet. Styles are applied to the entire page and to selected portions of text on the page.</p>
<div class="offset">
<p>These next two paragraphs are offset from surrounding paragraphs by their containment within a division. The division has left and right margins of 25 pixels and neither of the paragraphs have first-line indents.</p>
<p class="fancy">This paragraph is styled with a class that changes the font face and size. Inside this paragraph is a span tag that styles <span class="style1">this string of text</span> differently from the rest of the paragraph. In addition, this <span class="style2">word</span> has its own special style.</p>
</div>
</body>
</html>
Listing 4-4. Font style settings for a page.
Figure 4-3.
Application of font styles.
Styling for the <body> tag sets the default format for the
entire page. Thereafter, various style classes are applied to selected portions
of the text.
Nested Styles
The above page includes nested style sheets wherein an inner style
setting inherits and then temporarily overrides, or modifies, the settings of an
outer style. The outer <body> style, for example, sets page display
in 12-point Arial type with page margins of 20 pixels and paragraph indention of 25 pixels.
For instance, these settings remains in effect unless overridden by the enclosed
<div> styles which reset margins for the two enclosed paragraphs to
25 pixels and reset paragraph indention to 0 pixels. These division styles are further
overridden in one of the enclosed paragraphs wherein font styling is changed to 13-point
Comic Sans MS while retaining division margins and indention. Within this paragraph,
<span> tags are used to override paragraph styling for individual
text strings that take on different font faces and sizes.
Style sheets can be nested inside one another so that styles cascade down any number
of levels. Ending the style settings occurs in reverse order. This point is illustrated
by the following code showing an indented structure of <span>
tags that apply and then remove increasing font sizes by using in-line style sheets.
<p>
<span style="font-size:1em">
Here
<span style="font-size:1.34em">
are
<span style="font-size:1.67em">
styles
<span style="font-size:2em">
nested
</span>
inside
</span>
one
</span>
another.
</span>
</p>
Listing 4-5. Nested style settings using <span> tags.
Here
are
styles
nested
inside
one
another.
Figure 4-4. Application of nested font styles using <span> tags.
Although you are not likely to nest styles to this extreme, the point is that each
closing </span> tag, beginning with the inner-most, closes its
associated style, and causes the styling to revert to the next outer-most style
until all styles have been ended. Just remember to keep the opening and closing
styling tags properly paired.
The above example also reemphasizes the fact that <span> tags
do not have formatting characteristics of their own. Although they are coded on
separate lines to show the nesting structure in this example, they do not cause
line breaks or spaces when displayed in the browser. The display effect is the
same as if coding were entered as the following continuous string.
<p><span style="font-size:1em">Here <span style="font-size:1.34em">are
<span style="font-size:1.67em">styles <span style="font-size:2em">nested
</span> inside </span>one </span>another.</span></p>
Listing 4-6. Alternate coding for nested style settings.
In contrast, a <div> tag has the same styling purpose except
that it produces a line break. The following code styles the above text string with
<div> tags and produces the output shown in Figure 4-5.
<div style="font-size:1em">
Here
<div style="font-size:1.34em">
are
<div style="font-size:1.67em">
styles
<div style="font-size:2em">
nested
</div>
inside
</div>
one
</div>
another.
</div>
Listing 4-7. Nested style settings using <div> tags.
Figure 4-5. Application of nested font styles using <div> tags.
You need to be alert to these spacing differences since
<span> and <div> tags are used
extensively to apply styling to page elements.
Deprecated <font> Tag
Although not recognized in XHTML or HTML 5, older settings font styles were
with the <font> tag. This tag, like a <span> tag,
encloses text to be displayed in a specified face, size, and color. The general format
for the <font> tag and its attributes are shown below.
<font
face="face1 [,face2] [,face3]"
size="n|+n|-n"
color="color"
>
...text to be formatted...
</font>
The face attribute specifies a comma-separated list of up to
three font faces that can be applied to the text enclosed by the
<font> tag. Font sizes can be set or changed with the size
attribute. The value of this attribute can range from 1 to 7, smallest to largest.
If a size is not specified, the default system font size of 3 is used, which is
approximately 1 em type size. Note that font sizes are not specified in point
sizes. The size of the font can be changed relative to the current size by
using a "+" or "-" modifier. That is, an attribute value of size="+1"
sets the font size to one size larger than the current setting.
You can set a text color by using the color attribute. The color
value is given as a color name or hexadecimal value as discussed later in this tutorial.
Font Settings
The following interactive display shows the results of various font settings.
Dynamic Font Style Settings
The numerous font setting can be applied in any combination. Click the following
buttons to view the effects of these settings.
Here is a paragraph of text with font settings that can be changed dynamically.
Click the radio buttons below to view combinations of font style settings applied to this text.