Automatic Typography Styling

Paragraphs & Inline Elements

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor.

Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien.

<p>
  Sed egestas, ante et <a href="#">vulputate volutpat</a>, eros pede semper est, <i>vitae luctus metus</i> libero eu augue. Morbi purus libero, faucibus adipiscing, <b>commodo quis</b>, gravida id, est. Sed lectus. <code>Praesent elementum</code> hendrerit tortor. 
</p>
<p>
  <mark>Sed semper lorem at felis</mark>. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, <small>eu pulvinar nunc sapien ornare nisl</small>. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. <code>Morbi interdum mollis sapien</code>.
</p>

Blockquotes

Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique.

—Parmenides, Nunc sem lacus, accumsan quis
<blockquote>
  <p>Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique.</p>
  <footer>—Parmenides, <cite>Nunc sem lacus, accumsan quis</cite></footer>
</blockquote>

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Unordered Lists

  • Unordered list item 1
  • Unordered list item 2
    • Unordered list sub-item 1
    • Unordered list sub-item 2
  • Unordered list item 3
  • Unordered list item 4
<ul>
  <li>Unordered list item 1</li>
  <li>
  Unordered list item 2
    <ul>
      <li>Unordered list sub-item 1</li>
      <li>Unordered list sub-item 2</li>
    </ul>
  </li>
  <li>Unordered list item 3</li>
  <li>Unordered list item 4</li>
</ul>

Ordered Lists

  1. Ordered list item 1
  2. Ordered list item 2
    1. Ordered list sub-item 1
    2. Ordered list sub-item 2
  3. Ordered list item 3
  4. Ordered list item 4
<ol>
  <li>Ordered list item 1</li>
  <li>
  Ordered list item 2
    <ol>
      <li>Ordered list sub-item 1</li>
      <li>Ordered list sub-item 2</li>
    </ol>
  </li>
  <li>Ordered list item 3</li>
  <li>Ordered list item 4</li>
</ol>