Basics of CSS Fonts

Introduction
This is part 11 of my series, Basics of CSS2. In this article we shall look at the CSS font properties.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Meaning of Font
Characters in an HTML containing element and some inline elements (e.g. SPAN) will always have a set of characteristics. They may all be leaning. They may all be each thick or too thick. They may all be big or small. They may all look like curves. A Font is a set of these characteristics. The number of possible combinations is too high that the characteristics have been group into families.

Font Families
The font families that are likely to be supported by your browser are, serif, sans-serif, cursive, fantasy, and monospace. There are actually sub-sets (names) to each of these groups.

Font Properties
The study of Fonts can be complicated. I will give you just the basics in this article.

The font-family Property
The name of the font family property is, "font-family". Possible values are: serif, sans-serif, cursive, fantasy, and monospace. There are actually sub-sets (names) to each of these groups.

The font-style Property
The name of the font style property is, "font-style". 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 font-variant Property
The name for the font variant property is "font-variant". 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 they will be short; while the letters that were originally in uppercase will remain tall.

The font-weight Property
The name of the font weight property is "font-weight". This property determines how thick the characters are. Possible values are:

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

The numbers do not need any unit. "normal" means 400. "bold" means 700. "bolder" takes the inherited value one level higher. "lighter" takes it one level lower. The minimum effective value is 100; the maximum is 900.

The font-size Property
The name of the font-size property is font-size. This determines how big a character is. Possible values are:

xx-small, x-small, small, medium, large, x-large, xx-large

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.

Read and try the following code:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

p {font-family:monospace; font-size:x-large}

This is a very short paragraph, typed.

This is the browser's default font

As I said above, the different possible combinations of font characteristics are so many and the study of fonts can become complicated. So let us just round up and leave this part of the series.

Rounding Up the Tutorial
If you do not choose a font family and/or any of the font properties, for an element, the browser will choose that for you. The browser usually gives you something reasonable. If you do not want the browser's default font, then in the CSS rule, type a font-family property and value and then type one or more of the other properties and values.

Important: You can use one or more of the rest of the font properties on the default font without using the font-family. So if in the above code "font-family:monospace" was not typed, "font-size:x-large" alone would produce an effect on the default font.

If you really want to impress people with fonts, then you have to do more research on fonts, after this course.

Chrys