Text styles

Fonts

Public Sans is the font used on ANU websites – for body text, menus, banners and more. The fall-back font is sans-serif.

Alignment

ANU style is for left-aligned text unless there is a compelling reason to use another alignment. Using left-aligned text will also ensure all content can easily be read by all users. Classes for alternative alignments are described under alignment & width. Note that justified text is not used within ANU style as it can be very difficult to read on a screen.

Colours

Text is black by default, but the headings are allowing to have different colours based on the colour combinations allowed.

Size & case

The default text size is set in the global stylesheets via the body, paragraph and heading styles. The default sizes should not change.

Small text

If smaller paragraph text is required (for disclaimers, notes and similar text), the class small can be used. Note that this is not the same as the class readmore which is designed for small links.

For example, this paragraph is <p class="small">

Semi large text

If semi large text is required for landing pages to highlight some sections where there is more content, the class semi-large can be used.

For example, this paragraph is <p class="semi-large">

Large text

If larger text is required and the text should not be a heading (eg introductory paragraphs and some homepage text), the class large can be used. Links within a large paragraph will appear with an underline, unless the paragraph is <strong> in which case the underline only appears on hover.

For example, this paragraph is <p class="large"> with a regular link and a link within strong

Uppercase

Uppercase text is generally not recommended as it can be read as shouting online, can be harder to read, and may be read letter-by-letter by screen readers. If you need to use uppercase text, you can use the uppercase class.

Example of uppercase

Captions

Caption style is available for tables via the <caption> element or for other elements via class="caption"

Example: This paragraph is in caption style.

Visibility

Headings and other text can be hidden from the display (but remain visible to screen readers) using the scrnhide class.

Additional text styles

Other text elements

The table below is not exhaustive - it illustrates some of the more common text formatting elements. You should refer to a HTML guide for completeness.

DO NOT use underline to emphasise text. Underlining should be reserved for hyperlinks.

Element Use Example
<em> To emphasise text, usually appears as italics <em>This text appears italicised</em>
<strong> To highlight text, usually appears as bold <strong>This text appears bold</strong>
<code> to highlight blocks of code within text <code><div class="normal"></code>
<cite> To indicate a citation, such as the name of a book or periodical <cite>This is a citation</cite>
<pre> To present pre-formatted text. Whitespace is honoured and the font is usually non-proportional. <pre>
This text is preformatted. 
Spaces are honoured.
- - --- --- --- -- - -
</pre>
<blockquote> To indicate a large block of quoted material. While a blockquote usually appears indented, the blockquote tag should not be used just to provide indentation. <blockquote>
This is a large block of quoted text from a magazine that needs to be referenced properly.
</blockquote>
<sub> To indicate subtext - text that appears slightly below the line

To understand tectonic evolution, we need to know when events occur, and how fast they take place. H2O.

<sup> To indicate supertext - text that appears slightly above the line The 40Ar/39Ar system allows both geochronology and geospeedometry, and direct dating of fabrics...

Updated:  7 June 2021/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle