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

Home > Articles

Font Controls

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

Creating Small Caps

Small caps (sometimes referred to as "mini-caps") are useful for emphasizing titles. With small caps, lowercase letters are converted to uppercase, but in a slightly smaller size than regular uppercase letters (Figure 3.11).

Figure 3.11

Figure 3.11 All the letters are capitals, but the first letter is larger than the rest.

In this example (Code 3.5 and Figure 3.12), the <h2> tag is used to create a distinctive book title in small caps.

Code 3.5. The level 2 header tag is set to be displayed in small caps.

<html>
<head>
     <style type="text/css"><!--
         body {
            font-size: 24px;
            font-family: 'times new roman',
            → times, serif;}
         h2 {
            font-variant: small-caps;
         }
     --></style>
</head>
<body>
     <h2>Chapter III<br>
     A Caucus-Race and a Long Tale</h2>
     <p>They were indeed a queer-looking party
     → that assembled on the bank...</p>
</body>
</html>
Figure 3.12

Figure 3.12 Using small caps for the title is an elegant way to set it off from the rest of the text.

To make a rule for small caps:

  1. font-variant:

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

  2. small-caps;

    Type the value of the font-variant property, using one of these options (Table 3.8):

    Table 3.8. font-variant Values

    Value

    Compatibility

    normal

    IE4, N6, S1, O3.5, CSS1

    small-caps

    IE4, N6, S1, O3.5, CSS1

    • small-caps, which sets lowercase letters as smaller versions of true uppercase letters
    • normal, which overrides other font-variant values that might be inherited
  • + Share This
  • 🔖 Save To Your Account