CSS tutorial - part 3: fonts

Let’s see how you can change font properties on your website.

• The ‘font-family‘ property sets the font. It’s recomended to use basic font families like: serif (Times New Roman, Garamond, Georgia), sans-serif (Trebuchet, Arial, Verdana) and monospace family (Curier, Curier New, Andele Mono).
  

  p {
    font-family: Arial, Verdana, sans-serif;
  }

  Paragraf will be displayed using the font ‘Arial’. If the font is not installed on user’s computer, ‘Verdana’ will be used instead. If both these fonts are unavaliable, a font from sans-serif family will be used.

• The ‘font-style‘ property defines the font apperance: normal, italic or oblique.
  

  p {
    font-style: italic;
  }

• The ‘font-variant‘ property defines variants of a font. By dafault it’s set to normal. You can also set it to small-caps, which uses smaller sized capitalized letters.
  

  p {
    font-variant: small-caps;
  }

• The ‘font-weight‘ property displays font normal or bold.
  

  p {
    font-weight: bold;
  }

• The ‘font-size‘ property sets the size of a font. You can use units like px (pixels), pt (points), % (percent) or em (width of the letter ‘M’).
  

  p {
    font-size: 20px;
  }

• There is also ‘font‘ property that can combine all previous font properties. The order of properties is: font-style font-variant font-weight font-size font-family. So in one line you can define:
  

  p {
    font: italic bold 20px Arial;
  }

Defining font properties is very important for websites, so now that part is covered. Now you can display fonts on your site in various ways.

This entry was posted on Jan 8 and is filed under css, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.