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:

HTML3
<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:

CSS
.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:

CSS
.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.

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.

CSS
.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.

CSS
.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:

CSS
.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:

CSS
.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:

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:

CSS
.centered_text{
text-align: center;
}

Code preview
Feedback 👍
Comments are sent via email to me.