Typeface

ZoON theme makes use of the excellent typeface Source Sans Pro designed by Paul D. Hunt. It’s served Google Fonts in two weights Regular and Bold and italic style for Regular.

Headings

Headings are used to give your document structure, to create a hierarchy. A h2 follows a h1, h3 follows a h2 and so on. Don’t use headings for visual purposes.
The title on your page (like ‘Typography’ at the top of this page) is a h1, so in general you’ll will only use the headings 2–6 to format your text.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Unordered list

  • List item in an unordered list
  • Nested unordered list
  • List item in an unordered list
  • List item in an unordered list

Ordered list

  1. List item in an ordered list
  2. Nested ordered list
  3. Nested ordered list
  4. List item in an ordered list
  5. List item in an ordered list

Definition list

Definition term
Description in a definition list
Definition term
Description in a definition list
Description in a definition list
Definition term
Description in a definition list

Code block

body {
  background-color: #F8F8F8;
}

Note: To use a whitespace use a forward slash / immediately followed by a backslash \. This is a workaround untill a known bug is solved.

Horizontal rule


Inline text formatting

Emphasized text in italic
and important text in bold
Title of a work (book, film or painting)
A definition term
Superscript text 1
Subscript text 2
A short quotation
Hit Enter to activate
Don’t forget the marked example
Bits of code </div>

Text:
Emphasized text in *italic*
and important text in **bold**
<cite>Title</cite> of a work (book, film or painting)
A <dfn>definition</dfn> term
Superscript text <sup>1</sup>
Subscript text <sub>2</sub>
A short <q>quotation</q>
Hit <kbd>Enter</kbd> to activate
Don't forget the <mark>marked</mark> example
Bits of code `</div>`

Abbreviations

Example: The WCAG are published by the WAI of the W3C.

Text:
The WCAG are published by the WAI of the W3C.

*[WCAG]: Web Content Accessibility Guidelines
*[WAI]: Web Accessibility Initiative
*[W3C]: World Wide Web Consortium

Also have a look at the custom elements.

Share

Marco Koedam

Marco Koedam

I am a graphic designer, front-end webdeveloper and photographer. Fascinated with the synergy between style and content, message and presentation, form and function. Ever since I was a little boy in the early 70’s, designing the program for a school play – how time flies when you’re having fun.