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 |
|
|
with source |
|
|
with graphic |
format_quote
|
Lists
| Type | Example |
|---|---|
|
unordered |
|
|
ordered (use "type" to define item marker) |
|
|
unstyled (affects only the current tier) |
|