Set the page's fonts

Give the page a dependable font and readable spacing.

What to build

Two rules.

Requirements

• body has the stack "Segoe UI", Arial, sans-serif.
• body has a line-height of 1.5, with no unit.
• h1 has a font-weight of 600.

Constraints

Set the font only once.

Example

font-family: Georgia, "Times New Roman", serif;

Why it works

The browser takes the first available font, and the heading inherits the family without being told.

Hints

Solution

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fonts</title>
  <style>
    body {
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1.5;
    }
    h1 { font-weight: 600; }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Some text.</p>
</body>
</html>

Lesson: Text and fonts →