0%
Illustration of paint brushes and color swatches turning a grey wireframe card into a styled card

Module 9: A Touch of CSS · Lesson 4 of 6

CSS Colors and Fonts: color, font-family and font-size

About 9 min

By HTML6 (opens in a new tab) · Updated · How we write and check content

All lessons in Module 9
  1. The style Attribute
  2. The style Element and Selectors
  3. External Stylesheets
  4. Colors and Fonts
  5. The Box Model
  6. Project: Style Your Card

Module overview

Goal: Set text and background colors, pick fonts with fallbacks and size your text.

Learn

Four properties handle most of the visual work. You met the first in the lesson on the style attribute:

  • color sets the text color.
  • background-color paints the area behind the content.
  • font-family picks the typeface.
  • font-size says how big the text is, e.g. 18px.

A color can be a name (tomato), a hex code (#2a6f4e: red, green and blue in pairs) or rgb(42, 111, 78). Designers usually hand you hex. The full list of named web colors (opens in a new tab) is fun to browse.

Not every computer has every font, so font-family takes a list, and the browser uses the first font it has. Always finish with a generic family such as serif, sans-serif or monospace:

font-family: Georgia, serif;

Keep the contrast between text and background strong, dark on light or light on dark, so everyone can read it. The accessibility checklist puts contrast near the top.

The short version

  • Hex colors start with #. Three digits are shorthand, so #fff is the same as #ffffff.
  • Put font names with spaces in quotes: font-family: "Times New Roman", serif;.
  • rem sizes follow the reader's browser font setting, so 1.125rem often beats a fixed 18px.
  • WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Colors and Fonts</title>
  <style>
    body {
      background-color: #fdf6e3;
      font-family: Georgia, serif;
    }
    h1 {
      color: #2a6f4e;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Tea Room</h1>
  <p>Twelve kinds of tea and one very old cat.</p>
</body>
</html>

Your task

The Page Turners Book Club wants a cozy look. In the <style> element:

  1. Style body with a background-color and a font-family list that ends with a generic family (like serif).
  2. Give the h1 a text color written as a hex code, like #8b2e16.
  3. Set the paragraphs' font-size with a unit, like 18px.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

h1 {
  color: 8b2e16;
}

Right

h1 {
  color: #8b2e16;
}

Leave off the # and the browser won't see a hex color, so it drops the declaration.

Wrong

<p style="font-family: "Times New Roman", serif;">Chapter one</p>

Right

<p style="font-family: 'Times New Roman', serif;">Chapter one</p>

The inner double quote closes the style attribute too soon, so use single quotes for font names inside a double-quoted attribute.

Go deeper

Contrast is where color choices go wrong most often. Pale gray text on white looks elegant in a design tool and can't be read on a phone in sunlight. Free contrast checkers, the color picker in Chrome and Firefox DevTools among them, show the exact ratio and whether it passes WCAG level AA (success criterion 1.4.3, Contrast Minimum (opens in a new tab)). And color should never be the only way you show information, because many people can't tell certain colors apart.

For fonts, a popular modern choice is the system font stack. font-family: system-ui, sans-serif; uses the operating system's own interface font, so it looks native and needs no download. Web fonts bring more personality and cost loading time. Stick to one or two families and a few weights.

You will also see newer color syntax. rgb(42 111 78 / 50%) uses spaces in place of commas and a slash for transparency. hsl(150 45% 30%) describes hue, saturation and lightness, which makes lighter and darker shades of one color easy to create.

Pick your few brand colors once and reuse them everywhere. A page with three consistent colors looks more professional than one with twelve.

Frequently asked questions

How do I change the font in HTML?

Use the CSS font-family property, usually on body so the whole page inherits it: body { font-family: Georgia, serif; }. List one or more fonts in order of preference and end with a generic family. If a visitor lacks a font, you can load it as a web font, from Google Fonts or from your own files with @font-face, which the W3C CSS Fonts (opens in a new tab) spec defines.

What is a hex color code?

It is a color written as # plus six hexadecimal digits (0-9 and a-f): two each for red, green and blue, from 00 (none) to ff (full). So #ff0000 is pure red, #000000 is black and #ffffff is white. If each pair repeats a digit, you can shorten it: #336699 becomes #369. An optional fourth pair sets transparency.

Should I use px or rem for font size?

Use rem for most text. px is a fixed size. rem is relative to the root font size, 16px by default, and it follows the reader's browser setting. If someone sets a bigger default font because they need it, rem sizes grow along with it and px sizes stay put. As a guide, 1rem is about 16px and 1.5rem about 24px.

Tags in this lesson

<style>Puts CSS rules straight into the page.