Typography

Appropriate typography should be used in combination with the house style.

Options available

Headings
Body text
Abbreviated text
Paragraph lead
Blockquote - left alignment
Blockquote - right alignment

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 so that it makes sense.

Keep the implementation consistent across the entire site to maximise usability.

Do not skip headings in the structure e.g. 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 emphasized 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 deafult in desktop browsers the abbr tag provides a tooltip mouseover.

Please note, abbr tags are redundent on mobile browsers. In which case it is recommended to write it out abbreviations and acronyms in full, e.g. 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 quotation of relevant context to 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