Headings
Capitalisation
Headings should use sentence case - only the first letter and any proper nouns should be capitalised.
Tags & hierarchy
To make pages easier to scan, and to improve the accessibility of your content, headings should be used and marked up with heading tags (<h1>, <h2>, etc). Headings tags should be applied in a hierarchy, and levels should not be skipped for appearance.
1 Title -
<h1>1.1 Section -
<h2>1.1.1 Subsection -
<h3>
1.2 Section -
<h2>
Current available heading tags:
| Heading tags | Font size | Font style | Letter spacing | Margin bottom |
|---|---|---|---|---|
| <h1> | 2.1em | normal | 0.01em | 10px |
| <h2> | 1.9em | normal | 0.01em | 10px |
| <h3> | 1.4em | normal | 0.01em | 10px |
| <h4> | 1.2em | normal | 0.01em | 10px |
| <h5> | 0.83em | normal | 0.01em | 10px |
| <h6> | 0.67em | normal | 0.01em | 10px |
Font colours
Please view the '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. |
Hiding headings
There might be times when a visible heading is not desirable, but you would still like to convey the structure of the page to people using assistive technologies such as screen readers. In this case, you can use the scrnhide class to hide the heading. For example, the following code will add an invisible heading to the page which will be read by screen readers:
<h2 class="scrnhide">Invisible heading</h2>
Linked headings
We've created a full set of default & approved customised linked heading styles, please view links section for all available styles. By default, the linked heading is followed by a '»', with an underline effect while on hover.
Example linked heading h3
<h3><a href="#">Example linked heading h3 </a></h3>
Page headers
Page header is a special heading style that can only be used once per page and is intended for elements such as the name of a school or unit (that does not appear in the banner), or for chapter headings and other 'sub-headings'.
The code should be placed directly above the first item on the page in the form of:
<div id="page-header">Text of header</div>
If your homepage contains a banner image or feature bar, the page header may be placed underneath - on the homepage only, not on subsequent pages. As with all other content area elements, the page-header div must be included within a grid class.
Links may be included within the page header - these will be formatted in the same style as plain text, with an underline on the hover action.
Use cases
This sentence is using h1 tag.
<h1>This sentence is using h1 tag.</h1>
This sentence is using h2 tag.
<h2>This sentence is using h2 tag.</h2>
This sentence is using h3 tag.
<h3>This sentence is using h3 tag.</h3>
This sentence is using h4 tag.
<h4>This sentence is using h4 tag.</h4>
This sentence is using h5 tag.
<h5>This sentence is using h5 tag.</h5>
This sentence is using h6 tag.
<h6>This sentence is using h6 tag.</h6>
For design purposes
Please view the 'Accessibility' section for a full set of approved colour combinations of font colours & background colours.
For SEO purposes
Search engine optimisation (SEO) is the process of ensuring that your website is properly indexed by search engines and consequently that it has the best chance of ranking well on relevant keywords. The goal is to have your site listed high in search results so that it is seen by more people, thus driving more traffic to your site.
In order to improve a webpage's SEO ranking, heading tags actually play an important role in this. By putting text into a heading tag, you're signalling that this text is important (think as keywords of the page), and search engines like Google will actually scan heading tags to determine the context of the page.
You should use heading tags consciously, each page should have only 1 <h1> tag, and each page should contain a range of <h1> to <h3> heading tags minimum.
In case where your design contains more than 1 <h1> headings (see example below):
Program and Orientation Week are both using h1 style, and you can use the following code to solve your problem:
<h2 class="h1">Orientation Week </h2>
This indicates: although Orientation Week is using the style of an h1 heading, it is actually an h2 heading.
More examples (but not limited to):
| HTML source code | Description | Output |
|---|---|---|
<h3 class="h2">Example heading </h3> | It is using the style of a h2 heading, it is actually a h3 heading. | Example heading |
<h2 class="h4">Example heading </h2> | It is using the style of a h4 heading, it is actually a h2 heading. | Example heading |
<h4 class="h3">Example heading </h4> | It is using the style of a h3 heading, it is actually a h4 heading. | Example heading |
Capitalisation
Headings should use sentence case - only the first letter and any proper nouns should be capitalised.
Tags & hierarchy
To make pages easier to scan and understand, and to improve the accessibility of your content, headings should be used and marked up with heading tags (<h1>, <h2>, etc). Headings tags should be applied in a hierarchy, and levels should not be skipped for appearance.
The title of the page should be heading level 1 <h1> - with each page containing only one level 1 heading, sections should be level 2 <h2>, and subsections should be level 3 <h3> and so on, as shown in the example.
1 Title -
<h1>1.1 Section -
<h2>1.2 Section -
<h2>1.2.1 Subsection -
<h3>
1.3 Section -
<h2>
Hiding headings
There might be times when a visible heading is not desirable, but you would still like to convey the structure of the page to people using assistive technologies such as screen readers. In this case, you can use the scrnhide class to hide the heading. For example, the following code will add an invisible heading to the page which will be read by screen readers:
<h2 class="scrnhide">Invisible heading</h2>
Linked headings
Linked headings should be formatted with the nounderline class and followed by a »:
Example linked heading »
<h3 class="nounderline"><a href="headings.html">Example linked heading »</a></h3>
Page header is a special heading style that can only be used once per page and is intended for elements such as the name of a school or unit (that does not appear in the banner), or for chapter headings and other 'sub-headings'.
The code should be placed directly above the first item on the page in the form of:
<div id="page-header">Text of header</div>
If your homepage contains a banner image or feature bar, the page header may be placed underneath - on the homepage only, not subsequent pages. As with all other content area elements, the page-header div must be included within a grid class.
Links may be included within the page header - these will be formatted in the same style as plain text, with an underline on the hover action.