CSS font properties are probably one of the most important property of a document

CSS font

CSS font properties are probably one of the most important property of a document. When you specify a font in your CSS file and the end user doesn't have that purticular font installed on his system, then the browser will display the text with its default font installed on that system.

How to set CSS Font properties ?

You can sets several Font properties in your CSS file; font-family, font-size , font-style are the primary font peoperties that a user can sets frequently.

font-family

Using font-family property you can specify the typeface of a font that display a text.

body {
  font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
p {
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

output

You can set more than one typeface in the font-family properties , browser will prefer the first one that the end user has installed on his computer. It is important to note that the names of each font are case insensitive .

font-size

The font-size property is to change the size of a font to bigger or smaller. You can use CSS Measurements like pixels, ems and percentage to change the size of a font.

You can set CSS font-size values in absolute and relative sizes. Absolute size sets font to a fixed size and relative size sets font relative to surrounding elements.

p {font-size:20px;}

Pixel (PX) is the most frequently used size unit but if you use em then can avoid browser resizing problem.

p {font-size:0.875em;}

em represents the current browser font size that is 1em is equal to the current font size of the browser. When compared to pixel you can calculate the size of em with following formula pixels/16=em .

body {font-size:100%;}

You can change the size of the font using percentage values, font-size:100%; means that the font size is using browser's current font size. If you want to increase the font size you can increase the percentage value and for decrease the font size, yo can decrease the percentage value.

body {font-size:200%;}

The above code will double the font size from the current font size of the browser.

body {font-size:50%;}

The above code will half the font size from the current font size of the browser.

font-style

CSS provided two font-style that you can change, they are italic or oblique

p {font-style:italic;}
h1{font-style:oblique;}

Other font properties:

font-weight

When you want to display your font thicker then you can use font-weight properties.

p{font-weight:bold;}

You can change the font-weight values to normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

p{font-weight:bolder;}
p{font-weight:500;}

font-variant

The font-variant property helps you to change all lowercase letters are converted to uppercase letters, when compared to other text the converted uppercase letters appears in a smaller font size than the original uppercase letters.

p{ font-variant:small-caps;}

The following source code combining most of the above mentioned pproperties in a single documnet.

<html>
<head>
  <style type="text/css">
    body {
      font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    }
    p.size{ font-size:20px;}
    p.percentage{ font-size:80%;}
    p.style{ font-style:italic; }
    p.bold { font-weight:bold; }
    p.variant { font-variant:small-caps; }
  </style>
</head>
<body>
  <p class="size">This paragraph displays in font size 20</p>
  <p class="percentage">This paragraph displays in font size smaller as 80%</p>
  <p class="style">This paragraph displays in font style as Italics</p>
  <p class="bold">This paragraph displays BOLD letters</p>
  <p class="variant">This paragraph change small to capital letters</p>
</body>
</html>

output