Style Guidelines

Third Level Heading

Websites require a strong visual style, one which is flexible enough to cater for the demands of every possible situation. When this style is combined with a certain amount of control upon the user the experience of the reader and the user will be significantly better. This page acts as an example of its own intent.

As above any long content must begin with a top level heading (H1) followed by a third level heading (H3) to act as a sub-heading. The first paragraph must be preceded by a one pixel, dotted, horizontal rule.

a second level heading

All text must have a sensible typographic measure of around 65 characters per line at full desktop size. In order to maintain a good sense of vertical spacing (as well as horizontal) multiples of the line-height (2.0) must be used sparingly to create sensible separation and add to the visual flow of the document.

Generally text is set ragged left, but can also be used in moderation set centre aligned. It’s recommended that no more than 3 paragraphs of text be set in centre alignment.

  • A list item.
  • Another list item.
  • Yet another list item.
  1. An ordered list item.
  2. Another ordered list item.
  3. Yet another ordered list item.

The bullets and numbers of all lists must be set into the ‘margin’ of the page.

fonts

This site uses Platin Infant Regular and Plantin Infant Italic for text, as well as Avenir Next Medium, Avenir Next Bold, and Avenir Next Medium SC for headings and smaller text.

colour

There are three primary colours, “black”, “white”, and “teal”. Generally “white” is a background colour and “black” is the foreground but this can be inverted if necessary. This leaves “teal” to mark a visual highlight or point of interest.

There are two secondary colours, “grey”, and “light-grey”. Both act to defer attention from elements of lesser importance.

images

Images can appear in two different arrangements. Mostly as full-width extending beyond the line-length, they can also be used square and side-by-side.

Below: Figure captions can appear above or below the figure itself. Image source: placeimg.com

Alt Text

The final paragraph of the content must be followed by a one pixel, solid, horizontal rule.