Typography

We use two custom web fonts. If they fail to load, fallback system fonts will be used instead.

Font family

Fraunces

Lorem ipsum dolor sit amet , appareat insolens quo cu. Ex mei fugit elitr, pri maiestatis elaboraret dissentias at. At quas sententiae constituam qui, ex fugit mediocrem persecuti duo. Odio impedit no his, legere quidam ne has, nam quando exerci eu. Vitae vivendo apeirian id vis.

Source Sans Pro

Headings

Below are the basic h1 - h6 headings. You can customise these headings by using specific title classes that we have provided. They can be found on the Titles page.

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Why headings are important

Headings give semantic and visual structure to web and print documents.
Sighted users scan for big, bold text in order to get an idea of the structure and content of web pages.
57% of screen reader users use headings to navigate the page, whereas only 8.5% read through the contents of page.
If headings are not included in the page, screen reader users are forced to listen to the entire contents of the page.

Guidelines for usage

Headings should be short and concise.
Headings should only be used when followed by content.
By reading the headings alone users should get a good idea of the page contents.
Headings should be mainly used for page specific content, rather than content which appears on every page.
Heading tags should not be used to change font size or add emphasis.
Appearance and presentation of text should be controlled via CSS rather than heading tags.
Heading levels can't be skipped i.e. you can't jump from h1 to h3.
The contents of the h1 tag is of moderate importance to search engines.
Keywords in h2 - h6 tags are of low importance to search engines, but are of key importance to screen reader users.

References

WCAG 2.0 Technique H42 - Using h1-h6 to identify headings

Paragraph

Example:

Strong

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Emphasis

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Underline

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Links

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Subscript

Example:

Lorem _ipsum dolor sit amet consectetur adipisicing elit.

Superscript

Example:

Lorem ^ipsum dolor sit amet consectetur adipisicing elit.