CSS Font Styling

CSS Font styling is similar to CSS text styling, except the font styles change how the fonts themselves are displayed.

Let’s begin with the font itself.
p { font-family:"Times New Roman", Times, serif; }
This gives 3 fonts to choose from, or in this case, 3 ‘families’ of fonts. The first is a specific font, the second is a font-family and the third tells the browser to use any serif font it has in it’s font library. This acts as a fall back system, so if the first isn’t found the second is used, and if that isn’t found the third is used.

The font itself can be styled. The styles allowed are ‘norma’, ‘italic’ or ‘oblique’. Normal is just normal standard text. Italic makes the text lean as italics do. Oblique is similar to italics only it is hardly supported by many browsers. Some examples:
.normal { font-style: normal; }
.italics { font-style: italic; }
.oblique { font-style: oblique; }

The font size can also change. Generally there are three ways to do this:

• Pixels (px)
• Em (em)
• Percentages (%)

The W3C recommend using em.

Here are some examples:
h1 { font-size: 36px; }
h2 { font-size: 2em; }
h3 { font-size:90%; }
Internet Explorer users may have issues using pixel values, where as nearly all other browsers are fine. Because of this always try to use em where possible.

Similar to text styling of capitalising the letters you can also produce a ’small caps’ version of most fonts using CSS.
p { font-variant: small-caps; }

Finally, you can bold the font with a number of options, including:

• normal
• bold
• bolder
• lighter
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• inherit

Use these in the following format:
p { font-weight: bold; }
.mid { font-weight:500; }
.bolder { font-weight: bolder; }

See CSS Styling Text tutorial for more information on how to style text on your web page.