Typography

Use of appropriate typography should be used in combination with the house style.

• Headers
• Body text
• Abbreviated text
• Paragraph lead
• Blockquotes - left aligned
• Blockquotes - right aligned

Headers

It is important to think about the structure of content on a page before choosing the appropriate heading. It is not about choosing the one that looks right, rather to think about where does the heading fit 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 should be one h1 element on a page. This is the top-level heading e.g. University of St Andrews.
• As many as required h2 elements to denote sections on the page.
• As many as required h3 to h4 elements to denote sub-sections of content on a page.

Heading 1
Heading 2
Heading 3
Heading 4

Body text

• The p tag defines a paragraph.
• Use bold (strong) to draw attention to words or phrases.
• Try to keep items in bold as short as possible and refrain from writing entire sentences or paragraphs in a bold typeface.
• Bold text should not be used as a substitue for headings.
• Use italics (em) for non-English words that are not in regular use.
• For accessibility reasons, avoid the excessive use of italics on the web.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.

Abbreviated text

The abbr tag is used to define an abbreviation or an ancronym. This can give useful information to browser, translation systems and search engines.

The WHO was founded in 1948.

Paragraph lead

Paragraph lead fields are to be used to provide an introduction at the top of subject and course pages.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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

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