| Previous | Table of Contents | Next |
In this lesson, you learn how to create styles that specify the size of the text on your web pages.
Using blocks of different sized text is one of the most fundamental web page design techniques, and it is usually one of the first skills learned by students of the HTML language. The basic HTML tags provide for variations in font size primarily in the form of paragraph text and six boldface headline tags, ranging from largest to smallest, and numbered from H1 to H6, as shown in Figure 8.1.
)
Figure 8.1 Standard HTML coding
can produce headline text in only six sizes.
A Netscape revision to the HTML language added a <FONT> tag which provides web page designers with more control. It allows the font size to be specified without the bold style imposed by the headline tags, but it is still limited in its flexibility. It cannot create text that falls between the default sizes.
This, ironically, is a throwback to the way that digital fonts used to be. At one time, a typeface was sold as a collection of bitmaps with each size requiring a different file. At that time, a particular typeface in a particular size, such as 12-point Helvetica, was considered to be a font. You would purchase a typeface package and receive a collection of fonts in different sizes that you would download to your printer and command your application to use.
Then scaleable font technologies came along, like Adobe Type Manager and TrueType, that use a single set of font instructions for each typeface to create text of almost any size. The ability to scale fonts in applications and in printers revolutionized the desktop publishing industry, and the CSS1 standard is designed to provide the same service to web publishers.
With the font-size property in a style declaration, you can specify font sizes for your text with almost the same precision as a word processor or page layout program. Sizes can be specified in several different ways, using absolute or relative measurements, and very fine adjustments (down to 1 point, or 1/72 inch) can be applied, as shown in Figure 8.2.
)
Figure 8.2 Font samples from 7
to 16 points demonstrate the precise control over font sizes provided by
HTML styles.
The syntax for specifying font sizes in a style is the same as that for most of the properties in the CSS1 standard. The font-size property name follows the selector, followed by a value that is specified as an absolute measurement, a relative keyword, or a relative measurement. A typical style rule controlling font size would appear as follows:
){kind=link}
){kind=link}
P {font-size: 14pt}
You can express absolute font size values by using the following measurements (shown with their accepted abbreviations in parentheses):
Absolute Value An absolute value is one that is not reliant on any other value. Text that has been assigned an absolute font size will always be identical in size to any other text with the same assigned value in that environment.
Point The point is a traditional unit of type size measurement that dates back before the time of digital typesetting. One point equals approximately 1/72 or 0.01383 inches.
Em For the font-size property, an em is a unit of length corresponding to the font size of the parent element. Measurements supplied in ems are therefore scaleable to screen displays of different resolutions. Internet Explorer 3.0 does not support the use of measurements in ems.
The scales used to measure absolute font-size values can be mixed within a document, and decimal values can be used to specify fractions of units. Absolute values are expressed by listing the numerical value immediately followed by the abbreviation for the unit of measurement, as in the following examples:
H1 {font-size: .75in}
H2 {font-size: 24pt}
H3 {font-size: .5cm}
H4 {font-size: 10px}
It must be understood that while these size measurements are referred to as absolute values, they are, in fact, relative to the size and resolution of the monitor on which they are displayed. If you specify a font size of one inch, and then measure the image that displays on your monitor, it will very likely not be anywhere near an exact inch. Software is usually designed for linear accuracy in the printing of fonts, rather than their screen display.
The measurements that display on your monitor, however, will be consistent. The one inch font will be equal in size (on your monitor) to a 72-point font, or to a 2.54 centimeter font. Pixels cannot be equated in this way, because the size of a single pixel varies, depending on your screen resolution and the size of your monitor.
There are font size keywords supported by the CSS1 standard, that also have absolute values, but their values are dependent on settings imposed by the browser. In addition to using absolute values that are numerical, you can also use any of the following terms:
The style syntax is the same, with the keyword simply replacing the numerical measurement, as follows:
H1 {font-size: x-large}
The relationship between these sizes is equivalent to that of the H1 through H6 headline tags, leaving them subject to the same limitations as headlines. The CSS1 standard recommends a 1.5:1 size ratio for the keyword values, meaning that large text should be 1 1/2 times the size of medium text. However, this ratio, as well as the base font size on which the ratios are calculated, is controlled by the browser and usually cannot be adjusted by the user.
Font-size is an inherited property, meaning that a font size value that is applied to a particular HTML element is passed down to all of the other elements contained within it. As a result of this relationship, you can also specify font sizes in relative terms, based on the size of the element’s immediate parent.
If, for example, you create a style for the <BODY> tag that includes the font-size property and a value of 14 points, you can then apply the font-size property to the H1 tag (which will be contained within the <BODY> tags) using a value that is relative to the 14-point body text size.
Relative font sizes can be expressed in three ways:
Keyword and numerical relatives are based on the keyword sizes discussed in the “Using size Keywords” section, earlier in this lesson. A font-size value of larger will cause the font to be enlarged from the parent element’s size to the next higher keyword value. Thus, if the <BODY> tag is assigned a font-size value of medium, large text will be displayed when the <H2> tag is assigned a font-size value of larger.
Numerical relatives can be used when you wish to enlarge or reduce text size by two or more keyword units. Numerical relatives are used by the font-size property by default if you specify a numerical value without a unit of measurement (such as inches or points). A font-size value of +2 will cause medium sized text to be enlarged to x-large (jumping two units), while a –2 value will reduce it to x-small.
Finally, relative values can be expressed as percentages, which are typically used in relation to an absolute numerical measurement. A font-size value of 200% causes text to be displayed at twice the size of the text in the parent element. Obviously, using percentages provides much greater flexibility, as you are not bound to the browser’s six standard font sizes.
Following are examples of each of the relative font-size values:
H2 {font-size: larger}
H2 {font-size: +1}
H2 {font-size: 150%}
Assuming that a browser uses the 1.5:1 ratio recommended by the CSS1 standard, the three declarations shown will all result in the same font size.
Explorer Support Internet Explorer 3.0 does not support the numerical and keyword relative values for the font-size property as defined in the CSS1 standard at this time. Support for relative font-size values using percentages is supported.
The use of relative values in an HTML document with several generations can become extremely complicated. Remember that a relative value for a property is always computed based on the parent element’s actual value for that property.
Thus, in the following example, if the <BODY> tag is assigned an absolute font-size value of 16 points, and the <H1> tag is defined as 200%, the <H1> text will be twice as large as the <BODY> text, or 32 points. If the <SPAN> tag is also defined as having a 200% font-size, its text calculates at 200% of the <H1> text’s actual size, causing the <SPAN> text to be 64 points in size.
<BODY> <H1><SPAN>T</SPAN>his is a Headline</H1> </BODY>
To familiarize yourself with the various ways of specifying font sizes, add a font-size property to the BODY selector in the <STYLE> block of your SAMPLE.HTML file (shown later). You can experiment with the different scales of measurement by modifying the sizes of the H1, H2, and BODY tags.
To see the effect of relative font sizes, modify the percentages applied to the OL LI, OL OL LI, and OL OL OL LI selectors to format the elements of the ordered list you created in Lesson 5.
You can also try adding the font-size property to other declarations, such as those for the .left, .right, and .center class selectors, and see the effects of your changes.
<STYLE>
<!--
H1 {font-family: "Impact";
font-size: 24pt;
color: red;
text-align: center}
H2 {font-family: "Comic Sans MS";
font-size: 20pt;
font-style: italic;
color: blue}
BODY {font-size: 14pt;
font-family: "Arial";
background: yellow}
.left {margin-right: 50%}
.right {margin-left: 50%}
.center {margin-left: 25%;
margin-right: 25%}
OL LI {font-size: 110%;
font-weight: bold}
OL OL LI {font-size: 100%;
font-weight: medium}
OL OL OL LI {font-style: italic;
font-size: 90%;
font-weight: medium}
-->
</STYLE>
TIP: Font Size Units Although mixing different size units, such as points, inches, and centimeters, is useful as an exercise, it is best to avoid confusion by selecting a single method of assigning font sizes and sticking to it. The same results can be achieved with any of the measurement scales, so the choice is strictly one of personal preference.
In this lesson, you learned the different means of specifying font sizes in HTML styles. In the next lesson, you learn how to modify a font’s appearance by changing its weight.
 |
 |
 |