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

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

Heading 1

Heading 2

Heading 3

Heading 4

Code

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.

Example

Heading 2This is secondary text

Code

Heading 2This is secondary text


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

Heading of an article

Code

Heading of an article


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

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

Code

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


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.

Example
Code

This is a link.


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

Example

The WHO was founded in 1948.

Code

The WHO was founded in 1948.


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.

Example

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Code

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.


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.

Example
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
Sed maximus nulla
nec vehicula vestibulum.
Cras eget elit tincidunt
sollicitudin turpis quis, elementum felis.
Code
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 display sizes.

Example

font-scale-minus-1

font-scale-reset (1rem)

font-scale-0

font-scale-1

font-scale-2

font-scale-3

font-scale-4

font-scale-5

font-scale-6

Code

font-scale-minus-1

font-scale-reset (1rem)

font-scale-0

font-scale-1

font-scale-2

font-scale-3

font-scale-4

font-scale-5

font-scale-6