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

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.

Headings

Below are the basic h1 - h6 headings.

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

Strong

Emphasis

Underline

Links

Subscript

Superscript