Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Font Controls

  • Print
  • + Share This
This chapter is from the book

Setting the Font Size

HTML gives you seven font sizes, but these are all relative to a default size set by the visitor. With CSS, you can specify the size of the text on the screen using several notations or methods, including the traditional point-size notation, percentage, absolute size, and even a size relative to the surrounding text. Figure 3.5 shows text in different sizes.

fig03_05_fontsizes.gif

Figure 3.5 A few font sizes.

In this example (Code 3.2 and Figure 3.6 ), I define the class copy to use a font size of 12 pixels and then apply it to paragraphs of text.

Example 3.2. The font size for the class copy has been set to 12 pixels, blockquotes will appear with a 2-em indent, and level 3 header tags will appear large(r) than the parent's text—which, in this case, is the default size set for the browser.

<html>
<head>
     <style type="text/css"><!--
        .copy {
            font-size: 12px;
        }
        blockquote {
            font-size: 2em;
        }
        h3 {
            font-size: large;
        }
     --></style>
</head>
<body>
     <h3> CHAPTER II<br>
     The Pool of Tears</h3>
     <p class="copy">'Curiouser and curiouser!'
     U2192.GIF cried Alice...</p>
     <blockquote>
        ALICE'S RIGHT FOOT, ESQ.<br>
        HEARTHRUG,<br>
        NEAR THE FENDER,<br>
        (WITH ALICE'S LOVE).
     </blockquote>
</body>
</html>
fig03_06_fontsize.jpg

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 (:).
  2. 12px; Type a value for the font size, which could be any of these options:
    • A length unit (usually, the font size in points)
    • An absolute expression that describes the font size; the expressions are xx-small, x-small, small, medium, large, x-large, and xx-large
    • smaller or larger, to describe the font size in relation to its parent element (see "Inheriting Properties from a Parent" in Chapter 2)
    • A percentage, representing how much larger the text is in proportion to the size of its parent element (75%, for example)

See Table 3.5 for a list of font-size values and their browser compatibility.

Table 3.5. font-size Values

Value

Compatibility

<length>

IE4, N4, S1, O3.5, CSS1

<percentage>

IE4, N4, S1, O3.5, CSS1

smaller

IE4, N4, S1, O3.5, CSS1

larger

IE4, N4, S1, O3.5, CSS1

xx-small

IE4, N4, S1, O3.5, CSS1

x-small

IE4, N4, S1, O3.5, CSS1

small

IE4, N4, S1, O3.5, CSS1

medium

IE4, N4, S1, O3.5, CSS1

large

IE4, N4, S1, O3.5, CSS1

x-large

IE4, N4, S1, O3.5, CSS1

xx-large

IE4, N4, S1, O3.5, CSS1

  • + Share This
  • 🔖 Save To Your Account