Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 87

browser on a monitor set to 1440 900 screen resolution. Compare font sizes on your

own computer— launch a browser and view chapter3/fonts.html in the student files.

×

Be aware that the text values and the pt ( point ) unit size are browser dependent. For
example, text configured with the CSS rule font-size: 12pt may look different when
various browsers are used to display Web pages. The px (pixel) unit is monitor resolu-
tion dependent and looks different depending on the screen resolution used. The em unit
is a relative font unit that has its roots in the print industry. Recall that printers used to
set type manually with blocks of characters. An em unit is the width of a square block of
type (typically the uppercase M) for a particular font and type size. On Web pages an em
unit corresponds to the width of the font and size used in the parent element (typically
the body element). With this in mind, the size of an em unit is relative to the font type-
face and default size. Percentage values work in a similar manner to em units. For example,
font-size: 100% and font-size: 1em should render the same in a browser.

Focus on Accessibility With all these available choices, what's the best way to configure font-sizes? The W3C

recommends the use of em units or percentages in their specification for CSS2 at
http://www.w3.org/TR/REC-CSS2/fonts.html. So, usually the best choice is either em
units or percentages. In addition, modern browsers such as Firefox, Opera, Google
Chrome, and Internet Explorer 8 allow visitors to increase (or “zoom”) the text size on
the page easily even if nonrelative units, such as px , are used to configure font size.
Expect to see more browser support of page customization and zoom features in the
future. For certain graphic-dependent designs that require “pixel-perfect” rendering, px
units might be more appropriate than em units or percentages—it's up to you to
choose. As you work through the Hands-On Practice and Case Study exercises in this
book, you'll gain experience using a variety of font-size configurations. In all cases, it is
crucial to test your Web pages in a variety of client platforms (including browser and
monitor resolution). This testing is part of the Web design and development process.
Statistics available at http://thecounter.com indicate that at the time this was written
Internet Explorer at 1028

WWW

768 resolution is most commonly used, although use of the
Firefox browser continues to grow.

×

The font-family property configures font typefaces. A Web browser displays text
using the fonts that have been installed on the user's computer. For example, the CSS
rule font-family: Arial causes the browser to display text using Arial instead of the
default browser font. Table 3.3 shows font family categories and some common font
typefaces. See http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html for a list of
“Web-safe” fonts.

Table 3.3 Common fonts

Font-family Category Font Typeface

serif

Times New Roman , Georgia , Times

sans-serif

Arial, Verdana , Geneva

monospace

Courier New , Lucida Console

cursive

Comic Sans MS Brush Script MT ,

fantasy Jokerman , Curlz MT

When a font is specified that is not installed on the Web visitor's computer, the default font
is substituted. Times New Roman is the default font displayed by most Web browsers. You
can list multiple fonts and categories for the value of the font face attribute. The browser