Typographic Style Guide (Heading One)

This is a style guide that gives examples of what all the different type of content will look like on your website. The majority of these styles are automatically assigned depending upon what you fomat a particular piece of text as. When editing using the Content Editor, simply highlight any text and select an opton from the 'format' box. Additional styles can often be applied using the 'Styles' box.

Paragraphs (Heading Two)

This is a paragraph of body text. It is the default style for most text used on the website. Each paragraph has a bottom margin, which means paragraphs are automatically spaced away from other elements. Make sure to create new lines within a paragraph by pressing SHIFT & ENTER to make something like this: Each section of body text has the following settings: size 1em (16px); line spacing 1.3; bottom margin 1em. The font used is 'Verdana'. There are two sub-styles available for this text. These are highlighted and emphasised. These can be used by assigning the paragraph as body text first and then as the desired character style. This is what a link looks like, hovered and active.

Headings (Heading Three)

Content can be separated into sections by using headings. There are six different levels of heading, numbered one to six. When using headings, always use heading one first. Sub-headings should then use heading two, and for sub-sub-headings use heading three and so on. Each heading can be used multiple times within a document as long as the order of depth remains consistent. Headings have a bottom margin. Each heading has a visual weight that should suggest it’s position within a document. The font for heading one is ‘Tangerine’, all other headings are ‘Georgia’.

Bulleted List (Heading Four)

  • Item A
  • Item B
    • Item B1
    • Item B2
  • Item C
Block Quote (Heading Five)

A block quote is a piece of text that is indented and emphasised. These are used to quote or provide emphasis on a certain passage. A block quote is designed to be used inline with the normal body text.

Meta Information (Heading Six)

Meta information is additional text that contains simple info about a particular section or element. These can take the form of comments, caption or references. They can be used in conjunction with headings or images to provide more information. The ‘Meta’ style should be applied to text formated like a paragraph.Meta information does not have top and bottom margins to allow it to nestle the item it is referencing.

 Button 1
 Button 2
 Button 3
 Item 1
 Item 2
 Item 3

Captcha Code

Click the image to see another captcha.