Typography

Documentation and examples for typography, including general rules, headings, body text, lists, and more.

General Rules

Wiley Online Library and related products can use a combination of Open Sans and Source Serif Pro, and all of their supported font weights and styles. Visit Google Fonts to view and acquire the font families.

Headings

Headings can be in either Open Sans or Source Serif Pro. They can be any colour that is within the styleguide, but be sure to not confuse the user by making headings look like links.

Heading Example
<h1></h1>

h1. Heading

<h2></h2>

h2. Heading

<h3></h3>

h3. Heading

<h4></h4>

h4. Heading

<h5></h5>
h5. Heading
<h6></h6>
h6. Heading

Customizing headings

Headings should only be customized out of necessity. To help with readability, convey extra information, or text hierarchy. 

Customization Example
Font Family

Source Serif Pro heading

Secondary Text

Big Important Heading with some explanation

Color

This is a good thing!

Background

Use background fills if there is an image behind and contrast must be retained

Paragraphs

Paragraphs should inherit the body text color of the website. It is recommened that only Open Sans be used for body text as there is some evidenece that suggests san-serif fonts are easier to read on screen than serif fonts.

Type Example
Normal

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Lead

Lead paragraphs can be used to give a brief introduction to a page or section.

Inline text elements

Styling for common inline HTML5 elements.

While not shown below, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Type Example
<a>
links

You can use the anchor tag to create link text. Links within paragraphs should always include an underline to differentiate from other body text and help with visually impared users.  Links with underlines are not always required for all links, sometimes context can be enough.

<mark>
highlight

You can use the mark tag to highlight text.

<del>
deleted

This line of text is meant to be treated as deleted text.

<s>
incorrect

This line of text is meant to be treated as no longer accurate.

<ins>
additional

This line of text is meant to be treated as an addition to the document.

<u>
underlined

This line of text will render as underlined

<small>
small

This line of text is meant to be treated as fine print.

<strong>
bold

This line rendered as bold text.

<em>
italicized

This line rendered as italicized text.

Abbreviations

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

Example Code

attr

<p><abbr>title="attribute">attr</abbr></p>

HTML

<p><abbr>title="HyperText Markup Language">HTML</abbr></p>

Blockquotes

For quoting blocks of content from another source within your document.

Type Example

normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

with source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous

with graphic

format_quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous

Lists

Type Example

unordered

  • Item 1
  • Item 2
    • Item 1
    • Item 2
    • Item 3
    • Item 4
  • Item 3
  • Item 4

ordered (use "type" to define item marker)

  1. Item 1
  2. Item 2
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
  3. Item 3
  4. Item 4

unstyled (affects only the current tier)

  • Item 1
  • Item 2
    • Item 1
    • Item 2
    • Item 3
    • Item 4
  • Item 3
  • Item 4