CSS Fonts

Text makes up 90% of a website. Text is important! Your goal is to make your website attractive and easy to read. This can be accomplished by using the correct fonts.

Important Things to Know

  1. How to set a font and fallback fonts
  2. How to set the size of your text
  3. The FIVE types of fonts
  4. Using Google fonts
  5. Using a font you downloaded

CSS Properties

Property Values Description
font-family font names This property sets the primary font and fallback fonts for your text.
font-size px values, em values, % values, vw values This property sets the size of the text.

font-family Back to top

The font-family property allows you to choose a primary font and fallback fonts for an HTML element.

In this example:

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

font-size Back to top

The font-size property sets size of the text.

Default Font Size

The default font-size for the <body> is 16px.

So if you don't set the font-size, it will automatically be 16px.

PX Values

If you want an exact size, you can use a px value.

In this example, the base font-size for the webpage is 10px.

So, paragraphs are 10px. And since the <h1> is double the base font size, so it is 20px.

body {
  font-family: Tahoma, Arial, Verdana, sans-serif;
  font-size: 10px;
}

Here is the same webpage with a 20px base font-size.

Paragraphs are 20px and the <h1> is 40px.

body {
  font-family: Tahoma, Arial, Verdana, sans-serif;
  font-size: 20px;
}

You can set the font-size for individual elements, not just the <body>.

Here the <h1> is 60px.

body {
  font-family: Tahoma, Arial, Verdana, sans-serif;
  font-size: 20px;
}
h1 {
  font-size: 60px;
}

EM, % and VW Font Sizes

Possible Values Description Example
px value like 36px This text is 36px. It is an exact size.
em value like 3em This text is 3em. 1em is equal to the current font size. 1em = 16px. 3em = 16x3 = 48px.
percent value like 200% This text is 200%. 100% is equal to the current font size. 100% = 16px. 200% = 16x2 = 32px.
vw value like 3vw This text is 3vw. It resizes depending on the width of the browser. (try resizing your browser)

Five Font Types Back to top

All fonts are one of these types:

Serif Fonts

Sans-Serif Fonts

Serif vs. Sans-Serif

Cursive Fonts

Fantasy Fonts

Monospace Fonts

Monospace vs. Other Types