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

Home > Articles

Font Controls

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

Setting Bold, Bolder, Boldest

In straight HTML, text is either bold or not. CSS provides several more options that allow you to set different levels of boldness for text. Many fonts have various weights associated with them; these weights have the effect of making the text look more or less bold. CSS can take advantage of this feature (Figure 3.9).

Figure 3.9

Figure 3.9 The difference between normal and bold text is evident here.

In this example (Code 3.4 and Figure 3.10), I've created a class called bolder to make text bolder than the surrounding text.

Code 3.4. The bolder class is used to make boldface text. Italics within a paragraph have been set to non-bold.

<html>
<head>
     <style type="text/css"><!--
         body {
            font-size: 24px;
            font-family: 'times new roman',
            → times, serif;
         }
         .bolder {
            font-weight: bolder;
         }
         p i {
            font-weight: normal;
         }
     --></style>
</head>
<body>
     <b>More from <i>Alice in Wonderland</i></b>
     <p><span class="bolder">'I wish I hadn't
     → cried so much!'...</span></p>
     <p><span class="bolder">Just then she heard
     → <i>something</i> splashing about in the
     → pool a little way off...</span></p>
     <p><span class="bolder">'Would it be of any
     → use, now,' thought Alice...</span></p>
     <p><span class="bolder">'Perhaps it doesn't
     → understand English,' thought Alice...
     → </span></p>
     <p><span class="bolder">'Not like
cats!'...</span></p>
</body>
</html>
Figure 3.10

Figure 3.10 All the text has been set to bold except italicized words, which are a normal weight.

To define bold text in a CSS rule:

  1. font-weight:

    Type the property name font-weight, followed by a colon (:).

  2. bolder;

    Type the value for the font-weight property, using one of these options (Table 3.7):

    Table 3.7. font-weight Values

    Value

    Compatibility

    normal

    IE4, N4, S1, O3.5, CSS1

    bold

    IE3, N4, S1, O3.5, CSS1

    lighter

    IE3, N6, S1, O3.5, CSS1

    bolder

    IE3, N6, S1, O3.5, CSS1

    100-900*

    IE4, N4, S1, O3.5, CSS1

    • bold, which sets the font to boldface
    • bolder or lighter, which sets the font's weight to be bolder or lighter relative to its parent element's weight
    • A value from 100 to 900, in increments of 100, which increases the weight, based on alternative versions of the font that are available
    • normal, which overrides other weight specifications
  • + Share This
  • 🔖 Save To Your Account