Typography is the foundation of any design project we work on. In fact, we begin every project by first establishing the governing rules of type ensuring maximum readability comfort across all screen resolutions.

This is accomplished by taking into account everything from vertical rhythm, to comfortable reading measures, to scalable typography and incremental leading. All font sizes are set in relative em measurements which allows for the proportional scaling of font sizes based on the end user’s browser settings. This page represents base styles and rules for type and should be considered a work in progress. You can always let us know where these styles can be improved for by dropping us a line @press75 on Twitter.

Top Level Header

Above is an example of a top level header element, or the h1 tag. All page titles have been set in this tag. Consider using the Second Level Header tag, h2, for any important page level headings.

Second Level Header

As mentioned above, the Second Level Header is best used for important page level headings. Though there is no hard and fast rule regarding the amount of h1 tags allowed on a page, I tend to always only use one and rely on h2 for critical page headings.

Third Level Header

The Third Level Header may be used for any form of page level headings which falls below the h2 header in a document hierarchy.

Fourth Level Header

The Fourth Level Header may be used for any form of page level headings which falls below the h3 header in a document hierarchy.

Fifth Level Header

The Fifth Level Header may be used for any form of page level headings which falls below the h4 header in a document hierarchy.

Sixth Level Header

The Sixth Level Header may be used for any form of page level headings which falls below the h5 header in a document hierarchy.

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 the article.

Block Quotes

Block quotes are section of content quoted from an external source or quotes pulled from 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.” — Ray Eames

Inline Quotes

The q tag is used for short quotations inline within a paragraph. Here is an example of nested quotations.

He said, 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.

1. This is the first item in an ordered list.
2. This is the second item in an ordered list with a sub-ordered list.
   1. This is an ordered list item.
   2. This is an ordered list item
   3. This is an ordered list item
3. This is the third item in an ordered list.
4. 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.
  1. This is an ordered list item.
  2. This is an ordered list item
  3. 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.

word-press [wərd–pres]

An open source CMS, often used as a blog publishing application powered by PHP and MySQL

Links

Links are commonly used to link one page to another, either internally or externally; and are wrapped by the a tag.

Buttons

Buttons can be added by using the button shortcode or adding a class of btn to an element, usually and anchor tag. By default the button is dark; however, you can add a btn-trans class to the element to make the button light.

Primary Button

Alt Button

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 blog will make you a better person.

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:

Subscribe to this blog’s RSS Feed now or you will be sorry.

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 © 2013 Press75. All Rights Reserved.

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:

Press75 is located in Monticello, IA Seattle, WA.

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 The 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 H₂O.

The sup tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like WWW^[1].

Images and Captions

Images

The img tag defines an image in an HTML page and has two required attributes: src and alt. Images are not technically inserted into an HTML page. Rather images are linked to HTML pages. The img tag creates a holding space for the referenced image.

Left Aligned Image

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Right Aligned Image

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Center Aligned Image

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Image With Caption

This caption is set by editing the caption box whilst inserting the image.

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!

Two Columns

Three Columns

Four Columns