import { Meta } from '@storybook/addon-docs';
import '../../src/css/base/_typefaces.scss';

<Meta title="Base/Typefaces" />

<style>
  {`
    .sbdocs-p {
        max-width:62ch;
    }
    .swatch {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }
    .swatch.margin-top {
        margin-top: 24px!important;
    }
    .swatch__sample {
        margin-bottom: 12px;
    }
    .swatch__sample-row {
        font-size: 1.75rem;
    }
    .swatch__label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .swatch__label code {
        margin-bottom: 8px !important;
    }
    .swatch__label-pre {
        font-size: 13px;
        font-family: monospace;
    }
  `}
</style>

# Typefaces  


## Neue Haas Grotesk text (400)

<div class="swatch">
    <div class="swatch__sample" style={{ fontWeight: 400}}>
        <div class="swatch__sample-row">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <div class="swatch__sample-row">abcdefghijklmnopqrstuvwxyz</div>
        <div class="swatch__sample-row">1234567890!@#$%^&()</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">--regular-weight</pre></div>
        <div><pre class="swatch__label-pre">.regular</pre></div>
    </div>
</div>

## Neue Haas Grotesk text (500)

<div class="swatch">
    <div class="swatch__sample" style={{ fontWeight: 500}}>
        <div class="swatch__sample-row">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <div class="swatch__sample-row">abcdefghijklmnopqrstuvwxyz</div>
        <div class="swatch__sample-row">1234567890!@#$%^&()</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">--medium-weight</pre></div>
        <div><pre class="swatch__label-pre">.medium</pre></div>
    </div>
</div>

## Neue Haas Grotesk text (700)

<div class="swatch">
    <div class="swatch__sample" style={{ fontWeight: 700}}>
        <div class="swatch__sample-row">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <div class="swatch__sample-row">abcdefghijklmnopqrstuvwxyz</div>
        <div class="swatch__sample-row">1234567890!@#$%^&()</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">--bold-weight</pre></div>
        <div><pre class="swatch__label-pre">.bold</pre></div>
    </div>
</div>