Basics of CSS Fonts

Basics of CSS2 - Part 11

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, text), 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