Typography - h1. Heading

Default font-size: 14px, line-height: 20px; - h5. Subheading

Typography (from the Greek words τύπος (typos) = form and γραφή (graphe) = writing) is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning). Type design is a closely related craft, which some consider distinct and others a part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers.[2][3] In modern times, typography has been put into motion—in film, television and online broadcasts—to add emotion to mass communication.[4] - <p class="lead">

Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, clerical workers, and anyone else who arranges type for a product. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users, and David Jury states that "typography is now something everybody does."[5]

History - h2. Heading 2

<dfn>Main articles: History of Western typography, History of typography in East Asia, and Movable type

Typography traces its origins to the first punches and dies used to make seals and currency in ancient times. The typographical principle, the creation of a complete text by reusing identical characters, was first realized in the Phaistos Disc, an enigmatic Minoan print item from Crete, Greece, which dates between 1850 and 1700 1600 BC.[6][7][8] It has been put forward that Roman lead pipe inscriptions were created by movable type printing,[9] but this view has been recently dismissed by the German typographer Herbert Brekle.[10]

The essential criterion of type identity was met by medieval print artifacts such as the Latin Pruefening Abbey inscription of 1119 that was created by the same technique as the Phaistos disc.[11] The silver altarpiece of patriarch Pellegrinus II (1195−1204) in the cathedral of Cividale was printed with individual letter punches.[12][13] The same printing technique can apparently be found in 10th to 12th century Byzantine reliquaries.[14] Individual letter tiles where the words are formed by assembling single letter tiles in the desired order were reasonably widespread in medieval Northern Europe.[15]

h1 ~ h6 - h5. Heading 5

The <h1> to <h6> tags are supported in all major browsers and used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.

Phrase tag

The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are supported in all major browsers, also supports the Global Attributes in HTML. They are not deprecated, but it is possible to achieve richer effect with CSS.

HTML Text Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

<b> Bold - h6. Heading 6

The <b> tag is supported in all major browsers and specifies bold text.

According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

Tip: You can also use the CSS "font-weight" property to set bold text.

<i> Italic

The <i> tag is supported in all major browsers and defines a part of text in an alternate voice or mood. The content of the <i> tag is usually displayed in italic.The <i> tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.

Use the <i> element only when there is not a more appropriate semantic element, such as: <em>, <strong>, <mark>, <cite>, <dfn>

<small> Small Text

The <small> tag is supported in all major browsers and defines smaller text (and other side comments).

<big> Big Text

The <big> tag is supported in all major browsers and defines bigger text. The <big> tag is not supported in HTML5. Use CSS instead.

<strong> Important Text

The <strong> tag is supported in all major browsers and defines importent text.

<del> Delete Text

The <del> tag is supported in all major browsers and defines text that has been deleted from a document. Also look at the <ins> tag to markup inserted text. Use <del> and <ins> to markup updates and modifications in a document. Browsers will normally strike a line through deleted text and underline inserted text.

<ins> Insert Text

The <ins> tag is supported in all major browsers and defines a text that has been inserted into a document. Also look at the <del> tag to markup deleted text. Browsers will normally strike a line through deleted text and underline inserted text. Use <ins> it together with <del> to markup updates and modifications in a document.


Blockquotes - h3. Heading 3

The <blockquote> tag is supported in all major browsers.The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements.

Default blockquote - h5. Subheading 5

Typography with movable type was separately invented in 11th-century China. Metal type was first invented in Korea during the Goryeo Dynasty around 1230. Both hand printing systems, however, were only sporadically used and discontinued after the introduction of Western lead type and the printing press.[18]

From Wikipedia, the free encyclopedia
<blockquote>
    <p>Blockquote conent...</p>
    <cite></cite>
</blockquote>
Align Right

Blockquote add a class .align-right

Typography with movable type was separately invented in 11th-century China. Metal type was first invented in Korea during the Goryeo Dynasty around 1230. Both hand printing systems, however, were only sporadically used and discontinued after the introduction of Western lead type and the printing press.[18]

From Wikipedia, the free encyclopedia

Lists

Add class .kcl-styletool, ul, dl.

Ordered List - h4. Heading 4

The <ol> tag is supported in all major browsers and defines an ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to define list items.

Ordered List Level 1
  1. James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
  2. Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
  3. John Berry, Being a Typographer
<ol class="kcl-style">
    <li>List item content...</li>
    <li>List item content...</li>
    <li>List item content...</li>
</ol>
Ordered List Level 2
  1. James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
    1. List item
    2. List item
    3. List item
  2. Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
  3. John Berry, Being a Typographer
<ol class="kcl-style">
    <li>
        List item content...
        <ol>
            <li>List item content...</li>
            <li>List item content...</li>
            <li>List item content...</li>
        </ol>
    </li>
    <li>List item content...</li>
    <li>List item content...</li>
</ol>
Ordered List & Unordered List
  1. James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
    • List item
    • List item
    • List item
  2. Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
  3. John Berry, Being a Typographer
<ol class="kcl-style">
    <li>
        List item content...
        <ul>
            <li>List item content...</li>
            <li>List item content...</li>
            <li>List item content...</li>
        </ul>
    </li>
    <li>List item content...</li>
    <li>List item content...</li>
</ol>

Urdered List

The <ul> tag is supported in all major browsers and defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists.

Unordered List Level 1
  • James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
  • Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
  • John Berry, Being a Typographer
<ul class="kcl-style">
    <li>List item content...</li>
    <li>List item content...</li>
    <li>List item content...</li>
</ul>
Unordered List Level 2
  • James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
    • List item
    • List item
    • List item
  • Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
  • John Berry, Being a Typographer
<ul class="kcl-style">
    <li>
        List item content...
        <ul>
            <li>List item content...</li>
            <li>List item content...</li>
            <li>List item content...</li>
        </ul>
    </li>
    <li>List item content...</li>
    <li>List item content...</li>
</ul>
Unordered List & Ordered List
  • James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
    1. List item
    2. List item
    3. List item
  • Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
  • John Berry, Being a Typographer
<ul class="kcl-style">
    <li>
        List item content...
        <ol>
            <li>List item content...</li>
            <li>List item content...</li>
            <li>List item content...</li>
        </ol>
    </li>
    <li>List item content...</li>
    <li>List item content...</li>
</ul>

Defition List

The <dl> tag is supported in all major browsers and defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).

Default Defition List
Definition Title
James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
Definition Title
James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
<dl class="kcl-style">
    <dt>Defines a term</dt>
    <dd>Defines a description</dd>
    <dt>Defines a term</dt>
    <dd>Defines a description</dd>
</dl>
Definition Title
Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
John Berry, Being a Typographer
<dl class="kcl-style">
    <dt>Defines a term</dt>
    <dd>Defines a description</dd>
    <dd>Defines a description</dd>
</dl>
Horizontal Defition List

Add class.dl-horizontaltodl

Definition Title
Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
Definition Title
John Berry, Being a Typographer
James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940 (17 ed.), Sidney, Ohio: Scott Publishing, p. 34A, ISBN 0-89487-455-1
Definition Title
Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997
Definition Title
John Berry, Being a Typographer
<dl class="dl-horizontal">
    <dt>Defines a term</dt>
    <dd>Defines a description</dd>
    <dt>Defines a term</dt>
    <dd>Defines a description</dd>
</dl>

Lists at editor

Use<div>or<article>and add class.editor, Lists needn`t add class.

<article class="editor">
    <ol>
        <li>List item content...</li>
        <li>List item content...</li>
        <li>List item content...</li>
    </ol>
    <ul>
        <li>List item content...</li>
        <li>List item content...</li>
        <li>List item content...</li>
    </ul>
    <dl>
        <dt>Defines a term</dt>
        <dd>Defines a description</dd>
        <dd>Defines a description</dd>
    </dl>
</article>

Codes

Code

The <code> tag is supported in all major browsers and defines a piece of computer code.
EX:Add class.btnto<a>

Kbd

The <kbd> tag is supported in all major browsers and defines keyboard input.
EX:Please typeyour account

Pre

The <pre> tag is supported in all major browsers and defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<nav>
    <a>Link item</a>
    <a>Link item</a>
    <a>Link item</a>
</nav>

Color

.text-default James E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-primary E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-secondaryJames E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-focusJames E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-successJames E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-warningJames E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-errorJames E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-infoJames E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940

.text-inverseJames E. Kloetzel, ed. (2010), Scott 2011 Classic Specialized Catalogue of Stamps & Cover 1840–1940