01 | STYLE FOR READING

A page can contain excellent information and still be tiring to read. Small text, cramped lines and faint colours make the reader work harder. CSS lets you improve those choices consistently.

Typography is the presentation of written text. Start with readable body text, then create a clear visual hierarchy for headings, captions and other supporting content.

Keep semantic headings and meaningful HTML. Making a paragraph larger does not give it heading semantics, and making text bold does not necessarily express strong importance.

02 | TEXT COLOUR AND BACKGROUND COLOUR

body {
  color: #24363a;
  background-color: #ffffff;
}
.notice {
  color: #24363a;
  background-color: #eaf7f5;
}

color sets the foreground text colour. background-color sets the background behind an element. Consider the pair together: a nice colour on its own may be difficult to read against another colour.

Colour can reinforce meaning, but must not carry all the information. Pair an error colour with explanatory text. Keep links recognisable rather than relying only on a subtle colour difference.

03 | DIFFERENT WAYS TO WRITE COLOURS

/* Named colour */
color: navy;

/* Six-digit hexadecimal: red, green, blue */
color: #24988f;

/* RGB channels */
color: rgb(36, 152, 143);

/* RGB with transparency */
background-color: rgb(36 152 143 / 15%);

In six-digit hexadecimal, the first pair gives red, the second green and the third blue. Each channel runs from 00 to FF. #24988f and rgb(36, 152, 143) describe the same colour.

Alpha controls opacity: 0% is transparent and 100% is opaque. A transparent background blends with what is behind it, so the final appearance depends on the surrounding page.

Set an alpha value on a background colour when only the background should be translucent. opacity on a whole element also affects its content, including text.

04 | USE A FONT STACK

body {
  font-family: Arial, Helvetica, sans-serif;
}
code {
  font-family: Consolas, "Courier New", monospace;
}

A font stack lists alternatives in preference order. The browser tries an available font and uses the later options when needed. End with a generic family such as sans-serif, serif or monospace.

Quote a family name containing spaces. A monospace font gives characters equal widths, which can make code examples easier to scan.

A font named in CSS is not automatically downloaded. Custom web fonts need to be supplied or loaded separately, with appropriate permission. A sensible system font stack is a good starting point.

05 | FONT SIZE AND RELATIVE UNITS

body {
  font-size: 1rem;
}
h1 {
  font-size: 2rem;
}
.caption {
  font-size: 0.9rem;
}

rem is relative to the root element’s font size. If that size is 16 CSS pixels, 2rem computes to 32 CSS pixels. The root size can differ, so do not assume rem always equals 16 pixels.

em, when used for font-size, is relative to the inherited font size, normally from the parent. Nested em font sizes can compound. For other properties, em usually refers to the current element’s font size.

px is a CSS reference unit, not necessarily one physical screen pixel. Text sized in px can still be enlarged by browser zoom. Relative units often make a consistent, adaptable scale easier to maintain.

Avoid tiny text and do not prevent user zoom. Check that content remains readable when enlarged.

06 | WEIGHT, STYLE AND MEANING

h1, h2 {
  font-weight: 700;
}
.note {
  font-style: italic;
}

font-weight controls weight, such as normal, bold or a numeric value. Common values include 400 for normal and 700 for bold. The exact appearance depends on the font and the weights available.

font-style controls styles such as normal or italic. Use emphasis carefully; long passages in italics or capitals can be harder to read.

Use strong and em when the content carries importance or stress emphasis. CSS can style them, but a visual style alone does not create that meaning.

07 | LINE HEIGHT, ALIGNMENT AND LINE LENGTH

body {
  line-height: 1.6;
}
.reading-text {
  max-width: 65ch;
  text-align: start;
}
.page-title {
  text-align: center;
}

line-height controls line-box height. A unitless value such as 1.6 scales with the text’s font size and is usually convenient for inherited body styles.

text-align: start aligns text to the start edge for its writing direction. Centered headings can work well, while long body paragraphs are often easier to follow with a consistent start edge. Full justification may introduce distracting gaps.

max-width: 65ch caps a reading area using a unit based on the width of the font’s 0 character. It does not guarantee exactly 65 characters on every line. Choose a comfortable measure and check it with the actual font and content.

08 | LINKS, CAPITALS AND CONTRAST

a {
  text-decoration: underline;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

text-decoration controls effects such as underlines. Preserve an obvious indication that a link is interactive, and keep visible keyboard focus.

text-transform changes displayed casing without rewriting the original HTML text. Uppercase can suit short section labels, but usually not long paragraphs. Small letter-spacing adjustments can help short labels; excessive spacing makes words harder to read.

Check text and background with a contrast checker. For ordinary text, the WCAG AA minimum contrast ratio is 4.5:1; the threshold for qualifying large text is 3:1. Do not assume that a brand accent is suitable for small text on white.

Contrast is one part of readability. Also review font size, spacing, zoom behaviour and text alternatives.

09 | TRY IT: COMPARE READABLE TEXT

Change the controls and inspect the preview. The lesson’s own styling stays unchanged. The controls use dark text on pale backgrounds so you can focus on typography.

10 | BUILD A SMALL TYPOGRAPHY SYSTEM

Choose one main body font, a few consistent sizes and a restrained colour palette. Reuse those decisions through your stylesheet rather than improvising a different style on every page.

1. Set readable body text and a unitless line height.
2. Give headings a clear size hierarchy.
3. Use subtle supporting styles for captions and short labels.
4. Keep links and focus indicators recognisable.
5. Check colour contrast, a narrow screen and enlarged text.

For existing projects, inherit their shared styles where possible. A lesson or content page should feel like part of the same website.