HTML & CSS · 14-day planAll days
Make text comfortable to read and colours that work together. Choose font stacks and web fonts, size text with rem and em, set line height and line length, write colours in hex, rgb and hsl, add background images and gradients, and keep a design consistent with CSS variables.
By the end of today you can
- Choose a font stack and know how web fonts are loaded
- Size text with rem and em, and explain why they beat px for text
- Set comfortable line height and line length
- Write colours in hex, rgb and hsl, with transparency
- Use background images, gradients and CSS custom properties (variables)
Most of a web page is text, so good typography is most of good design. Today you'll make text easy to read, use colour with confidence, and set up CSS variables to keep your design consistent.
Font stacks and web fonts
A font stack lists fallbacks: the browser uses the first font installed. Always end with a generic family.
Web fonts download a font with the page, so everyone sees the same one. With Google Fonts you add a <link> in the <head> and use the font's name:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
<style>
body { font-family: "Inter", system-ui, sans-serif; }
</style>(These lesson previews can't load outside files, so we stick to built-in fonts here.) Use one or two families at most; each one makes the page heavier.
Sizing text: px, rem and em
| Unit | Relative to | Use for |
|---|---|---|
px | Nothing (fixed) | Borders, shadows, small details |
rem | The root (html) font size | Font sizes, spacing |
em | The element's own font size | Padding that scales with its text |
% | The parent | Widths |
vw, vh | 1% of the window's width / height | Full-screen sections |
Readers can set a bigger default text size in their browser. rem respects it; px doesn't. So size text in rem.
Readable paragraphs
line-height: 1.5to1.7for body text, without a unit so it scales with the font.max-width: 60chto75chkeeps lines a readable length (ch≈ the width of one character).
Colour
| Format | Reads as |
|---|---|
#0f766e | Hex: red, green and blue as pairs of hex digits |
rgb(15 118 110) | Red, green, blue from 0 to 255 |
hsl(175 77% 26%) | Hue (0–360° on the colour wheel), saturation, lightness |
… / 0.5 | Opacity (alpha), from 0 to 1 |
HSL is the easiest to adjust by hand: keep the hue, change the lightness for lighter and darker shades of the same colour.
Contrast matters. Text needs enough contrast with its background to be readable for everyone (Day 13). Light grey on white looks elegant, and is hard to read.
Backgrounds and gradients
CSS variables
Custom properties store values you reuse, like your brand colours and spacing:
- Declare on
:root(thehtmlelement) so they're available everywhere:--brand: #0f766e;. - Use with
var(--brand). calc()does maths with mixed units:calc(100% - 2rem).
Variables make themes easy: dark mode can be just a different set of variable values.
Recap
- Font stacks with a generic fallback; at most one or two web fonts.
- Size text in
rem;line-heightabout 1.5; lines about 60–75ch wide. - Colours: hex,
rgb(),hsl(), with/ alphafor transparency; keep good contrast. background-image+background-size: cover, andlinear-gradient().- Variables:
--name: value;on:root, used withvar(--name).
Tomorrow: Flexbox, and real layouts begin.
Knowledge check
Test what you learned
5 questions · pick an answer to see if you're right
- 1
If the root font size is 16px, how big is 1.5rem?
- 2
Why size text in rem rather than px?
- 3
What line-height usually makes body text comfortable to read?
- 4
How do you declare and use a CSS variable for a brand colour?
- 5
What does the a in rgb(0 0 0 / 0.5) or hsl(200 60% 40% / 0.5) control?
Finished day 9?
Mark complete and continue to Day 10: FlexboxWas this lesson helpful?
Need a breather? Take a two-minute break