Colours and fonts

What you'll learn

How to write colours in a few formats and how to control the look of text.

Why it matters

Colour and typography do most of the work in making a page readable and pleasant. Readable contrast between text and background is also an accessibility need.

Explanation

Colours can be written as:

• a name: tomato, royalblue.
• a hex code: #ff6347 (red, green, blue in base 16).
• rgb: rgb(255, 99, 71).
• hsl: hsl(9, 100%, 64%) (hue, saturation, lightness), which is easiest to tweak by hand.

Use color for text and background-color for the background.

Text properties you will use constantly:

• font-family: the typeface, with fall-backs: font-family: Georgia, serif;
• font-size: 16px, or 1.25rem (relative to the root size).
• font-weight: 400 normal, 700 bold.
• line-height: space between lines, 1.6 is comfortable.
• text-align: left, center, right.

Example

Step-by-step walkthrough

1. body sets a serif font and comfortable line spacing. Children inherit these.
2. h1 uses an hsl colour (blue) and a size in rem.
3. .card has a pale background, near-black text, bold weight and centred alignment.
4. font-family lists a fall-back (serif) in case the first font is missing.

Try it yourself

Change the heading colour to #c2410c, then change the card's text-align to right.

Colours and fontsHTML / CSS

Editable code<style> h1 { color: hsl(220, 80%, 45%); font-size: 2.5rem; } .card { background-color: #f1f5f9; color: #0f172a; padding: 16px; text-align: center; } </style> <h1>Typography</h1> <p class="card">Readable text on a soft background.</p>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Using color for backgrounds. Use background-color.
• Forgetting the # in hex colours.
• Low contrast between text and background.
• Tiny line height. Cramped lines are tiring to read.

Quick quiz

Summary

• Colours: names, hex, rgb, hsl.
• color for text, background-color for backgrounds.
• Control type with font-family, font-size, font-weight, line-height.

Next: the box model, how every element takes up space.

<style>
  body {
    font-family: Georgia, serif;
    line-height: 1.6;
  }
  h1 {
    color: hsl(220, 80%, 45%);
    font-size: 2.5rem;
  }
  .card {
    background-color: #f1f5f9;
    color: #0f172a;
    padding: 16px;
    font-weight: 700;
    text-align: center;
  }
</style>

<h1>Typography</h1>
<p class="card">Readable text on a soft background.</p>