Font Properties

The CSS provide several properties for styling fonts of the text content, like: font-family, font-style, font-variant, font-weight and font-size. The following section will describe you each one of these properties one by one.

Font Family

The font-family CSS property allows you to set a prioritized list of font family name and/or generic family name for the text content of a selected element.

The font-family property can hold several font names as a fallback system. List the font that you want first, then any fonts that might fill in for the first if it is not available. You should end the list with a generic font family which are five — serif, sans-serif, monospace, cursive and fantasy. A font family declaration might look like this:

    p {
        font-family: "Times New Roman", Times, serif;
    }

Font Style

The font-style property sets the font style for the text content of an element.

The possible values for this property are: normal, italic or oblique.

    p.one {
        font-style: normal;
    }
    p.two {
        font-style: italic;
    }
    p.three {
        font-style: oblique;
    }

Font Size

The font-size property sets the size of font for the text content of an element.

There are several ways to specify the font size values e.g. with keywords, pixels or ems.

Setting Font Size with Keywords

By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly. An absolute size is specified using one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large.

A relative size is specified using one of the following keywords: smaller, larger.

    body {
        font-size: large;
    }
    h1 {
        font-size: larger;
    }
    p {
        font-size: smaller;
    }

Setting Font Size with Pixels

Setting the font size in pixel values (e.g. 12px, 16px, etc.) is a good choice when you need the pixel accuracy. However, the results may vary to some extent across the browsers, since they use different algorithms to achieve the similar effect.

    h1 {
        font-size: 24px;
    }
    p {
        font-size: 14px;
    }

Setting Font Size with Em

The em unit refers to the font size of the parent element.

The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element.

If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px.

If you haven’t set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px.

    h1 {
        font-size: 2em;    /* 32px/16px=2em */
    }
    p {
        font-size: 0.875em;    /* 14px/16px=0.875em */
    }

Font Weight

The font-weight property specifies the weight or boldness of the font.

The possible values of font-style property are: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.

The numeric values 100-900 specify the font weights, where each number represents a weight darker than its predecessor. 400 is same as normal & 700 is same as bold.
The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

    p {
        font-weight: bold;
    }