Part 3.5Font families, sizes, weights, variants, styles and alignment

Font families

One of the original uses for CSS was for setting fonts. Before CSS, back in the days of the web before CSS, fonts were defined as shown below:

<font face="Times New Roman" color="green">
	This text is in Times New Roman
</font>
								

This meant many nested blocks of code in the HTML and it also meant repeating this over and over again. On top of this, attributes could easily become hard to read when they are racked up like this.

CSS defines two types of font family names:

• Generic family - such as Serif or Monospaces - these encapsulate the inner font families.
• Font family - such as Arial or Times New Roman - these are actually fonts

The purpose of having the two different types of font family is so that there is a fallback option if a specified font family does not exist on the system. Times New Roman for instance is a Serif font (this means that some characters have small lines at the ends of the characters such as with some older languages such as English).

CSS defines a collection of different font attributes and one of those is the font family. This is achieved with the font-family property:

.times_text{
	font-family: "Times New Roman";
}
								

The problem with the above sample is that it does not define a fallback - if the client's computer does not have the font installed it will revert to the system default font which can cause incompatibilities with font sizes and styles.

Fonts can be stacked so that a fallback font is specified. It is sometimes a good idea to use the generic family as a fallback font:

.times_text{
	font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
}
								

This font stack means that if the first font, Cambria, is not found it will use Hoefler Text and keep flowing down the list until it finds one it supports. Notice the serif font specified at the end.

This page has a collection of web-safe font stacks.

Using custom fonts in CSS is covered later in the tutorial in the article on CSS @ rules.

Font size

CSS can also define a font size to apply to some text. The font size can be defined in as a size in any of the usual units (such as em, px, % or pt).

It is common place to see font sizes in points (pt) which allows them to work in the same sizing system as desktop software such as Microsoft Word.

.bigger{
	font-size: 36pt;
	font-size: 40px;
	font-size: 5em;
	font-size: 200%;
}

Font sizes which are specified in a percentage, such as the 200% used in the example, will take the font size from the parent element and apply this percentage size to it. For instance, if an element was inside another element which had a font size of 20px and the inner element had a font size of 50%, the resultant font size of this element is 10px.

Font weights

Font weights define how heavy the text is. For instance, text that is bold is defined of having a weight of 700.

.weighted{
	font-weight: weight;
}
								

Font weights define an alternative to using the strong and b HTML tags.

These can vary between 100 and 900 in factors of 100. The following are applicable values:

Font weights should not be used to style data but to represent information that is important.

The following sample demonstrates using the font-weight property:

.medium{
	font-weight: 500;
}
.light{
	font-weight: 100;
}
								

Font variants

Font variants are used to make text small capitals or not. It is a simple boolean value but in CSS3 it has more values.

Font variants are easy to use:

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

Font styles

A font style can be defined on a HTML element that can determine it's appearance. There are just three values (excluding initial and inherit). These values are normal, italic and oblique.

The following sample demonstrates how this is done in CSS:

.styled-text{
	font-style: style;
}
								

As mentioned, there are three values. The following table demonstrates each of these values applied to text:

And that is all there is to font styles.

Text align

Text can be aligned as if it were in Microsoft Word using the text-align CSS property. There are five properties:

The following example will center all text within an element:

.centered_text{
	text-align: center;
}