Type Style Guide
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
Page Leads
The introductory paragraph of a page is the lead: it may use the .lead style to differentiate from the main body of text. This paragraph is styled as a lead, which may contain a link.
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).
- This is an ordered list, which may contain a link.
- This is the second item, which contains a sub list
- This is the sub list, which is also ordered, and which may contain a link.
- It has two items.
- 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.
- 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.
- 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.
FAQs: not using the blocks system
FAQ styled as content accordion
-
Answer here.
-
Answer here.