Typography Style Guide

The point of this guide is to help you, dear editor, to understand the full range of options you have available within your website through the rich text editor.

Headings

Headings help users to scan and read a page of text. They are numbered 1 through 4, and nest logically, much like an ountline.

First-level heading, optionally linked

First level headings are typically the page title itself. Most content on the page should fall under the first header. Consider starting with a second-level heading.

Second-level heading, optionally linked

The header above is an h2 element. More than one may be used per page. Consider using an h2 unless you need a header level of less importance, or as a sub-header to an existing h2 element.

Third-level heading, optionally linked

The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document’s hierarchy.

Fourth-level heading, optionally linked

The header above is an h4 element, which may be used for any form of page-level header which falls below the h3 header in a document hierarchy.

First-level heading, optionally linked

Second-level heading, optionally linked

Third-level heading, optionally linked

Fourth-level heading, optionally linked

Grouping content

Paragraphs

All paragraphs are wrapped in p tags. They may contain a link.

Horizontal rule

The hr element represents a paragraph-level break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

The above line is an example of a horizontal rule.

Blockquotes

A blockquote represents a section that is being quoted from another source.

This is an example of a blockquote style on your site. Note that blockquotes may contain more than one paragraph.

For example, this one. Which may contain a link..

Ordered list

The ol element denotes an ordered list. Each item requires a surrounding <li> and </li> tag, to denote individual items within the list (as you may have guessed, li stands for list item).

1. This is an ordered list, which may contain a link.
2. This is the second item, which contains a sub list
   1. This is the sub list, which is also ordered, and which may contain a link.
   2. It has two items.
   3. This third item is intentionally very long, so that we can see how word wrap will work. This third item is intentionally very long, so that we can see how word wrap will work.
3. This is the word wrapped primary list item. This is the word wrapped primary list item. This is the word wrapped primary list item. This is the word wrapped primary list item.
4. This is the final item on this list.

Unordered list

The ul element denotes an unordered list (ie. a list of loose items that don’t require numbering, or a bulleted list). Again, each item requires a surrounding <li> and </li> tag, to denote individual items. Here is an example list showing the constituent parts of the British Isles:

• United Kingdom of Great Britain and Northern Ireland:
  • England
  • Scotland, which may contain a link.
  • Wales
  • Northern Ireland
• Republic of Ireland
• Isle of Man, which may contain a link.
• Channel Islands:
  • Bailiwick of Guernsey
  • Bailiwick of Jersey

Sometimes we may want each list item to contain block elements, typically a paragraph or two:

• The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
• Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.
• The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km2.

Text-level Semantics

There are a number of inline elements you may use anywhere within other elements.

Links and anchors

The a element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example:

Go to the home page or return to the top of this page.

Italics, or stressed emphasis

The em element is used to denote text with stressed emphasis, or an academic reference to a text.

You simply must try the negitoro maki!

Bold, or strong importance

The strong element is used to denote text with strong importance.