Almost typography are directly include in drop down list „Formats” of the Tiny editor You can use it or write directly the HTML code with the Text mode

Headings

All HTML headings, <h1> through <h5> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

Lead paragraph

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Bold

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Drop Cap

To enlarge the first letter of a paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<span class="dropcap" >L</span>orem ipsum dolor sit amet, ...

Inset left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. your text on the left sideUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

... aliquam erat volutpat. <span class="inset-left" >your text on the left side</span> Ut wisi enim ad minim veniam, ...

Inset right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. your text on the right sideUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

... aliquam erat volutpat. <span class="inset-right" >your text on the right side</span> Ut wisi enim ad minim veniam, ...

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap around any HTML as the quote. For straight quotes we recommend a .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add tag for identifying the source. Wrap the name of the source work in .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with .

WordPress International Inc.
PO Box 216
Alhambra, CA 91802
P: (123) 456-7890

Full Name first.last@example.com

<address>
  <strong>WordPress International Inc.</strong><br>
  PO Box 216<br>
  Alhambra, CA 91802<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to the inside links with a darken color.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="text-black">...</p>
<p class="text-white">...</p>
<p class="text-blue">...</p>
<p class="text-green">...</p>
<p class="text-turquoise">...</p>
<p class="text-orange">...</p>
<p class="text-red">...</p>
<p class="text-violet">...</p>

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="bg-black">...</p>
<p class="bg-white">...</p>
<p class="bg-grey">...</p>
<p class="bg-brown">...</p>
<p class="bg-blue">...</p>
<p class="bg-green">...</p>
<p class="bg-turquoise">...</p>
<p class="bg-orange">...</p>
<p class="bg-red">...</p>
<p class="bg-violet">...</p>

Alternate displays

Use .bg-shadow-light or .bg-shadow-dark to enlight the paragraph or a DIV.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="bg-green bg-shadow-light">...</p>

<p class="bg-green bg-shadow-dark">...</p>

Use .radius4, .radius6, .radius8 or .radius10 to add a border radius.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="bg-orange">...</p>

<p class="bg-orange radius-4">...</p>

<p class="bg-orange radius-8">...</p>

<p class="bg-orange radius-8 bg-shadow-dark">...</p>