Text styles

Fonts

Arial is the font used on ANU websites – for body text, menus, banners and more.

Helvetica Neue is the font used for print publications. It can only be used on the web via images and is therefore not recommended. Instead use the web font Arial.

Alignment

ANU style is for left-aligned text unless there is a compelling reason to use other alignment. 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 charcoal-grey by default, but the full set of University and College colours can be applied using the relevant text classes.

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">

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, and can be harder to read. 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:  24 September 2013/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle