| With CSS, you can specify the size of the text on the screen using several notations or methods, including the traditional print based point-size notation, percentage, absolute size, and even a size relative to the surrounding text (Table 3.6). Figure 3.5 shows text in different size units. Table 3.6. Font-Size ValuesVALUE | COMPATIBILITY |
|---|
<length> | IE3, FF1, S1, O3.5, CSS1 | <percentage> | IE3, FF1, S1, O3.5, CSS1 | smaller | IE4, FF1, S1, O3.5, CSS1 | larger | IE4, FF1, S1, O3.5, CSS1 | xx-small | IE3, FF1, S1, O3.5, CSS1 | x-small | IE3, FF1, S1, O3.5, CSS1 | small | IE3, FF1, S1, O3.5, CSS1 | medium | IE3, FF1, S1, O3.5, CSS1 | large | IE3, FF1, S1, O3.5, CSS1 | x-large | IE3, FF1, S1, O3.5, CSS1 | xx-large | IE3, FF1, S1, O3.5, CSS1 |
Figure 3.5. A few font sizes in different units. 
Fonts can either be set as absolute sizes, which defines the size based against a standard length measurement, or relative sizes, which are in relation to defaults set for the browser. Generally, relative sizes are preferred, since this gives users the power to display the text at whatever size is most comfortable for them. Choosing Font Size Value Type for Screen or Print Although they give you more exact control, absolute value types (such as point) are unreliable for the screen and can limit how the end user displays your work. The point (abbreviated pt) is one way of referring to a font's absolute size. A 12-point font is a fairly average size for use in printed materials and is comfortable for most readers. The size of a point, however, varies slightly on the screen between operating systems, so a font set to 12 points in Windows appears larger than the same font set to 12 points on a Mac. Although an acceptable choice in CSS for print media (see "Setting Styles for Print and Other Media" in Chapter 2) point sizes are a poor choice for screen display. I recommend sticking with relative value types (especially em) for screen and absolute value types for print. |
In this example (Figure 3.6), I define the default size of text on the page to 1.2em and then set other font sizes on the page relative to that font-size. Figure 3.6. The size of the font helps determine its legibility and the emphasis it receives on the page. Titles usually are larger than copy, but some text needs a little more attention. 
To define the font size in a rule: | | 1. | font-size:
Type the property name font-size, followed by a colon (Code 3.2).
Code 3.2. The font size has been defined for the bodyslightly larger than normaland then sizes have been set relative to that font size for other elements.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD  /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Setting the Font Size</title> <style type="text/css" media="all"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; } h1 { font-size: 48px; } h2 { font-size: larger; } p.copy { font-size: small; } .author { font-size: 156%; } </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER II<br /> The Pool of Tears</h2> </div> <p>'Curiouser and curiouser!' cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English); 'now I'm opening out like the largest telescope that ever was! Good bye, feet!'…</p> <p >And she went on planning to herself how she would manage it...</p> <blockquote><p> ALICE'S RIGHT FOOT, ESQ.<br /> HEARTHRUG,<br /> NEAR THE FENDER,<br /> (WITH ALICE'S LOVE). </p></blockquote> <p >Oh dear, what nonsense I'm talking!'</p> <p >Just then her head struck against the roof of the hall: in fact she was now more than nine feet high...</p> </body></html>
|
| 2. | 48px;
Type a value for the font size, which could be any of the following options:
A relative or absolute length unit (often, the font size in pixels or em). See "Values and Units Used in This Book" in the Introduction for more detail. An absolute size keyword, relative to the default page size: xx-small, x-small, small, medium, large, x-large, and xx-large. A relative size keyword of smaller or larger, to describe the font size in relation to its parent element. A percentage, representing how much larger (values over 100%) or smaller (values less than 100%) the text is relative to the size of its parent element.
|
The value you use will depend on your need; however, it is generally recommended to set relative font sizes to allow visitors final control of how large they are displayed.  Tips
You may notice that I have set a size of 1.2em for text throughout this book. This is slightly larger than you might normally want the text on your pages to be (generally 1em or smaller), but works well for getting the text large enough so that you can see it in the figures. Avoid defining screen media font sizes with points or other absolute font-sizes, since these tend to render inconsistently across platforms. However, they're fine to use for print style sheets. See the sidebar "Choosing Font Size Value Type for Screen or Print" for more detail. Your best strategy for setting font sizes is to set a relative length size for the <body> tag (such as 1em), and then use absolute font sizes (such as small) or relative font sizes (such as larger) to adjust the size, based on the body size. This ensures the most consistent and versatile page viewing, regardless of the actual media being used (computer screen, printed page, handheld, etc.). The term copy is used as a noun in the publishing world to refer to the main text of an article or book. Many Web designers will often create a class called .copy to format the main text on the page, generally used with the paragraph tag. Notice in this section's example that paragraphs that are not assigned the copy class appear in the body default font-size.
|
