CSSLesson 5 of 10Jump to practice

Text and fonts

Control font family, size, weight, line spacing and alignment.

Choosing a font

font-family takes a list. The browser uses the first font it has installed and falls back to the next one.

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

Always finish with a generic family, so there’s a sensible fallback:

Generic family Looks like
sans-serif Clean letters with no feet, like Arial
serif Letters with small feet, like Times
monospace Every letter the same width, like code

Font names with spaces need quotes: "Segoe UI".

Size, weight and spacing

Styling text
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    max-width: 34em;
  }
  h1 {
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-align: center;
  }
  .note {
    font-style: italic;
    color: #777;
  }
  a {
    color: teal;
    text-decoration: none;
  }
</style>
</head>
<body>
<h1>Fall in Vermont</h1>
<p>In October the maple trees turn red, orange and gold.
   The back roads fill with people stopping to take photos.</p>
<p class="note">Photos by our readers. <a href="#">Send yours</a>.</p>
</body>
</html>
Result
Property What it does Common values
font-size How big the letters are 16px, 1.25rem, 2em
font-weight How thick 400 (normal), 700 (bold), or normal, bold
font-style Slanted or not normal, italic
line-height Space between lines 1.5 (no unit means 1.5 × the font size)
text-align Line up the text left, center, right, justify
text-decoration Lines on text none, underline, line-through

px, em or rem?

  • px is a fixed size.
  • rem is relative to the root font size (16px by default). If a visitor sets a larger default font for easier reading, rem sizes grow with it.
  • em is relative to the element’s own font size, which makes it handy for spacing that should scale with the text.

A good habit: use rem for font sizes.

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Center the heading.

    h1 {
  text-align: ;
}

  2. Exercise 2

    Make the text bold using the right property.

    .title {
  : bold;
}

  3. Exercise 3

    Remove the underline from links.

    a {
  text-decoration: ;
}

Quiz: 3 questions

1. Why list several fonts in font-family?
2. With the browser's default settings, how big is 2rem?
3. Which line-height is easiest to read for paragraphs?

Finish the practice to complete this lesson.

Sign in to keep your progress on any device.