Font Family

In this lesson, we will take care of the text on our page: its font, size, weight, line spacing and alignment.

From the HTML course, you know the strong and em elements. They give text a meaning: strong marks important text and em text we stress. Browsers show them in bold and in italics by default, but how text looks is the job of CSS. With CSS, we can make any text bold or italic, or change how strong and em look.

We choose the font with the font-family property. A font family is one typeface with all its variants: for example, the Arial family has a regular, a bold, an italic and a bold italic variant. A browser can only use fonts that are installed on the visitor's device (or fonts downloaded with the page, which we will get to at the end of this lesson). That's why the value of font-family is a list of fonts separated by commas: the browser uses the first font from the list that it has.

p {
	font-family: Verdana, Arial, sans-serif;
}

Here the browser tries Verdana first. If Verdana isn't installed on the device, it tries Arial. And if Arial is missing too, it uses its default sans-serif font.

sans-serif isn't the name of a font, but of a generic family: a whole kind of fonts. A browser has a font for every generic family, so we always end the list with one. The most important generic families are:

• serif: the letters have small strokes (serifs) at their ends, as in books,
• sans-serif: letters without serifs, simple and clean,
• monospace: all letters are equally wide, as in code.

When a font name contains spaces, it is best to write it in quotes: "Times New Roman". But never put a generic family in quotes: "sans-serif" in quotes means a font called sans-serif, and there is no such font.

The font is inherited, so we set it on body and all the text on the page gets it. Then we can give some elements, such as headings, a different font.