<h6 class="subtitle is-6 is-uppercase has-text-grey">Style</h6><h1 class="title is-1">Typography</h1>
<hr class="is-visible">
<p class="subtitle is-5 is-family-secondary">
    Use <strong>typography</strong> to create clear hierarchies to guide users through the product and experience. It is the core structure of any well designed interface.
</p>

<hr class="is-visible"><br>

<h4 class="title is-4 is-family-primary">Font family</h4>

<ul class="list">
    <li>For maximum legibility Biings DS uses <span class="is-family-primary has-text-weight-medium">Averta</span> as its main font family.</li>
    <li>For important headings use <strong class="is-family-secondary has-text-weight-bold">Merriweather</strong> – modifier <code>is-family-secondary</code></li>
    <li>When a Monospace font is required use <strong class="is-family-monospace">Roboto Mono</strong> – modifier <code>is-family-monospace</code></li>
</ul>

<hr class="is-large is-visible">
<h4 class="title is-4 is-spaced is-family-primary">Font weights</h4>
<p class="subtitle is-6">Use font weights to emphasize or differentiate content hierarchy.</p>

<ul class="list">
    <li><span class="has-text-weight-light">Light 300</span> – <code>has-text-weight-light</code></li>
    <li><span class="has-text-weight-normal">Normal 400</span> – <code>has-text-weight-normal</code></li>
    <li><span class="has-text-weight-medium">Medium 500</span> – <code>has-text-weight-medium</code></li>
    <li><span class="has-text-weight-semibold">Semibold 600</span> – <code>has-text-weight-semibold</code></li>
    <li><span class="has-text-weight-bold">Bold 800</span> – <code>has-text-weight-bold</code></li>
</ul>

<hr class="is-large is-visible">
<h4 class="title is-4 is-spaced is-family-primary">Scales</h4>
<p class="subtitle is-6">
Titles and subtitles have sizes ranging from 1 (biggest) to 6 (smallest). Texts have an extra 7th smaller size. Use the modifier syntax `is-[1-6]` for titles, and `is-size-[1-7]` for texts.
</p>
<div class="box">
    <h1 class="title is-0 is-serif">Hero</h1><div class="subtitle is-4 has-text-grey">Website and marketing headers, serif recommanded</div>
    <hr class="is-smaller">
    <h1 class="title is-1 is-serif">Page</h1><div class="subtitle is-4 has-text-grey">Main page header, serif recommanded</div>
    <hr class="is-smaller">
    <h2 class="title is-2 is-serif">Section</h2><div class="subtitle is-4 has-text-grey">Section header, serif recommanded</div>
    <hr class="is-smaller">
    <h3 class="title is-3">Default</h3><div class="subtitle is-5 has-text-grey">Default size header</div>
    <hr class="is-smaller">
    <h4 class="title is-4">Title</h4><div class="subtitle is-5 has-text-grey">Basic title</div>
    <hr class="is-smaller">
    <h5 class="title is-5">Paragraph</h5><div class="subtitle is-6 has-text-grey">Paragraph header</div>
    <hr class="is-smaller">
    <h6 class="title is-6">Text</h6><div class="subtitle is-6 has-text-grey">Same size as regular text</div>
</div>

?> There should be a size difference of <strong>2</strong> between a title and its direct subtitle.

<hr>

<a href="http://bulma.io/documentation/modifiers/typography-helpers/" target="blank" class="box is-bordered is-link">
    More information on &nbsp;→&nbsp; <span class="has-text-primary">Bulma / <strong>Typography helpers</strong></span>
</a>