Typography: Brother

<div style="background-color: #eee; display: inline-block; padding: 16px; margin-bottom: 48px">
    <div><strong>Syntax:</strong> <code>@include font-scale([level], [family], [weight]);</code></div>
    <div><strong>Example:</strong> <code>@include font-scale(level-3, $font-primary, extrabold);</code></div>
</div>

<table class="dst-table">
    <thead>
        <tr>
            <th>CSS</th>
            <th>SCSS</th>
            <th>Values</th>
            <th>Line-height</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>u-primary-typo-level-12</code></td>
            <td><code> @include font-scale(level-12, $font-primary)</code></td>
            <td>min:95px - max:119px</td>
            <td>125%</td>
            <td>
                <p class="u-primary-typo-level-12">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-11</code></td>
            <td><code> @include font-scale(level-11, $font-primary)</code></td>
            <td>min:76px - max:95px</td>
            <td>125%</td>
            <td>
                <p class="u-primary-typo-level-11">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-10</code></td>
            <td><code> @include font-scale(level-10, $font-primary)</code></td>
            <td>min:61px - max:76px</td>
            <td>125%</td>
            <td>
                <p class="u-primary-typo-level-10">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-9</code></td>
            <td><code> @include font-scale(level-9, $font-primary)</code></td>
            <td>min:49px - max:61px</td>
            <td>125%</td>
            <td>
                <p class="u-primary-typo-level-9">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-8</code></td>
            <td><code> @include font-scale(level-8, $font-primary)</code></td>
            <td>min:39px - max:49px</td>
            <td>125%</td>
            <td>
                <p class="u-primary-typo-level-8">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-7</code></td>
            <td><code> @include font-scale(level-7, $font-primary)</code></td>
            <td>min:32px - max:39px</td>
            <td>125%</td>
            <td>
                <p class="u-primary-typo-level-7">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-6</code></td>
            <td><code> @include font-scale(level-6, $font-primary)</code></td>
            <td>min:25px - max:31px</td>
            <td>150%</td>
            <td>
                <p class="u-primary-typo-level-6">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-5</code></td>
            <td><code> @include font-scale(level-5, $font-primary)</code></td>
            <td>min:20px - max:25px</td>
            <td>150%</td>
            <td>
                <p class="u-primary-typo-level-5">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-4</code></td>
            <td><code> @include font-scale(level-4, $font-primary)</code></td>
            <td>min:18px - max:20px</td>
            <td>150%</td>
            <td>
                <p class="u-primary-typo-level-4">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-3</code></td>
            <td><code> @include font-scale(level-3, $font-primary)</code></td>
            <td>min:16px - max:16px</td>
            <td>150%</td>
            <td>
                <p class="u-primary-typo-level-3">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-2</code></td>
            <td><code> @include font-scale(level-2, $font-primary)</code></td>
            <td>min:14px - max:14px</td>
            <td>150%</td>
            <td>
                <p class="u-primary-typo-level-2">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-1</code></td>
            <td><code> @include font-scale(level-1, $font-primary)</code></td>
            <td>min:12px - max:12px</td>
            <td>150%</td>
            <td>
                <p class="u-primary-typo-level-1">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-primary-typo-level-0</code></td>
            <td><code> @include font-scale(level-0, $font-primary)</code></td>
            <td>min:10px - max:10px</td>
            <td>150%</td>
            <td>
                <p class="u-primary-typo-level-0">Aa</p>
            </td>
        </tr>
    </tbody>
</table>