DAHLIA Pattern Library

Typography 

<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.