Headings

Headings are used to provide structure to content on a page so it is important to use them in hierarchical order.

Users scan pages by jumping from heading to heading down the page until they find a block of content that interests them enough to read. Search engines use headings to index the structure and content of a page.

Best practice

• Use headings in hierarchical order e.g. a h3 should appear within an h2, a h4 within a h3 etc.
  The page heading should be a h1 while section headings would normally start with h2s.
• Lead with keywords ('front-loading') to assist user scanning and search engine optimisation.
  The content of the page must match the keyword/s in the headings.
• Left align to also aid user scanning.
• Headings should all be written in sentence case. For example, 'Employ ACU students or graduates' and not 'Employ ACU Students or Graduates'.
• Use headings to introduce content and not within a block of content simply to make the text larger or bold - use <strong>, <b> or a style (class) instead.
• See Tone of voice for more information on writing style.

Font-size: when font-sizes are provided in rem, the assumption is the root HTML font-sise is set to 16px.

Usage

Heading 1

Heading 1 is used as the page heading and therefore is the highest heading in the page hierarchy other than the page title. (The latter appears on the browser tab and in search results). Normally, as an editor you should not apply a heading 1, start with Heading 2 instead, as the Heading 1 will be generated by the system's design templates. Also normally, we would only use the standard single line heading except for marketing (recruitment or campaign) orientated pages that may use the Two way heading.

Repeated use of Heading 1 within a page

Heading 1 may be used repeatedly when a page includes the following wrapping section tags (HTML5):

• <article> </article>
• <section> </section>
• <nav> </nav>
• <aside> </aside>

For example, on a page that lists news articles, each article may start with a Heading 1.

Heading 1 is also used to wrap the ACU logo.

Two way headings

The Two way heading supports our brand proposition most clearly. It is perhaps a signature UI element in terms of the ACU brand. However, it is difficult to use correctly so use it sparingly and with considerable thought.

A different perspective = A different world

See Tone of voice for more.

Heading 2

Use Heading 2 to introduce sections of content within the body copy (within the page heading) or within a component such as a highlight panel.

Other headings

Nest other headings within h2 headings in hierarchical order.

Definition

Our headings use the Nexa-Heavy font and if this is not available, Arial bold as the system backup font. The exception the second line of the Two way heading which uses Miller Text Bold or Georgia bold as the system backup font.

Code samples

Example

Body styles

Various styles are available to present body content ranging from basic elements like paragraphs, lists, to lead copy and subheadlines.

Best practice

• Use headings to break up long passages.
• Paragraphs should not be longer than 100 words online.
• Lead headings, paragraphs, sentences and links with keywords ('front-loading') to assist user scanning and search engine optimisation.
• Left align to also aid user scanning.
• Avoid using Italic as it is dificult to read online.
• See Tone of voice for more information on writing style.

Font-size: when font-sizes are provided in rem, the assumption is the root HTML font-sise is set to 16px.

Copy

Our body copy font, Avenir Book, is sharp and legible.

Usage

This is the default body copy or text style e.g.paragraphs, sentences and lists.

Definition

Code samples

Lead copy

Usage

Use the lead style on the first paragraph of a page. The lead style helps introduce the content of the page by making the lead paragraph large and bold compared to the standard copy style that usually follows it.

This is optional, however, on the ACU public site it is standard.

Definition

Code samples

Small text

Small text is copy that needs to presented in a smaller size than the standard copy.

Usage

Small text is used to present information of less importance, or when adding non-crucial information to cards such as date stamps. It is also used for the legal copy at the footer of the page.

Definition

Code samples

Lists - unordered and ordered

ACU has a specific style for the list item at each level of a nested list in both ordered and unordered lists.

Usage

Use lists to vertically present a series of related items on separate rows, so that it is easier for the user to quickly scan the items compared to trying to identify them within a paragraph.

To aid scannability lists should not contain more than five to seven items in the one list. If the list becomes longer than this, break it up into two lists either with separate headings or with a space between the two lists.

Definition

Code samples

Breakout paragraph and blockquote

Usage

The Breakout style may be used to highlight a paragraph or blockquote (a quote as one or more paragraphs) from other paragraphs on a page.

Definition

The Breakout style uses the following design properties to make a paragraph stand out: border on the left, a larger font size which is in the serif font of Miller (or Georgia) and the $purple--100 colour.

Breakout paragraph with $purple--100 coloured text

Breakout paragraph with $black--80 coloured text

Code samples

Example in action

Subheadlines

Usage

Subheadline style is used on cards as a subheading or as a label on forms. It may also be used to contrast copy from the body copy style.

Definition

Code samples

Standard linked text

Usage

This is the default style for links within a paragraph in the body copy.

Definition

Code samples

See also Links (CTA buttons and links).