<div class="block">
<h1 class="t-serif">The quick brown fox jumps over the lazy dog</h1>
<p class="no-margin">.t-serif <br>
<span class="t-micro">Droid Serif, Georgia, Times, serif</span>
</p>
</div>
<div class="block">
<h1 class="t-sans">The quick brown fox jumps over the lazy dog</h1>
<p>.t-sans <br>
<span class="t-micro">Open Sans, Helvetica, Arial, Verdana, sans-serif</span>
</p>
</div>
<div class="block">
<h1 class="t-alt-sans">The quick brown fox jumps over the lazy dog</h1>
<p>.t-alt-sans <br>
<span class="t-micro">Lato, Helvetica, Arial, Verdana, sans-serif</span>
</p>
</div>
<div class="block">
<h1 class="t-serif">The quick brown fox jumps over the lazy dog</h1>
<p class="no-margin">.t-serif <br>
<span class="t-micro">Droid Serif, Georgia, Times, serif</span>
</p>
</div>
<div class="block">
<h1 class="t-sans">The quick brown fox jumps over the lazy dog</h1>
<p>.t-sans <br>
<span class="t-micro">Open Sans, Helvetica, Arial, Verdana, sans-serif</span>
</p>
</div>
<div class="block">
<h1 class="t-alt-sans">The quick brown fox jumps over the lazy dog</h1>
<p>.t-alt-sans <br>
<span class="t-micro">Lato, Helvetica, Arial, Verdana, sans-serif</span>
</p>
</div>
/* No context defined for this component. */
We recommend a font system that uses two open-source font families: Open Sans Pro and Droid Serif, both of which are designed for legibility and can beautifully adapt to a variety of visual styles.