HTML and CSS Reference
In-Depth Information
Decision Making: Selecting a Text Font
The challenge with designing Web text is that you don't have the same control over the
output device as you do when choosing a font style for printed output. A user may not have
that beautiful font you selected, and may have installed a font that will render your page
unreadable. If you absolutely must have a section of text rendered in a specific font at a
specific size, then your best choice may be to use an inline image in place of text.
Of course, you can't make your entire page an inline image, so you
always
should pro-
vide options for your customers in the form of extensive font lists. Other important things to
consider when designing your text include the following:
•
Keep it plain
—Avoid large blocks of italicized text and boldfaced text. Those styles are
designed for emphasis, not readability.
•
Sans-serif vs. serif
—Because they are more easily read on a computer monitor, use sans-
serif fonts for your body text. Reserve the use of serif, cursive, and fantasy fonts for page
headings and special decorative elements.
•
Relative vs. absolute
—Font sizes can be expressed in relative or absolute units. A relative
unit like the em unit is more flexible and will be sized to match the screen resolution of
the user's device; but you have more control over your page's appearance with an abso-
lute unit. Generally, you want to use an absolute unit only when you know the configura-
tion of the device the reader is using to view your page.
•
Size matters
—Almost all fonts are readable at a size of 14 pixels or greater; however,
for smaller sizes you should choose fonts that were designed for screen display, such
as Verdana and Georgia. On the other hand, Times and Arial often do not render well
at smaller sizes. If you have to go really small (at a size of only a few pixels), you should
either use a Web font that is specially designed for that purpose or replace the text with
an inline image.
•
Avoid long lines
—With more users accessing the Web with widescreen monitors, you run
the risk of presenting users with long lines of text. In general, try to keep the length of
your lines to 60 characters or less. Anything longer is difficult to read.
When choosing any typeface and font style, the key is to test your selection on a variety
of browsers, devices, screen resolutions, and densities. Don't assume that text that is read-
able and pleasing to the eye on your computer screen will work as well on another screen.
Controlling Spacing and Indentation
Tammy thinks that the text for the Welcome heading looks too crowded. She's wondering
if you can further spread it out across the width of the page. She also would like to see
more space between the fi rst letter, W, and the left edge of the sky blue background.
CSS supports styles that allow you to control some basic typographic attributes, such
as kerning and tracking.
Kerning
refers to the amount of space between characters, while
tracking
refers to the amount of space between words. The styles to control an element's
kerning and tracking are
letter-spacing:
value
;
word-spacing:
value
;
where
value
is the size of space between individual letters or words. You specify these
sizes with the same units that you use for font sizing. The default value for both kerning
and tracking is 0 pixels. A positive value increases the letter and word spacing, while a
negative value reduces the space between letters and words. If you choose to make your
pages scalable for a variety of devices and resolutions, you will want to express kerning
and tracking values as percentages or in em units.
To see how modifying these values can affect the appearance of text, a demo page has
been created for you.
