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
Body text
Abbreviated text
Paragraph lead
Blockquote - left alignment
Blockquote - right alignment
Description list

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: the heading University of St Andrews; h1 must not be used anywhere else on the 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 2

Heading 3

Heading 4

Code

Heading 2
Heading 3
Heading 4

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.

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

Code

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.

Code

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

Code


    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

Code


    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.

Code


    Lorem ipsum
    Dolor sit amet, consectetur adipiscing elit.


    Sed maximus nulla
    nec vehicula vestibulum.


    Cras eget elit tincidunt
    sollicitudin turpis quis, elementum felis.