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 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.

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

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

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




    IE4, N4, S1, O3.5, CSS1


    IE3, N4, S1, O3.5, CSS1


    IE3, N6, S1, O3.5, CSS1


    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