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"; }
Fonts that are more than one word long such as Times New Roman should be quoted using " or ' characters.
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:
Value | Example |
---|---|
100 | Font weight 100 |
200 | Font weight 200 |
300 | Font weight 300 |
400 | Font weight 400 |
500 | Font weight 500 |
600 | Font weight 600 |
700 | Font weight 700 |
800 | Font weight 800 |
900 | Font weight 900 |
bold | Font weight bold |
bolder | Font weight bolder |
lighter | Font weight lighter |
normal | Font weight normal |
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; }
Not all fonts support all font weights.
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;
}
This text is in 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:
Value | Example |
---|---|
normal | Normal text |
italic | Italic text |
oblique | Oblique 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:
Property value | Purpose | Example |
---|---|---|
left |
Aligns the text left | Left |
right |
Aligns the text right | Right |
center |
Aligns the text to the center | Center |
justify |
Aligns the text left | Justify |
inherit |
Aligns the based on it's parent | Inherit |
The following example will center all text within an element:
.centered_text{
text-align: center;
}