{"id":82,"date":"2014-11-25T23:06:01","date_gmt":"2014-11-25T23:06:01","guid":{"rendered":"http:\/\/dev.press75.com\/tv-elements\/?page_id=82"},"modified":"2014-11-25T23:06:01","modified_gmt":"2014-11-25T23:06:01","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/co-dependencyfilm.com\/index.php\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"

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.<\/p>\n

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\u2019s 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<\/a> on Twitter.<\/p>\n

Top Level Header<\/h1>\n

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

Second Level Header<\/h2>\n

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<\/code> tags allowed on a page, I tend to always only use one and rely on h2<\/code> for critical page headings.<\/p>\n

Third Level Header<\/h3>\n

The Third Level Header may be used for any form of page level headings which falls below the h2<\/code> header in a document hierarchy.<\/p>\n

Fourth Level Header<\/h4>\n

The Fourth Level Header may be used for any form of page level headings which falls below the h3<\/code> header in a document hierarchy.<\/p>\n

Fifth Level Header<\/h5>\n

The Fifth Level Header may be used for any form of page level headings which falls below the h4<\/code> header in a document hierarchy.<\/p>\n

Sixth Level Header<\/h6>\n

The Sixth Level Header may be used for any form of page level headings which falls below the h5<\/code> header in a document hierarchy.<\/p>\n

<\/p>\n

Commonly Used Typography Tags<\/h2>\n
Paragraph<\/h6>\n

All paragraphs are wrapped with the p<\/code> tag. This tag can also be wrapped by the blockquote<\/code> tag if the text is a quote for an external source or a pull quote from the article.<\/p>\n

Block Quotes<\/h6>\n

Block quotes are section of content quoted from an external source or quotes pulled from article itself. The blockquote<\/code> may contain a p<\/code> tag. For example, we are quoting Ray Eames, from Quotes on Design<\/a>, below.<\/p>\n

\u201cWhat works good is better than what looks good, because what works good lasts.\u201d \u2014 Ray Eames<\/cite><\/p><\/blockquote>\n

Inline Quotes<\/h6>\n

The q<\/code> tag is used for short quotations inline within a paragraph. Here is an example of nested quotations.<\/p>\n

He said, Buzz Lightyear catch phrase is, To infinity and beyond!<\/q><\/q><\/p>\n

Ordered Lists<\/h6>\n

Ordered lists, or ol<\/code> are used to list items in an hierarchical fashion. Each list item, or li<\/code>, 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<\/code>.<\/p>\n

    \n
  1. This is the first item in an ordered list.<\/li>\n
  2. This is the second item in an ordered list with a sub-ordered list.\n
      \n
    1. This is an ordered list item.<\/li>\n
    2. This is an ordered list item<\/li>\n
    3. This is an ordered list item<\/li>\n<\/ol>\n<\/li>\n
    4. This is the third item in an ordered list.<\/li>\n
    5. This is the fourth item in an ordered list with a sub-unordered list.\n