<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Typography</h1>
<p class="subtitle is-5">
    <strong>Typography</strong> is used 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-large is-visible">

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

<ul class="list">
    <li>For maximum legibility Biings DS uses <strong>Averta</strong> as its main font family</li>
    <li>Use different font weights classes to emphasize or differentiate content hierarchy:<br>from `has-text-weight-light` / `normal` / `semibold` / `bold`</li>
    <li>When a Monospace font is required use the <strong class="has-text-monospace">Roboto Mono</strong> font (use `is-monospace`)</li>
</ul>

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

<h4 class="title is-4 is-spaced">Scales</h4>

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.

<div class="box is-large">
    <h1 class="title is-1">Hero</h1><div class="subtitle is-3 has-text-grey">Website or marketing message</div>
    <hr class="is-smaller">
    <h2 class="title is-2">Page</h2><div class="subtitle is-4 has-text-grey">Main page title</div>
    <hr class="is-smaller">
    <h3 class="title is-3">Section</h3><div class="subtitle is-5 has-text-grey">Page section title</div>
    <hr class="is-smaller">
    <h4 class="title is-4">Modal</h4><div class="subtitle is-6 has-text-grey">Modal header title</div>
    <hr class="is-smaller">
    <h5 class="title is-5">Header</h5><div class="subtitle is-6 has-text-grey">Paragraph title</div>
    <hr class="is-smaller">
    <h6 class="title is-6">Text</h6><div class="subtitle is-size-7 has-text-grey">Same size as regular text</div>
</div>

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

<hr>

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