Basics of CSS3 Fonts

CSS Basics – Part 10

CSS Course

Foreword: In this article I talk about the basics of CSS fonts.

By: Chrysanthus Date Published: 15 Dec 2015

Introduction

This is part 10 of my series, CSS Basics. In this article I talk about the basics of CSS fonts. You should have read the previous parts of the series before coming here, as this is a continuation.

Meaning of Font
Just as people have different handwritings, typed characters are of different shapes. A shape is called a font face. Just as a group of handwritings are similar, a group of font faces are similar, forming a font family. An example of a font family name is, futura. Examples of font face names of the futura family are: futura medium, futura medium italic, futura condensed medium, and futura condensed extra bold.

Generic Font Families
Font families that are likely to be supported by your browser are, serif, sans-serif, cursive, fantasy, and monospace. These are generic font families; in the sense that each can substitute a particular font family that your browser does not support. A font family, whether generic or not, has a name.

The font-family Property
The value of a font-family property is the name of the font family. Possible values are: serif, sans-serif, cursive, fantasy, and monospace. An example is:

font-family: sans-serif

If the name has a space, then it should be in quotes. The hyphen is not a space. When the designer does not decide on a family name, the initial or default family name is chosen by the browser.

The font-style Property
This describes the leaning nature of the characters in the HTML element. A possible value for this is “italic”. It indicates that the characters have to be leaning. The value to the font-style property can be any of the following:

normal | italic | oblique

In this tutorial series, | means, or. The best way to appreciate the property values in this tutorial is to try them out, yourself. Below I give you a sample code, which you can modify to test the different properties and their values.

The font-variant Property
A possible value for this is “small-caps”. When you use this value, all the lowercase letters in the element will become uppercase letters, but will be short; while the letters that were originally in uppercase will remain tall. The value to the font-variant property can be any of the following:

    normal | small-caps | inherit

The font-weight Property
This property determines how thick the characters are. The value to the font-weight property can be any of the following:

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

The numbers do not need any unit. “normal” means 400. The numbers can be interpreted as follows:

    100 - Thin
    200 - Extra Light (Ultra Light)
    300 - Light
    400 - Normal
    500 - Medium
    600 - Semi Bold (Demi Bold)
    700 - Bold
    800 - Extra Bold (Ultra Bold)
    900 - Black (Heavy)

The font-size Property
This determines how big a character is. The value to the font-size property can be any of the following:

    xx-small | x-small | small | medium | large | x-large | xx-large

The above are absolute sizes. You can make the font of the element in question bigger or smaller than that of the parent element, using the relative font-size property. The value to the “relative” font-size property can be any of the following:

    larger | smaller

An example of the use of the “absolute” property is:

    font-size: x-small

An example of the use of the “relative” property is:

    font-size: larger

You can also use a number as a value, with a unit. You can use the percentage, pixel or em; em is a good choice. However, most of your problems will be solved using the keywords above.

Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        p {font-family:monospace; font-size:x-large}
    </style>
</head>
<body>
    <p>
        This is a very short paragraph, typed.
    </p>
        This is the browser's default font
</body>
</html>

At this point, you have got the basics of fonts. Let us stop here and continue in the next part of the series.

Chrys

Broad Network

Related Articles

Basics of CSS3 Fonts

CSS Basics – Part 10

CSS Course

Introduction

Related Links

Comments