Topics covered

Font-family

The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded.

You should always add at least one generic family in a font-family list, since there’s no guarantee that a specific font is installed on the computer or can be downloaded.

body {
  font-family: Proxima-Nova, Helvetica, sans-serif;
}

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Here a few examples how it’s done right:

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

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

p {
  font-family: cursive;
}

On our example, let’s add a font-family to the div we’ve created before.

<head>
<!-- ... -->
  <style>
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div>I’m a div</div>
</body>

If you hit refresh (CMD + R) again, your font-family should have changed from the default serif to sans-serif.

Font-Size

The font-size property allows you to set a font size for the text in your Element. There are different ways to set font-sizes that can get a little tricky, so let us only use the most basic technique for now. We will assign fixed pixel values to our elements:

<head>
<!-- ... -->
  <style>
    html {
      font-size: 10px;
    }
    h1 {
      font-size: 32px;
    }
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>I am a big heading</h1>
  <div>I am a div</div>
</body>

First you can see we set the font-size for everything inside of the html element to a small 10px (by default modern browsers set 16px). All the elements on the inside will inherit this value, if they don’t have a different rule for their font size. As you can see, the h1 has a value of 32px assigned, so the browser shows us a big heading while the div has the small text size without having a specific font-size property declared for itself.