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

fig03_11_minicaps.gif

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.

Example 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',
            U2192.GIF 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
     U2192.GIF that assembled on the bank...</p>
</body>
</html>
fig03_12_mini_example.jpg

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