{"id":247,"date":"2014-09-23T16:58:22","date_gmt":"2014-09-23T16:58:22","guid":{"rendered":"http:\/\/demo.cedaro.dev\/shrake\/?page_id=2"},"modified":"2014-11-15T16:06:01","modified_gmt":"2014-11-15T16:06:01","slug":"styles","status":"publish","type":"page","link":"https:\/\/demo.cedaro.com\/caldwell\/styles\/","title":{"rendered":"Style Guide"},"content":{"rendered":"
Typography sets the foundation for every design.<\/div>\n

In fact, we try to begin every project by first establishing the governing rules of type. Doing so insures that good the content\u00a0on this website is both legible and comfortable to read\u00a0across all screen resolutions.<\/p>\n

This is accomplished by taking into account everything from vertical rhythm\u00a0to optimal line measures. All font sizes are set in relative em<\/code> measurements which allows for the proportional scaling of font sizes at various design breakpoints. These pages represent base styles and rules for type and media and should be considered a work in progress.<\/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 and ledes have been set in this tag.\u00a0The Second Level Header tag, h2<\/code>,\u00a0has been relegated to\u00a0any important page level headings.<\/p>\n

\n

Second Level Header<\/h2>\n

As mentioned above, the Second Level Header has been assigned to\u00a0important page level headings. Though there is no hard and fast rule regarding the amount of h1<\/code> tags allowed on a page, but\u00a0we\u00a0tend 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.
\n<\/p>\n

Commonly Used Typography Tags<\/h2>\n

Paragraph<\/h3>\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 an article.<\/p>\n

Block Quotes<\/h3>\n

Block quotes are section of content quoted from an external source or quotes pulled from the 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

What works good is better than what looks good, because what works good lasts.<\/p><\/blockquote>\n

Inline Quotes<\/h3>\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, The official Buzz Lightyear catch phrase is, To infinity and beyond!<\/q><\/q><\/p>\n

Ordered Lists<\/h3>\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