Lesson 3 of 8

Colors, fonts and units

Colors and fonts do more for the feel of a website than anything else. In this lesson you'll learn the different ways to write colors, how to choose and load fonts and which units to use for sizes.

Writing colors

You've already used named colors like tomato and teal. They're handy for testing, but real designs usually need exact shades. There are a few common ways to write them:

css

.example {
  color: tomato;              /* a named color */
  color: #ff6347;             /* hex */
  color: rgb(255 99 71);      /* red, green and blue */
  color: hsl(9 100% 64%);     /* hue, saturation and lightness */
}

All four of those are the exact same color.

Hex codes start with # and are the most common format you'll find in design tools. Copy and paste them, you're not expected to read them.
rgb mixes red, green and blue light, each from 0 to 255.
hsl is the easiest to tweak by hand. The first number is the hue (0 is red, 120 is green, 240 is blue), then how colorful it is, then how light. Want a darker version of a color? Just lower the last number.

The main properties are color for text and background-color for backgrounds.

Quick check

You have hsl(220 80% 50%) and want a lighter version of the same blue. What do you change?

Select one answer

Contrast matters

Light gray text on a white background might look stylish, but it's hard to read for a lot of people, especially in sunlight or on a cheap screen. Always make sure your text stands out clearly from its background.

You don't have to guess. The Lighthouse audit you ran in the HTML course flags low contrast, and in Chrome's developer tools you can click on any color value to see its contrast ratio with a checkmark when it's good enough.

Reusing colors with variables

Once you've picked a few colors, you'll use them over and over. Instead of repeating the same hex code everywhere, you can store it in a custom property, also known as a CSS variable:

css

:root {
  --color-primary: #2a6f97;
  --color-text: #222222;
  --color-background: #fdfbf7;
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
}

a {
  color: var(--color-primary);
}

Variables are defined with two dashes and used with var(). :root means the whole page, so the variables are available everywhere. Now, if you want to change your main color, you change it in one place.

Fonts

The font-family property sets the font. You always give a list, so the browser has something to fall back on if the first font isn't available:

css

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

The last item should always be a general family: sans-serif (clean, no little feet on the letters), serif (with little feet, like a newspaper) or monospace (every letter the same width, like code).

To use a font that people might not have installed, you can load one from Google Fonts (fonts.google.com). Pick a font, and Google gives you a link element to put in your head and the font-family line to put in your CSS. It's free, and there are hundreds to choose from.

A tip from designers: use at most two fonts on a site. Often one for headings and one for the rest is plenty.

Other useful text properties:

css

body {
  font-size: 1.125rem;
  line-height: 1.6;
}

h1 {
  font-weight: 700;
}

line-height controls the space between lines. Around 1.5 to 1.7 makes longer text much easier to read. font-weight goes from 100 (thin) to 900 (heavy), where 400 is normal and 700 is bold.

Quick check

Why do you list several fonts in font-family?

Select one answer

Units: px, rem and percent

CSS has a lot of units, but three cover almost everything you'll do:

px (pixels) is a fixed size. 16px is always 16 pixels. Good for small details like a border.
rem is relative to the browser's base font size, which is usually 16 pixels. So 1rem is usually 16px and 2rem is 32px.
% (percent) is relative to the parent element. width: 50% takes up half of whatever it's inside.

Here's why rem is the best choice for font sizes: some people set a larger default text size in their browser because it's easier for them to read. Sizes in rem grow along with that setting. Sizes in px ignore it. Using rem respects their choice for free.

Quick check

Which unit lets text grow when someone increases the default font size in their browser?

Select one answer

Try it yourself

Give your website a color scheme and some nice typography:

Pick three colors you like for text, background and links. Sites like coolors.co can help you find colors that work well together
Store them as variables in :root and use them with var()
Pick a font from Google Fonts, add its link to your head and use it for the body
Set the body text to 1.125rem with a line-height around 1.6
Run a Lighthouse audit and check that your contrast passes

Take your time with this one. Small changes to colors and fonts make a big difference to how your page feels.