CSS Fonts

CSS gives you excellent control over the font display. You can change the font size, font color, boldness, size, and style of your text.

Fonts are also an essential component of any web site. A proper font also helps in conveying special meaning, and hence you must appropriate fonts wherever required. Often, fonts have various styles inside the same family, usually a bold or an italic styled, sometimes the blend of both bold and italic style, sometimes a bit small-caps and in other cases, extra-light, extra-bold, stretched or condensed versions of the same font. In this chapter, you will learn about font styling features provided by CSS.

CSS Font Properties

The various font properties of CSS are used to define the font family, boldness, size, and style of your text that you will be using on your web page. You can set various font properties for your HTML element provided by the CSS. Some of these are:

Font PropertiesDescription
font-styleCSS font-style property is implemented for making a font italic, normal, and oblique.
font-familyCSS font-family property is implemented for transforming the face or look of your font.
font-variantCSS font-variant property is implemented for creating a small-caps effect to your font.
font-weightCSS font-weight property is implemented for enhancing or reducing how bold or light your font will appear.
font-sizeCSS font-size property is implemented for enhancing or reducing the size of your font.

The font property of CSS is implemented as a shorthand notation to represent many other font properties.

CSS Font Families

CSS provides two different types of font family names:

  • Font family - are those with a particular font family (such as: "Times New Roman" or "Arial").
  • Generic family - are those with a cluster of font families having a similar look (like "Serif" or "Monospace").

Font Family and Its Implementation

The font-family property can be written with several font names separated by a comma as a "fallback" system. The fallback system means, in case the browser does not hold up or support or recognize the primary font name, it will try to deal with the next font, and so on. You can keep multiple font-family names as alternative options.

Here is a code that shows how to implement the font family of CSS:

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        p.serif {
            font-family: "Monotype Corsiva", serif;
        }
        
        p.sansserif {
            font-family: Arial, sans-serif;
        }
    </style>
</head>

<body>
    <h2> The font-family of CSS </h2>
    <p class="serif"> This paragraph is in the Monotype Corsiva font. </p>
    <p class="sansserif"> This paragraph is in the Arial font. </p>
</body>

</html>

It is to be noted that in case the name of your applied font family is having more than a single word, make sure you enclose it in quotation marks, something like: "Monotype Corsiva".

Font Style in CSS

The implementation of font-style property is done for specifying italic text. It can be assigned with three values:

  1. normal - where the text is shown usually.
  2. italic - where the text is shown in italics.
  3. oblique - where the text is "leaning" (though browsers less support it).

This is a code snippet showing its implementation:

Example:
h2.normal {
    font-style: normal;
}

h2.italic {
    font-style: italic;
}

Font Size

The font-size property of text is used to give the size of your text. The size of the font can be measured as absolute or relative.

Absolute size characteristics:

  • Absolute size assigns your text to a particular size.
  • It does not permit the user to modify the text size in the browsers.
  • Font size with absolute characteristics is helpful if you know the physical size of the output.

Relative size characteristics:

  • Assigns the size comparative to your surrounding elements.
  • Permits the user to modify the size of texts in browsers.

It is to be noted that if you do not specify the font size, by default, it will take the standard text size. The default text size for a paragraph is 16px.

Units of Measurement of Fonts

There are two units for measuring the fonts. These are:

  1. px (Pixel)
  2. em (16px = 1em)

Let us see how we can implement these:

Example:
p {
    font-size: 3.5em;    /* 40px/16=3.5em */
}

H3 {
    font-size: 1.890em;    /* 30px/16=1.890em */
}

h2 {
    font-size: 50px;
}

p {
    font-size: 24px;
}

Font Weight in CSS

This property is used to shape the weight of your font. Here is a code snippet of how you can implement it:

Example:
h2.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

Font Variant in CSS

This property is used to denote if the text should be exhibited in small-caps font or not. Here is a code snippet showing how to implement it:

Example:
h3.normal {
    font-variant: normal;
}

h3.small {
    font-variant: small-caps;
}

Scroll Back to Top