Appropriate typography must be used in combination with the University's house style. Typography must not be changed using inline CSS.

Options available

• Headings
• Headings with secondary text
• Headings with a dividing line
• Body text
• Links
• Abbreviated text
• Paragraph lead
• Description list
• Font size override classes

Headings

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.

Use 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.

• There must be only one h1 element on a page which should be used for the page title..
• You may use as many h2 elements as required to denote new sections on a page.
• You may use as many h3 to h4 elements as required to denote sub-sections of content on a page.
• You must not use h5 or h6 elements.

Headings with secondary text

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.

Headings with a dividing line

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.

• Please discuss your design requirements with the Digital Communications team before using this option.

Body text

• The p tag defines a paragraph.

Bold and strong

• The class .font-weight--bold element defines bold text, without any extra importance.
• The HTML strong element adds greater semantic importance to text which appears as bold.
• Try to keep items in bold and strong as short as possible and do not write entire sentences or paragraphs in a bold or strong typeface.
• Bold and strong text should not be used as a substitute for headings.

Italics and emphasis

• The HTML em element defines emphasised text, with added semantic importance which is displayed in italics.
• For accessibility reasons, avoid the excessive use of italics and emphasis on the web.

Links

The default styling of a link is bold-weighted blue text with an underline.

Focus states

A contrasting yellow background is applied to text links when they receive focus. This is to improve usability for users navigating by keyboard. Further information on focus states can be found in our blog post - Keyboard accessibility improvements to the University website.

Reset link style

In situations where external content is included where it has its own branding, it may be necessary to prevent links inheriting the default style. The .reset--link-style class can be applied either to a link element directly or to a parent element to achieve this.

Abbreviated 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.

abbr tags are redundant on mobile browsers, so you should write out abbreviations and acronyms in full, for example World Health Organisation (WHO).

Paragraph lead

The introductory paragraph of a page often summarises what follows. Using a larger font size for this paragraph helps draw attention to it and its importance against other content on the page.

Description list

Used to list terms along with their associated description. You may also wish to consider the paired values list pattern.

The dl tag defines a description list, the dt tag defines a term and the dd tag defines the term's associated description.

Font size override classes

These headings use a typographic scale to ensure consistent sizing across different display sizes.