Changing the font with CSS3

Go back to HTML and CSS Index

In this lesson, we will look at how to change the font in different ways, e.g. the size, the type and the decoration.

The font-size property

The font-size property is used to specify the size of the font.

px

There are different ways of changing the size of the font - one way is to use a px value:

p {
font-size: 14px;
}
3.30 | Setting the font size of paragraphs to 14px

Example:

This text is 14px

Note, however, that a px value does not scale. It is an absolute unit.

em

Another way to change the font-size - one that actually does scale - is to use em or rem:

p {
font-size: 1.2em;
}
3.31 | Setting the font size of paragraphs to 1.2em

Example:

This text is 1.2em

The font-family property

To change the font, you use the font-family property:

h1 {
font-family: Georgia, serif;
}
3.32 | The font-family property

Example:

Georgia

If the name of the font consist of multiple words, you need to put it in quotation marks, like this:

h1 {
font-family: "Comic Sans MS", sans-serif;
}
3.33 | The font-family property

Example:

Comic Sans MS

Web safe fonts

Every device has its own preinstalled fonts - but not every device have the same fonts as the others. The fonts that are known as Web Safe Fonts are the ones that are preinstalled on all operating systems - from Windows to Mac to Linux, and so on.

Web Safe Fonts are often used as "fall back" fonts - meaning fonts that will be used, if the originally wanted font can't display. Here is a list of some web safe fonts:

  • Arial, sans-serif
  • Helvetica, sans-serif
  • "Times New Roman", serif
  • Times, serif
  • "Courier New", sans-serif
  • Courier, sans-serif
  • Verdana, sans-serif
  • Georgia, serif
  • Palatino, serif
  • "Trebuchet MS", sans-serif
  • "Arial Black", sans-serif
  • Impact, sans-serif

Serif vs sans serif

Serifs have feet while sans-serifs don't:

Serif
Sans-serif
3.34 | Serifs and sans-serifs

You can read more about fonts here: w3schools