The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Fonts

font sample

Custom fonts

ACU has three font families to support with its digital communication. Nexa is a san serif font with distinctive character. It conveys impact. It is a well-designed font and is used for our headings. Avenir conveys empathy and is to be used for body copy. Miller is a serif font, representing both tradition and modern characteristics. It is used as a secondary font to Avenir when 'breakout' copy is required as it stands out in contrast to Avenir as a sans serif font.

Avenir Book, Avenir Heavy
Nexa Heavy, Nexa Bold
Miller Text Bold, Miller Text Roman
Avenir samples
Avenir samples

These fonts require installation to the root of the ACU system in order to be viewable on that system user interface.

To install our custom fonts, please request an ACU custom fonts package from digital systems: Digital Requests.

System fonts

When these custom fonts are not available, either because they are not installed or fail to load, our fall-back system fonts are:

Arial for Nexa / Avenir (headings and default)
Georgia for Miller Text

A a

A a

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

Heading 1

Desktop

  • font-family: Nexa-Heavy, Arial (bold), sans-serif (bold)
  • color: $purple--100
  • font-size: 3rem
  • line-height: 3.1rem

Mobile

  • font-size: 2.5rem
  • line-height: 2.6rem
Heading 2

Desktop

  • font-size: 2.6rem
  • line-height: 2.7rem

Mobile

  • font-size: 2rem
  • line-height: 2.1rem
Heading 3

Desktop

  • Font-size: 2rem
  • Line-height: 2.1rem

Mobile

  • Font-size: 1.7rem
  • Line-height: 1.8em
Heading 4

Desktop

  • Font-size: 1.5rem
  • Line-height: 1.6rem

Mobile

  • Font-size: 1.3rem
  • Line-height: 1.4em
Heading 5

Desktop

  • Font-size: 1.3rem
  • Line-height: 1.4rem

Mobile

  • Font-size: 1.1rem
  • Line-height: 1.2rem
Heading 6

Desktop

  • Font-size: 1rem

Forthcoming...

Forthcoming...

Example

Australian Catholic University


Two way heading

A different perspective
A different world

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
  • Font: Avenir Book, Arial, sans-serif. Normal weight.
  • Font-size: 1rem.
  • Font colour: $charcoal--120 or $black--80.
  • Line-height: 1.4rem.

Forthcoming...

Forthcoming...


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
Desktop
  • Font: Miller Text Roman or Nexa Bold
  • Color: $purple--100
  • Font-size: 1.25rem
  • Line-height: 1.9rem
Mobile
  • Font-size: 1.2rem
  • Line-height: 1.8rem

Forthcoming...

Forthcoming...


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
Desktop
  • Font: Avenir Book, Arial, sans-serif. Normal weight.
  • Font-size: 0.7em.
  • Line-height: 1.2rem

Forthcoming...

Forthcoming...


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
Desktop
  • Font: Avenir Book, Arial, sans-serif. Font-weight:normal.
  • Font colour: $charcoal--120 or $black--80
Unordered list (nested)
  • First level: list style type 'disc'
  • Second level: list style type 'circle'
  • Third level: list style type '-'; colour: $black--80.
Ordered list (nested)
  • First level: list style type '1'
  • Second level: list style type 'i'
  • Third level: list style type '-'; colour: $black--80.

Forthcoming...

Forthcoming...


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
Desktop
  • Font: Miller Text Roman or Avenir Book, Arial, sans serif. Normal weight.
  • Font colour: $purple--100 or $charcoal--120
  • Font-size: 1.25rem
  • Line-height: 1.8rem
  • border left: 3px, $purple--40
  • padding-left: 1.6rem
Mobile properties
  • Font-size: 1rem.
  • Line-height: 1.6rem.

Forthcoming...

Forthcoming...

Example in action

Breakout paragraph ("I was mostly working...")

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
Desktop
  • Font: Avenir Heavy, Arial bold, sans serif bold.
  • Font-size: 1.5em.
  • Line-height: 2.3em.

Forthcoming...

Forthcoming...


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).