Font Properties

One of the most common things for CSS to control is font properties. In this section, we'll cover some of the font attributes that you can control with CSS.

  • Font Family "Font family" is what we usually think of as the "font" itself: Arial, Cursive, Britannic Bold, for example. The fonts that you specify will only render properly if the person viewing your site has those fonts installed on their machine, so including a backup generic font family at the end of your definition is a good habit. Below, we define the font family for h3 elements, generic p elements, and special "sansserif" class p elements.
    <html>
     <head>
      <style type="text/css">
       h3 { font-family: times; }
       p { font-family: courier; }
       p.sansserif { font-family: sans-serif; }
      </style>
     </head>

     <body>
      <h3>This header should have a times font.</h3>
      <p>This paragraph should have a font of courier.</p>
      <p class="sansserif">A sans-serif paragraph!</p>
     </body>
    </html>
  • Font Size Font size can be defined in a variety of ways: xx-small, medium, large, xx-large, smaller/larger, 48pt, 2cm, or .25in, and percentage values such as 150%.
    <html>
     <head>
      <style type="text/css">
       h1 { font-size: 150%; }
       h2 { font-size: xx-small; }
       p { font-size: xx-large; }
      </style>
     </head>

     <body>
      <h1>This header has a font size of 150%</h1>
      <h2>I'm a little teapot...</h2>
      <p>I am HUGE!</p>
     </body>
    </html>
  • Font Style Font style refers to whether the font is rendered normally, or in italics, or "oblique." Oblique looks very similar to italics in most browsers.
    <html>
     <head>
      <style type="text/css">
       h1 { font-style: normal; }
       h2 { font-style: italic; }
       p { font-style: oblique; }
      </style>
     </head>

     <body>
      <h1>A normal header</h1>
      <h2>An italic header</h2>
      <p>An oblique paragraph.</p>
     </body>
    </html>
  • Font Weight Font weight defines the "darkness" of the font. You can use values in a range from 100-900, or keywords including bold, bolder, and lighter.
    <html>

     <head>
      <style type="text/css">
       p.normal { font-weight: normal; }
       p.thick { font-weight: bold; }
       p.thicker { font-weight: 900; }
      </style>
     </head>

     <body>
      <p class="normal"> A normal font-weight. </p>
      <p class="thick"> A bold font-weight. </p>
      <p class="thicker"> A font-weight of 900! </p>
     </body>

    </html>
  • Font Variant Font variant currently only has two values: normal, or small-caps.
    <html>

     <head>
      <style type="text/css">
       p.normal { font-variant: normal; }
       p.small { font-variant: small-caps; }
      </style>
     </head>

     <body>
      <p><b>It is important to remember that Netscape 4 does not support the "font-variant" property, but Mozilla versions 1.0+ do.</b></p>
      <p class="normal"> A normal paragraph. </p>
      <p class="small"> A paragraph with the font-variant set to small-caps. </p>
     </body>

    </html>
  • Text Transform Text transform is used to change the case of your text from uppercase to lowercase.
    <html>

     <head>
      <style type="text/css">
       p.capitalize { text-transform: capitalize; }
       p.uppercase { text-transform: uppercase; }
       p.lowercase { text-transform: lowercase; }
      </style>
     </head>

     <body>
      <p class="capitalize"> An example of capitalized text. </p>
      <p class="uppercase"> An example of uppercase text. </p>
      <p class="lowercase"> An example of lowercase text. </p>
     </body>

    </html>
Share this page Share