{"id":205,"date":"2015-02-24T09:20:47","date_gmt":"2015-02-24T15:20:47","guid":{"rendered":"https:\/\/shrakedemo.wordpress.com\/?page_id=205"},"modified":"2015-02-24T09:20:47","modified_gmt":"2015-02-24T15:20:47","slug":"typography","status":"publish","type":"page","link":"https:\/\/demo.cedaro.com\/shrake\/style-guide\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"<h2>Paragraph<\/h2>\n<p>All paragraphs are wrapped with the <code>p<\/code> tag. This tag can also be wrapped by the <code>blockquote<\/code> tag if the text is a quote for an external source or a pull quote from an article.<\/p>\n<h2>Block Quotes<\/h2>\n<p>Block quotes are section of content quoted from an external source or quotes pulled from the article itself. The <code>blockquote<\/code> may contain a <code>p<\/code> tag. For example, we are quoting Ray Eames, from <a href=\"http:\/\/quotesondesign.com\/ray-eames\/\">Quotes on Design<\/a>, below.<\/p>\n<blockquote><p>What works good is better than what looks good, because what works good lasts.<\/p><\/blockquote>\n<h2>Inline Quotes<\/h2>\n<p>The <code>q<\/code> tag is used for short quotations inline within a paragraph. Here is an example of nested quotations.<\/p>\n<p>He said, <q>The official Buzz Lightyear catch phrase is, <q>To infinity and beyond!<\/q><\/q><\/p>\n<h2>Ordered Lists<\/h2>\n<p>Ordered lists, or <code>ol<\/code> are used to list items in an hierarchical fashion. Each list item, or <code>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 <code>ul<\/code>.<\/p>\n<ol>\n<li>This is the first item in an ordered list.<\/li>\n<li>This is the second item in an ordered list with a sub-ordered list.\n<ol>\n<li>This is an ordered list item.<\/li>\n<li>This is an ordered list item<\/li>\n<li>This is an ordered list item<\/li>\n<\/ol>\n<\/li>\n<li>This is the third item in an ordered list.<\/li>\n<li>This is the fourth item in an ordered list with a sub-unordered list.\n<ul>\n<li>This is an unordered list item<\/li>\n<li>This is an unordered list item<\/li>\n<li>This is an unordered list item<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>Unordered Lists<\/h2>\n<p>Unordered lists, or <code>ul<\/code> 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.<\/p>\n<ul>\n<li>This is the first item in an unordered list.<\/li>\n<li>This is the second item in an unordered list with a sub-ordered list.\n<ol>\n<li>This is an ordered list item.<\/li>\n<li>This is an ordered list item<\/li>\n<li>This is an ordered list item<\/li>\n<\/ol>\n<\/li>\n<li>This is the third item in an unordered list.<\/li>\n<li>This is the fourth item in an unordered list with a sub-unordered list.\n<ul>\n<li>This is an unordered list item<\/li>\n<li>This is an unordered list item<\/li>\n<li>This is an unordered list item<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Definition Lists<\/h2>\n<p>Definition lists, or <code>dl<\/code> are generally used to denote a list of items that share a relationship with one another. A <code>dl<\/code> should contain at least one <code>dt<\/code> and one <code>dd<\/code>.<\/p>\n<dl>\n<dt>Definition Term<\/dt>\n<dd>Definition description.<\/dd>\n<\/dl>\n<h2>Links<\/h2>\n<p>Links are commonly used to link one page to another, either <a title=\"Home\" href=\"http:\/\/www.cedaro.com\">internally<\/a> or <a href=\"http:\/\/www.blazersix.com\">externally<\/a> and are wrapped by the <code>a<\/code> tag.<\/p>\n<h2>Button Links<\/h2>\n<p>Buttons can be used stylistically to denote a call to action or any other interactive element within a web document.<\/p>\n<p><a class=\"button\" href=\"#\">Button<\/a> <a class=\"button button-alt\" href=\"#\">Alternate<\/a><\/p>\n<h2>Emphasized Text<\/h2>\n<p>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 <code>em<\/code> tag. For example:<\/p>\n<p>Reading <em>this page<\/em> will help you understand how type is set site wide.<\/p>\n<h2>Strong Text<\/h2>\n<p>Strong text is usually relegated to text you are placing strong emphasis on and is wrapped inside of the <code>strong<\/code> tag. For example:<\/p>\n<p>Rules for type <strong>should never<\/strong> be an afterthought.<\/p>\n<h2>Marked or highlighted text<\/h2>\n<p>The <code>mark<\/code> tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context. The <code>mark<\/code> tag was introduced in HTML 5. Internet Explorer 8 and older do not support this tag. For example:<\/p>\n<p>Despite the stock market crash in 2008, the value of my share portfolio increased by 100 percent. I must be doing something right.<\/p>\n<h2>Small Print<\/h2>\n<p>The <code>small<\/code> element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as &#8220;small print&#8221;). It can also be used for attributions or satisfying licensing requirements. For example:<\/p>\n<p><small>Copyright \u00a9 2014 Cedaro.<\/small><\/p>\n<h2>Delete &amp; Insert<\/h2>\n<p>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:<\/p>\n<p>Cedaro is located in <del datetime=\"2012-08-30T15:50:45+00:00\">Austin, TX<\/del> <ins datetime=\"2012-08-30T15:50:45+00:00\">Monticello, IA<\/ins>.<\/p>\n<h2>Citation<\/h2>\n<p>The <code>cite<\/code> 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:<\/p>\n<p>I highly recommend reading <cite>Invisible Man<\/cite> by Ralph Ellison. It changed my life when I was 15 years old.<\/p>\n<h2>Abbreviations &amp; Acronyms<\/h2>\n<p>The <code>abbr<\/code> 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\u2019s mouse hovers the abbreviation. The <code>acronym<\/code> tag has been dropped from the HTML 5 specs because of the confusion between these two tags. You should exclusively use <code>abbr<\/code> but both are styled for this theme. For example:<\/p>\n<p>The abbreviation for the National Football League is <abbr title=\"National Football League\">NFL<\/abbr> and the acronym for as soon as possible is <acronym title=\"as soon as possible\">ASAP<\/acronym>.<\/p>\n<h2>Subscript &amp; Superscript<\/h2>\n<p>The <code>sub<\/code> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H<sub>2<\/sub>O.<\/p>\n<p>The <code>sup<\/code> tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like this example<sup>[1]<\/sup>.<\/p>\n<h2>Code &amp; Code Blocks<\/h2>\n<p>The <code>code<\/code> tag is useful for websites who intend to share computer code snippets. When wrapped by the <code>pre<\/code> tag, a larger block of code can be displayed.<\/p>\n<pre><code>@media only screen and ( min-width: 43.75em ) and ( max-width: 48.938em ) {\n    article {\n        width: 69.1563%;\n    }\n    aside {\n        width: 26.6943%;\n    }\n}\n<\/code><\/pre>\n<hr \/>\n<h2>Tabular Data<\/h2>\n<p>The <code>table<\/code> tag is best used for presenting tabular data. This tag should always contain the <code>thead<\/code>, <code>tfoot<\/code> and <code>tbody<\/code> tags and should be marked up in that order. The <code>table<\/code> tag can also contain the <code>caption<\/code> tag for accessibility.<\/p>\n<table>\n<caption>Convert Font Sizes from Pixels to Ems or Percentages<\/caption>\n<thead>\n<tr>\n<th>Pixels<\/th>\n<th>Ems<\/th>\n<th>Percentages<\/th>\n<\/tr>\n<\/thead>\n<tfoot>\n<tr>\n<td colspan=\"3\">Conversions provided by <a href=\"http:\/\/pxtoem.com\/\">PXtoEM.com<\/a><\/td>\n<\/tr>\n<\/tfoot>\n<tbody>\n<tr>\n<td>16px<\/td>\n<td>1em<\/td>\n<td>100%<\/td>\n<\/tr>\n<tr>\n<td>17px<\/td>\n<td>1.063em<\/td>\n<td>106.3%<\/td>\n<\/tr>\n<tr>\n<td>18px<\/td>\n<td>1.125em<\/td>\n<td>112.5%<\/td>\n<\/tr>\n<tr>\n<td>19px<\/td>\n<td>1.188em<\/td>\n<td>118.8%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip; <\/p>\n<p><a class=\"more-link\" href=\"https:\/\/demo.cedaro.com\/shrake\/style-guide\/typography\/\">Read More<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"parent":94,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-205","page","type-page","status-publish","hentry","custom-excerpts"],"_links":{"self":[{"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/pages\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":0,"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/pages\/205\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/pages\/94"}],"wp:attachment":[{"href":"https:\/\/demo.cedaro.com\/shrake\/wp-json\/wp\/v2\/media?parent=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}