Text
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. 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, see below for available text colour classes that you can use. In order to pass web accessibility test, a few rules on font size and text colour need to be satisfied, see more on colour combinations .
For example, this paragraph is <h3 class="text-gold">.
*In order for gold to pass web accessibility test, the font size should be larger than 19px semibold or 24px regular, take consideration of small screen size (e.g. tablets and phones) as well.
For example, this paragraph is <h3 class="text-unigrey">
Text colour on black background is white by default, no additional class needed.
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... |
ANU Typeface - Public Sans
Our brand typeface is Public Sans - a Google web font that is free to use for anyone. It should be used consistently across all ANU websites. This typeface has been specifically crafted for accessibility, while also having the added benefit of high load speeds online.
Alignment
Text should be left-aligned unless there is a compelling reason to use another alignment style. Left-aligned texts ensure a high level of accessibility and readability to all users. Classes for alternative alignments are described under 'Alignment' section.
Please note: justified text should not be used on ANU websites as it can be very difficult to read on screens.
Font colours
By default, the font colour is set to black: #000000. We have several alternative font colours that are approved to use on ANU websites. See the sections below for corresponding class names. Please note, your colour combination of font colour and background colour should pass WCAG 2.1 accessibility check. You can use the image here as a quick reference guide, for a more comprehensive document, please visit 'Accessibility' section for all approved colour combinations.
Available classes
Size & Cases
The default font size is set in our global stylesheets, our default font size for text body <p> is 1em (16px). You should not use inline CSS styles to define the font size, you should use style classes from our global stylesheets.
| Class name | Font size | Output | Description |
|---|---|---|---|
.large | 1.25em | This text is using .large class. | This class can be used as introductory paragraphs or some homepage texts, but generally should not be used in conjunction with headings. |
.small | 0.85em | This text is using .small class. | This class can be used for disclaimers, notes and similar text, etc. |
.uppercase | 1em | This text is using .uppercase class. | This will turn texts into uppercases. Uppercase text is generally not recommended as it can be hard to read, and may be read as letter-by-letter by screen readers. |
.caption | 0.85em | This text is using .caption class. | Caption style is available for tables via the <caption> tag, but for other elements please use this class. |
Font colours
Please view 'Accessibility' section for all approved colour combinations.
| Class name | Colour | Output | Description |
|---|---|---|---|
.text-black | #000000 | This text is using .text-black class. | By default, our font colour is black on white and tinted background. |
.text-unigrey | #333333 | This text is using .text-unigrey class. | This class will change the font colour to #333333, it is suitable for white and tinted background. |
.text-gold | #be830e | This text is using .text-gold class. | In order for gold text on a white background to pass WCAG 2.1, the font size should be larger than 19px semibold or 24px regular, even under small screens like tablets and phones. |
.text-white | #ffffff | This text is using .text-white class. | By default, our font colour is white on black background. |
Other HTML text formatting elements
The table below is not exhaustive - it only shows some of the most common text formatting elements. You should refer to an HTML text formatting document for a more complete guide.
DO NOT use underline to emphasise text. Underlining should be reserved for hyperlinks.
| Tag name | Description | 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... |
See also:
Accessibility
Please view 'Accessibility' section for a full set of approved colour combinations.