Heading level one

A lead paragraph sits under the title and says what the page is for in a sentence or two. It is a little larger than body text and reads as the introduction.

Heading level two

Body text is set for reading: a comfortable line length, generous line height and enough space between paragraphs that the page never feels like one block. This paragraph has strong emphasis, italic emphasis, a link to another section, highlighted text, small print and an WCAG abbreviation.

A second paragraph shows the space between blocks. Links are underlined and never rely on colour alone, and every heading keeps to the sequence, so a screen reader user can move through the page by heading level.

Heading level three

Third-level headings break a section into parts. Keep them short, and do not skip a level to get a different size.

Heading level four

Fourth-level headings are for detail inside a subsection.

Heading level five

Rarely needed. If a page uses this many levels, consider splitting it.

Heading level six

The smallest heading, kept for completeness.

Lists

An unordered list, for items where the order does not matter:

• Every page has one main heading.
• Lists can nest:
  • a second level, marked differently
  • and a third
    • which is as deep as anyone should go
• Items can be a full sentence or a short phrase.

An ordered list, for steps that must happen in sequence:

1. Sign in with your work account.
2. Open Settings from the account menu.
3. Choose a section and change what you need:
   1. Make the change.
   2. Save it, and wait for the confirmation message.

A description list, for terms and their meanings:

Token

A named design value, such as a colour or a spacing step, that components read instead of hard-coding it.

Shell

The page frame around the content: navigation, top bar and footer.

Quotes and callouts

Good typography is invisible. Bad typography is everywhere.

Code

Inline code such as --fo-accent sits in a line of text, and keyboard keys look like Ctrl + K. A block of code keeps its own formatting and scrolls sideways rather than breaking the page:

.fo-prose a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

Tables

Links and figures

Read the guide or the accessibility statement. An external link such as the WCAG 2.2 quick reference looks the same as any other; nothing here opens in a new window without saying so.