HTML - Typography Patterns

gistfile1.html

<p>Sed consequat <a href="#">dapibus mauris vitae sagittis</a>. Phasellus pellentesque <b>magna commodo</b> purus dictum euismod. <em>Vivamus ac orci vel purus</em> lobortis faucibus. <strong>Nullam porttitor</strong> tincidunt sodales. Nullam in orci sit amet purus euismod gravida nec <i>at metus</i>. Proin sit amet lorem lectus, convallis ornare massa.</p>
<ins>In at sodales nisl. In lacus libero, egestas eget venenatis vitae, posuere porttitor elit.</ins>
<p>Quisque laoreet <code>auctor felis</code> at congue. Ut nisl eros, <abbr title="abbr">dignissim</abbr> eget auctor non, mattis vitae dolor. Donec posuere <kbd>massa</kbd> eu dolor commodo luctus. In at sodales nisl. In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. <dfn>Vivamus vel tristique magna</dfn>. Morbi non elit ante, sed venenatis diam. Vivamus vehicula orci sed quam aliquet sagittis. Quisque auctor placerat pharetra.</p>
<pre>
p {
	font-size:1em;
	<mark>margin-bottom: 1.5em;</mark>
}
</pre>
<h2>Vivamus vel tristique magna. Morbi non elit ante</h2>
<p>Donec magna lacus, <small>malesuada venenatis molestie</small> a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu. Nullam facilisis ligula ut mi condimentum quis accumsan est ultricies.</p>
<blockquote>
<p>Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam.</p>
<p><b>Matt Berridge</b></p>
</blockquote>
<h3>Sed non mauris felis, non iaculis ante</h3>
<p>Quisque laoreet auctor felis at congue. Ut nisl eros, dignissim eget auctor non, mattis vitae dolor. Donec posuere massa eu dolor commodo luctus. In at sodales nisl. In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna. Morbi non elit ante, sed venenatis diam. Vivamus vehicula orci sed quam aliquet sagittis. Quisque auctor placerat pharetra.</p>
<dl>
<dt>In at sodales nisl</dt>
<dd>Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna.</dd>
<dt>Vestibulum ante ipsum primis</dt>
<dd>Proin faucibus sem sed sapien dictum iaculis. Sed in lacus magna.</dd>
<dt>Sed in lacus magna. Etiam at eros leo.</dt>
<dd>Vivamus ac orci vel purus lobortis faucibus. Nullam porttitor tincidunt sodales.</dd>
</dl>
<hr />
<h4>Ut nisl eros, dignissim eget auctor non, mattis vitae dolor</h4>
<p>Etiam tellus turpis, molestie eu elementum nec, dictum in arcu. Nullam facilisis ligula ut mi condimentum quis accumsan est ultricies. Curabitur sem turpis, placerat in volutpat et, lobortis eu odio.</p>
<ul>
<li>Duis et augue in purus condimentum condimentum eget eget odio.</li>
<li>Maecenas vel nisi quam.
<ul>
<li>In at sodales nisl. In lacus libero, egestas eget venenatis vitae, posuere porttitor elit.</li>
<li>Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.</li>
<li>Nunc facilisis tempor felis vel lobortis.
<ol>
<li>Vivamus vel tristique magna. Morbi non elit ante, sed venenatis diam. Vivamus vehicula orci sed quam aliquet sagittis.</li>
<li>Maecenas vel nisi quam.</li>
</ol>
</li>
<li>Molestie eu elementum nec, dictum in arcu.</li>
</ul>
</li>
<li>Nullam in orci sit amet.</li>
<li>In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.</li>
</ul>
<h5>Duis et augue in purus condimentum</h5>
<p>Sed eget ligula et purus imperdiet tempor sit amet id augue. Integer hendrerit pretium augue, et faucibus dolor viverra ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque malesuada lacus eu arcu pellentesque hendrerit porttitor nunc pharetra. Etiam id elit id metus auctor vehicula eget ut est. Proin faucibus sem sed sapien dictum iaculis. Sed in lacus magna. Etiam at eros leo. In nisl magna, adipiscing in consequat nec, fermentum nec neque. Duis vel quam vel libero tincidunt aliquet. Donec nec erat tellus, nec condimentum lorem.</p>
<ol>
<li>Duis et augue in purus condimentum condimentum eget eget odio.</li>
<li>Maecenas vel nisi quam.
<ol>
<li>In at sodales nisl. In lacus libero, egestas eget venenatis vitae, posuere porttitor elit.</li>
<li>Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.</li>
<li>Nunc facilisis tempor felis vel lobortis.
<ul>
<li>Vivamus vel tristique magna. Morbi non elit ante, sed venenatis diam. Vivamus vehicula orci sed quam aliquet sagittis.</li>
<li>Maecenas vel nisi quam.</li>
</ul>
</li>
<li>Molestie eu elementum nec, dictum in arcu.</li>
</ol>
</li>
<li>Nullam in orci sit amet.</li>
<li>In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.</li>
</ol>
<h6>Nullam porttitor tincidunt sodales. Nullam in orci sit amet</h6>
<p>Vivamus ac orci vel purus lobortis faucibus. Nullam porttitor tincidunt sodales. Nullam in orci sit amet purus euismod gravida nec at metus. Proin sit amet lorem lectus, convallis ornare massa.</p>
<table>
<caption>In lacus libero, egestas eget venenatis vitae</caption>
<thead>
<tr>
<th scope="col">Vivamus vel</th>
<th scope="col">In lacus libero</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lobortis faucibus</td>
<td>Tincidunt sodales</td>
</tr>
<tr>
<td>Eget venenatis vitae</td>
<td>Porttitor tincidunt sodales</td>
</tr>
</tbody>
</table>