Typography

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
• Other heading sizes
• Headings with a dividing line
• Body text
• Abbreviated text
• Paragraph lead
• Blockquote - left alignment
• Blockquote - right alignment
• Description list
• Font size override classes

Headings

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.

• There must be only one h1 element on a page.
• 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.

Heading 1
Heading 2
Heading 3
Heading 4

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.

Heading 2This is secondary text

Other heading sizes

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

Heading of an article

Body text

• The p tag defines a paragraph.

Bold and strong

• The HTML b element defines bold text, without any extra importance.
• The HTML strong element defines strong text, with added semantic 'strong' importance.
• Try to keep items in bold and strong as short as possible and refrain from writing 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 i element defines italic text, without any extra importance.
• The HTML em element defines emphasised text, with added semantic importance.
• For accessibility reasons, avoid the excessive use of italics and emphasis on the web.

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.

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.

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.

Paragraph lead

Due to the current styling, paragraph lead fields are only to be used as an introduction at the top of subject and course pages.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Blockquote - left alignment

• Blockquotes should be used when emphasising a relevant quotation in the body of text.
• For accessibility reasons, avoid the excessive use of blockquotes.

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    Someone famous in Source Title

Blockquote - right alignment

Right-aligned blockquotes are available as a flexible alternative for pages which wrap their text fields around additional content.

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    Someone famous in Source Title

Description list

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.

Font size override classes

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

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