Typography
Text is the main way users digest content and gather information from our sites, so it is important that the typography used creates a clear hierarchy and is legible.
Our site will be headed up by our brand font Futura for large headers and complemented by Karla, a Google font that is both modern and legible.
Headings
Heading structure is important not only to present a clear structure and hierarchy to a web page but also in consideration of those using text readers and improves SEO.
H1 regular
H1 lite
H1 small
H1 extra small
H2 regular
H2 regular underline
H2 lite
H2 small
H2 large
H2 large underline
H3 regular
H3 small
H4 regular
H4 large
H4 small
H5 regular
H6 regular
Paragraphs
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
This slightly emphasised lead paragraph should be used as a stand first for news items to summarise the content of the article.
This paragraph contains an inline link which, when clicked, navigates the user to another page.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Donec ullamcorper nulla non metus auctor fringilla.
Blockquotes
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
The block quote will always fit the container it sits in, and can be put inside a 'well'.
Even the best designers produce successful products only if their designs solve the right problems. A wonderful interface to the wrong features will fail.
Even the best designers produce successful products only if their designs solve the right problems. A wonderful interface to the wrong features will fail.
If there’s one thing you learn by working on a lot of different Web sites, it’s that almost any design idea–no matter how appallingly bad–can be made usable in the right circumstances, with enough effort.
Ultimately, users visit your website for its content. Everything else is just the backdrop.
Ultimately, users visit your website for its content. Everything else is just the backdrop.
Lists
A way to tidily display a sequencial list of items labeled by either bullet points or numbers. A numbered list would be used over a bullet point list if the order is to be emphasised.
- Bullet point list item 1
- Bullet point list item 2 with a link.
- Bullet point sub list item 1
- Bullet point sub list item 2 with a link.
- Bullet point sub list item 3
- Bullet point list item 3
- Numbered list item 1
- Numbered list item 2, with a link.
- Numbered sub list item 1
- Numbered sub list item 2, with a link.
- Numbered sub list item 3
- Numbered list item 3
Section heading
These are used to break a landing page up and will proceed a new component panel.
New section
A short intro to the section can be used if needed.