Style Guide

Typography

Fonts

All headings and body copy on the MGSE web site use Linotype Univers for the typeface, according to the MGSE Identity Guide.

UNIVERS® W01 45 LIGHT - I am the default font, I have a normal weight (400)

UNIVERS® W01 65 BOLD - I am used for bold text and some headings, I have weight 700

Headings

Web content should be structured using headings.

Headings label each part of a page and indicate the relative importance of those parts, making the page easier to scan and read. They also help search engines to figure out what your page is about.

There are six levels of website heading – h1 to h6.

Heading 1 - h1

The page title will automatically display at the top of the page as an h1 heading. Only one h1 should be used on each page, so any subsequent headings you use should be h2-h6.

Heading 2 - h2

Heading 3 - h3

Heading 4 - h4

Heading 5 - h5
Heading 6 - h6

Headings should be hierarchical. If you wanted to create a subheading directly underneath an h2 heading you would use an h3, and so on.

The styles used for headings, including font size, colour and spacing, are set in the central website design. Do not attempt to adjust heading styles when creating or editing a page.

Paragraphs

Standard paragraph

This is a paragraph. All text should be placed within a paragraph tag.

Paragraphs have a maximum width equal to a 5/8ths column to ensure readability is maintained on full width pages.

Intro paragraph

Most pages utilise an introduction paragraph with slightly larger text. This grabs the users interest and summarises the purpose and key topic of the page.

Introduction paragraphs should be 30-50 words, with a maximum length of 70 words. They are optional and not required on every page, however are recommended for most.

Example:

We are at the cutting edge of teaching and research and have been ranked number two in the world in the discipline of education in the QS World Rankings by Subject in 2014.

Inline tags that can be used within a paragraph

Links

Link text should be descriptive, and in most cases should be the same as the title of the page or document that the link is going to. This makes the page easier to scan and interact with for visitors and search engines.

For example, a link to a news page should not be formatted as:

But could be formatted as:

If a link is a downloadable file (for example a PDF or Word document), the file type and size should be placed next to the link in the following format:

Links within text are styled like Unvisted and Visted links look the same.

Other

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The em element example

The del element example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The u element example

The var element example

How to in squiz

The most commonly used inline tags are available through the WYSIWYG format bar, else use HTML editing options.


Lists

Ordered list

  1. list item 1
  2. list item 1
    1. list item 2
      • Un-ordered list
      • Can go in here also
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Un-ordered list

  • list item 1
  • list item 1
    • list item 2
      1. Ordered list
      2. Can go in here also
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

Definition list

Description name
Description value
Description name
Description value
Description name
Description value

Ordered list class = outline

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Block quote (pull quote)

A block quote can be used to indicate that text is being quoted from another source (e.g. a person or publication).

We are at the cutting edge of teaching and research and have been ranked number two in the world in the discipline of education in the QS World Rankings by Subject in 2014.

With citation

The clinical model that the Master of Teaching (Early Childhood) uses and the interwoven nature of the practice and theory really attracted me. This course has given me the skills to involve children in critical reflection of the learning program. I have confidence in myself and my own abilities, and I am looking forward to gaining employment, knowing I am very prepared to teach.

Kate Hardinge, Master of Teaching (Early Childhood)

Horizontal rule