Colours, Fonts and Text

Introduction

Colour and type do most of the work in making a page feel designed. CSS gives you several ways to write the same colour, and a handful of properties that control text.

Colour formats

All of these make the same kind of red. Use whichever you find easiest.

• color sets the text colour. background-color sets the background.
• Add transparency with rgb(0 0 0 / 50%) or rgba(0, 0, 0, 0.5).

Fonts

• font-family is a list. The browser uses the first font it has, so end with a generic family such as serif or sans-serif.
• line-height: 1.6 means 1.6 times the font size. Values between 1.4 and 1.7 read well.

Aligning and decorating

• text-align: left, center, right.
• text-decoration: none or underline.
• text-transform: uppercase, lowercase, capitalize.
• letter-spacing adds space between letters.

Units

• px is a fixed pixel size.
• rem is relative to the page's base font size (usually 16px), so 1.5rem is 24px. It respects the reader's font settings, which makes it a good choice for text.
• % is relative to the parent.

Try it yourself

Style this card: give the heading a hsl colour, set the paragraph to 1.1rem with line-height 1.7, and centre everything.

Summary

• Colours: names, hex, rgb() and hsl().
• color is text, background-color is the background.
• font-family, font-size, font-weight and line-height shape text.
• Prefer rem for text sizes.