Appropriate typography must be used in combination with the University's house style. Typography must not be changed using inline CSS.
It is important to think about the structure of content on a page before choosing the appropriate heading. It is not about choosing one that looks nice, rather think about where the heading fits into the overall content hierarchy.
Implement headings consistently across the entire site to maximise usability.
Do not skip headings in the structure, for example going from heading 2 to heading 4.
h1 element on a page.h2 elements as required to denote new sections on a page.h3 to h4 elements as required to denote sub-sections of content on a page.h5 or h6 elements.Heading 1
Heading 2
Heading 3
Heading 4
Where a heading would benefit from additional content, that adds context or supplementary information, this can be included by wrapping the text with <small> tags.
Heading 2This is secondary text
The default heading sizes can be overridden by using one of the following classes.
heading--large for large headings, this should only be used on landing pages and not within content that is less than 60% of the browser width.This is a large heading
Headings that are followed by content which is wider than the heading itself may benefit from a visual indicator that the heading is related to that content. In these situations adding keyline--bottom to the heading will add a full width dividing line.
Heading of an article
p tag defines a paragraph.b element defines bold text, without any extra importance.strong element defines strong text, with added semantic 'strong' importance.i element defines italic text, without any extra importance.em element defines emphasised text, with added semantic importance.The following snippet of text is a wrapped in paragraph tags and includes a hyperlink.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as strong text.
The following snippet of text is rendered as italicized text.
The following snippet of text is rendered as emphasised text.
The following snippet of text is a wrapped in paragraph tags and includes a hyperlink.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as strong text.
The following snippet of text is rendered as italicized text.
The following snippet of text is rendered as emphasised text.
The abbr tag is used to define an abbreviation or an acronym. This can give useful information to browser, translation systems, and search engines.
By default in desktop browsers the abbr tag provides a tooltip.
Please note, abbr tags are redundant on mobile browsers, so it is recommended to write out abbreviations and acronyms in full, for example World Health Organisation (WHO).
The WHO was founded in 1948.
The WHO was founded in 1948.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Used to list terms along with their associated description.
The dl tag is used to define a description list, the dt tag defines a term and the dd tag defines the term's associated description.
- Lorem ipsum
- Dolor sit amet, consectetur adipiscing elit.
- Sed maximus nulla
- nec vehicula vestibulum.
- Cras eget elit tincidunt
- sollicitudin turpis quis, elementum felis.
These headings use a typographic scale to ensure consistent sizing across different sizes of display.
Examplefont-scale-minus-1
font-scale-0
font-scale-1
font-scale-2
font-scale-3
font-scale-4
font-scale-5
font-scale-6
font-scale-minus-1
font-scale-0
font-scale-1
font-scale-2
font-scale-3
font-scale-4
font-scale-5
font-scale-6