{"id":693,"date":"2017-03-06T09:05:52","date_gmt":"2017-03-06T09:05:52","guid":{"rendered":"http:\/\/labs.saurabh-sharma.net\/themes\/newsplus\/demo-3\/?page_id=532"},"modified":"2017-03-06T09:05:52","modified_gmt":"2017-03-06T09:05:52","slug":"typography","status":"publish","type":"page","link":"https:\/\/www.seedogochannel.com\/en\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"

Headings<\/h2>\n

All HTML headings, <h1><\/code> through <h6><\/code>, are available. .h1<\/code> through .h6<\/code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.<\/p>\n

\n\n\n\n\n\n\n\n\n
\n

h1. NewsPlus heading<\/h1>\n<\/td>\n

34px<\/td>\n<\/tr>\n
\n

h2. NewsPlus heading<\/h2>\n<\/td>\n

24px<\/td>\n<\/tr>\n
\n

h3. NewsPlus heading<\/h3>\n<\/td>\n

20px<\/td>\n<\/tr>\n
\n

h4. NewsPlus heading<\/h4>\n<\/td>\n

16px<\/td>\n<\/tr>\n
\n
h5. NewsPlus heading<\/h5>\n<\/td>\n
14px<\/td>\n<\/tr>\n
\n
h6. NewsPlus heading<\/h6>\n<\/td>\n
12px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<h1>h1. NewsPlus heading<\/h1>\n<h2>h2. NewsPlus heading<\/h2>\n<h3>h3. NewsPlus heading<\/h3>\n<h4>h4. NewsPlus heading<\/h4>\n<h5>h5. NewsPlus heading<\/h5>\n<h6>h6. NewsPlus heading<\/h6><\/pre>\n
Create lighter, secondary text in any heading with a generic <small><\/code> tag or the .small<\/code> class.<\/p>\n
\n\n\n\n\n\n\n\n\n
\n
h1. NewsPlus heading Secondary text<\/small><\/h1>\n<\/td>\n<\/tr>\n
\n
h2. NewsPlus heading Secondary text<\/small><\/h2>\n<\/td>\n<\/tr>\n
\n
h3. NewsPlus heading Secondary text<\/small><\/h3>\n<\/td>\n<\/tr>\n
\n
h4. NewsPlus heading Secondary text<\/small><\/h4>\n<\/td>\n<\/tr>\n
\n
h5. NewsPlus heading Secondary text<\/small><\/h5>\n<\/td>\n<\/tr>\n
\n
h6. NewsPlus heading Secondary text<\/small><\/h6>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n
<h1><\/span>h1. NewsPlus heading <small><\/span>Secondary text<\/small><\/h1><\/span>\n<h2><\/span>h2. NewsPlus heading <small><\/span>Secondary text<\/small><\/h2><\/span>\n<h3><\/span>h3. NewsPlus heading <small><\/span>Secondary text<\/small><\/h3><\/span>\n<h4><\/span>h4. NewsPlus heading <small><\/span>Secondary text<\/small><\/h4><\/span>\n<h5><\/span>h5. NewsPlus heading <small><\/span>Secondary text<\/small><\/h5><\/span>\n<h6><\/span>h6. NewsPlus heading <small><\/span>Secondary text<\/small><\/h6><\/span><\/code><\/pre>\n<\/figure>\n
Inline text elements<\/h2>\n
Marked text<\/h3>\n
For highlighting a run of text due to its relevance in another context, use the <mark><\/code> tag.<\/p>\n
\n
You can use the mark tag to
\n        highlight<\/mark>
\n        text.<\/p>\n<\/div>\n
\n
You can use the mark tag to <mark><\/span>highlight<\/mark><\/span> text.<\/code><\/pre>\n<\/figure>\n
Deleted text<\/h3>\n
For indicating blocks of text that have been deleted use the <del><\/code> tag.<\/p>\n
\n
This line of text is meant to be treated as deleted text.<\/del><\/p>\n<\/div>\n
\n
<del><\/span>This line of text is meant to be treated as deleted text.<\/del><\/span><\/code><\/pre>\n<\/figure>\n
Strikethrough text<\/h3>\n
For indicating blocks of text that are no longer relevant use the <s><\/code> tag.<\/p>\n
\n
This line of text is meant to be treated as no longer accurate.<\/s><\/p>\n<\/div>\n
\n
<s><\/span>This line of text is meant to be treated as no longer accurate.<\/s><\/span><\/code><\/pre>\n<\/figure>\n
Inserted text<\/h3>\n
For indicating additions to the document use the <ins><\/code> tag.<\/p>\n
\n
This line of text is meant to be treated as an addition to the document.<\/ins><\/p>\n<\/div>\n
\n
<ins><\/span>This line of text is meant to be treated as an addition to the document.<\/ins><\/span><\/code><\/pre>\n<\/figure>\n
Underlined text<\/h3>\n
To underline text use the <u><\/code> tag.<\/p>\n
\n
This line of text will render as underlined<\/u><\/p>\n<\/div>\n
\n
<u><\/span>This line of text will render as underlined<\/u><\/span><\/code><\/pre>\n<\/figure>\n
Make use of HTML’s default emphasis tags with lightweight styles.<\/p>\n
Small text<\/h3>\n
For de-emphasizing inline or blocks of text, use the <small><\/code> tag to set text at 85% the size of the parent. Heading elements receive their own font-size<\/code> for nested <small><\/code> elements.<\/p>\n
You may alternatively use an inline element with .small<\/code> in place of any <small><\/code>.<\/p>\n
\n
This line of text is meant to be treated as fine print.<\/small><\/p>\n<\/div>\n
\n
<small><\/span>This line of text is meant to be treated as fine print.<\/small><\/span><\/code><\/pre>\n<\/figure>\n
Bold<\/h3>\n
For emphasizing a snippet of text with a heavier font-weight.<\/p>\n
\n
The following snippet of text is rendered as bold text<\/strong>.<\/p>\n<\/div>\n
\n
<strong><\/span>rendered as bold text<\/strong><\/span><\/code><\/pre>\n<\/figure>\n
Italics<\/h3>\n
For emphasizing a snippet of text with italics.<\/p>\n
\n
The following snippet of text is rendered as italicized text<\/em>.<\/p>\n<\/div>\n
\n
<em><\/span>rendered as italicized text<\/em><\/span><\/code><\/pre>\n<\/figure>\n
\n
Alternate elements<\/h4>\n
Feel free to use <b><\/code> and <i><\/code> in HTML5. <b><\/code> is meant to highlight words or phrases without conveying additional importance while <i><\/code> is mostly for voice, technical terms, etc.<\/p>\n<\/div>\n
<\/a>Alignment classes<\/h2>\n
Easily realign text to components with text alignment classes.<\/p>\n
\n
Left aligned text.<\/p>\n
Center aligned text.<\/p>\n
Right aligned text.<\/p>\n
Justified text.<\/p>\n
No wrap text.<\/p>\n<\/div>\n
\n
<p<\/span> class=<\/span>\"text-left\"<\/span>><\/span>Left aligned text.<\/p><\/span>\n<p<\/span> class=<\/span>\"text-center\"<\/span>><\/span>Center aligned text.<\/p><\/span>\n<p<\/span> class=<\/span>\"text-right\"<\/span>><\/span>Right aligned text.<\/p><\/span>\n<p<\/span> class=<\/span>\"text-justify\"<\/span>><\/span>Justified text.<\/p><\/span>\n<p<\/span> class=<\/span>\"text-nowrap\"<\/span>><\/span>No wrap text.<\/p><\/span><\/code><\/pre>\n<\/figure>\n
<\/a>Transformation classes<\/h2>\n
Transform text in components with text capitalization classes.<\/p>\n
\n
Lowercased text.<\/p>\n
Uppercased text.<\/p>\n
Capitalized text.<\/p>\n<\/div>\n
\n
<p<\/span> class=<\/span>\"text-lowercase\"<\/span>><\/span>Lowercased text.<\/p><\/span>\n<p<\/span> class=<\/span>\"text-uppercase\"<\/span>><\/span>Uppercased text.<\/p><\/span>\n<p<\/span> class=<\/span>\"text-capitalize\"<\/span>><\/span>Capitalized text.<\/p><\/span><\/code><\/pre>\n<\/figure>\n
<\/a>Abbreviations<\/h2>\n
Stylized implementation of HTML’s <abbr><\/code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title<\/code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.<\/p>\n
Basic abbreviation<\/h3>\n
\n
An abbreviation of the word attribute is attr<\/abbr>.<\/p>\n<\/div>\n
\n
<abbr<\/span> title=<\/span>\"attribute\"<\/span>><\/span>attr<\/abbr><\/span><\/code><\/pre>\n<\/figure>\n
Addresses<\/h2>\n
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br><\/code>.<\/p>\n
\n
\n    NewsPlus, Inc.<\/strong>
\n    1355 Market Street, Suite 900
\n    San Francisco, CA 94103
\n    P:<\/abbr> (123) 456-7890
\n    <\/address>\n
\n    Full Name<\/strong>
\n    first.last@example.com<\/a>
\n    <\/address>\n<\/div>\n
\n
<address><\/span>\n  <strong><\/span>NewsPlus, Inc.<\/strong><br><\/span>\n  1355 Market Street, Suite 900<br><\/span>\n  San Francisco, CA 94103<br><\/span>\n  <abbr<\/span> title=<\/span>\"Phone\"<\/span>><\/span>P:<\/abbr><\/span> (123) 456-7890\n<\/address><\/span>\n\n<address><\/span>\n  <strong><\/span>Full Name<\/strong><br><\/span>\n  <a<\/span> href=<\/span>\"mailto:#\"<\/span>><\/span>first.last@example.com<\/a><\/span>\n<\/address><\/span><\/code><\/pre>\n<\/figure>\n
Blockquotes<\/h2>\n
For quoting blocks of content from another source within your document.<\/p>\n
Default blockquote<\/h3>\n
Wrap <blockquote><\/code> around any HTML<\/abbr> as the quote. For straight quotes, we recommend a <p><\/code>.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n<\/blockquote>\n<\/div>\n
\n
<blockquote><\/span>\n  <p><\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p><\/span>\n<\/blockquote><\/span><\/code><\/pre>\n<\/figure>\n
Blockquote options<\/h3>\n
Style and content changes for simple variations on a standard <blockquote><\/code>.<\/p>\n
Naming a source<\/h4>\n
Add a <footer><\/code> for identifying the source. Wrap the name of the source work in <cite><\/code>.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n