Style Guide
Commonly Used Typography Tags
Paragraph
All paragraphs are wrapped with the p tag. This tag can also be wrapped by the blockquote tag if the text is a quote for an external source or a pull quote from an article.
Block Quotes
Block quotes are section of content quoted from an external source or quotes pulled from the article itself. The blockquote may contain a p tag. For example, we are quoting Ray Eames, from Quotes on Design, below.
What works good is better than what looks good, because what works good lasts.
Inline Quotes
The q tag is used for short quotations inline within a paragraph. Here is an example of nested quotations.
He said, The official Buzz Lightyear catch phrase is,
To infinity and beyond!
Ordered Lists
Ordered lists, or ol are used to list items in an hierarchical fashion. Each list item, or li, is preceded by a numerical representation of its place in the hierarchy. An ordered list can also contain another ordered list as well as an unordered list, or ul.
- This is the first item in an ordered list.
- This is the second item in an ordered list with a sub-ordered list.
- This is an ordered list item.
- This is an ordered list item
- This is an ordered list item
- This is the third item in an ordered list.
- This is the fourth item in an ordered list with a sub-unordered list.
- This is an unordered list item
- This is an unordered list item
- This is an unordered list item
Unordered Lists
Unordered lists, or ul are used to list items without any hierarchical value to them. Each list item may be preceded by a bullet or any non numerical representation. An unordered list can also contain an ordered list as well as another unordered list.
- This is the first item in an unordered list.
- This is the second item in an unordered list with a sub-ordered list.
- This is an ordered list item.
- This is an ordered list item
- This is an ordered list item
- This is the third item in an unordered list.
- This is the fourth item in an unordered list with a sub-unordered list.
- This is an unordered list item
- This is an unordered list item
- This is an unordered list item
Definition Lists
Definition lists, or dl are generally used to denote a list of items that share a relationship with one another. A dl should contain at least one dt and one dd.
- di·vis·i·ble [dih-viz-uh-buhl]
- capable of being evenly divided, without remainder.
Links
Links are commonly used to link one page to another, either internally or externally and are wrapped by the a tag.
Button Links
Buttons can be used stylistically to denote a call to action or any other interactive element within a web document.
Emphasized Text
Emphasized text is usually relegated to text you would pronounce differently in a conversation or text you are putting a stressed emphasis on and is wrapped inside of the em tag. For example:
Reading this page will help you understand how type is set site wide.
Strong Text
Strong text is usually relegated to text you are placing strong emphasis on and is wrapped inside of the strong tag. For example:
Rules for type should never be an afterthought.
Marked or highlighted text
The mark tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context. The mark tag was introduced in HTML 5. Internet Explorer 8 and older do not support this tag. For example:
Despite the stock market crash in 2008, the value of my share portfolio increased by 100 percent. I must be doing something right.
Small Print
The small element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as ‘small print’). It can also be used for attributions or satisfying licensing requirements. For example:
Copyright © 2014 Heavy Heavy. No big swig.
Delete & Insert
Markup of deleted text can be useful in determining differences between multiple versions of the same document. Browsers will normally strike a line through deleted text and underline inserted text. For example:
We Are Pixel8 is located in West Hollywood, CA San Antonio, TX.
Citation
The cite element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. For example:
I highly recommend reading Invisible Man by Ralph Ellison. It changed my life when I was 15 years old.
Abbreviations & Acronyms
The abbr element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Any text in the title attribute will appear when the user’s mouse hovers the abbreviation. The acronym tag has been dropped from the HTML 5 specs because of the confusion between these two tags. You should exclusively use abbr but both are styled for this theme. For example:
The abbreviation for the National Football League is NFL and the acronym for as soon as possible is ASAP.
Subscript & Superscript
The sub tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O.
The sup tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like this example[1].
Code & Code Blocks
The code tag is useful for websites who intend to share computer code snippets. When wrapped by the pre tag, a larger block of code can be displayed.
@media only screen and ( min-width: 43.75em ) and ( max-width: 48.938em ) {
article {
width: 69.1563%;
}
aside {
width: 26.6943%;
}
}
Tabular Data
The table tag is best used for presenting tabular data. This tag should always contain the thead, tfoot and tbody tags and should be marked up in that order. The table tag can also contain the caption tag for accessibility.
| Pixels | Ems | Percentages |
|---|---|---|
| Conversions provided by PXtoEM.com | ||
| 16px | 1em | 100% |
| 17px | 1.063em | 106.3% |
| 18px | 1.125em | 112.5% |
| 19px | 1.188em | 118.8% |