<div class='wrap'>
    <div class='section' style='display:none'>
        <h1 class='head head_'>
            春風や惟然いねんが耳に馬の鈴
        </h1>
        <p class=>
            ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。
        </p>
    </div>

    <div class='section' style='display:block'>
        <h1 class='head_1 mb-16'>固定サイズ</h1>
        <div class='mb-8'>
            <p class=fz12>
                文字サイズ:
                fz12
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz16>
                文字サイズ:
                fz16
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz20>
                文字サイズ:
                fz20
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz24>
                文字サイズ:
                fz24
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz28>
                文字サイズ:
                fz28
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz32>
                文字サイズ:
                fz32
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz36>
                文字サイズ:
                fz36
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz40>
                文字サイズ:
                fz40
            </p>
        </div>
    </div>

    <div class='section' style='display:none'>
        <h1 class='head_1 mb-16'>可変サイズ</h1>
        <div class='mb-8'>
            <p class=fz12>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz16>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz20>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz24>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz28>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz32>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz36>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
        <div class='mb-8'>
            <p class=fz40>
                pxからpxまでvwごとに無段階レスポンシブフォントサイズ
            </p>
        </div>
    </div>

</div>
<div class='wrap'>
    {{! header }}
    <div class='section' style='display:{{_previewHeader}}'>
        <h1 class='head head_{{className}}'>
            {{_config.dummy.title}}
        </h1>
        <p class={{font}}>
            {{_config.dummy.text}}
        </p>
    </div>

    {{! フォント サイズ}}
    <div class='section' style='display:{{_previewFontSize}}'>
        <h1 class='head_1 mb-16'>固定サイズ</h1>
        {{#each sizes}}
            <div class='mb-8'>
                <p class={{class}}>
                    文字サイズ:
                    {{class}}
                </p>
            </div>
        {{/each}}
    </div>

    {{! レスポンシブフォント }}
    <div class='section' style='display:{{_previewRwFontSize}}'>
        <h1 class='head_1 mb-16'>可変サイズ</h1>
        {{#each sizes}}
            <div class='mb-8'>
                <p class={{class}}>
                    {{to}}pxから{{end}}pxまでvwごとに無段階レスポンシブフォントサイズ
                </p>
            </div>
        {{/each}}
    </div>

</div>
{
  "_previewHeader": "none",
  "_previewFontSize": "block",
  "_previewRwFontSize": "none",
  "font": "",
  "sizes": [
    {
      "class": "fz12"
    },
    {
      "class": "fz16"
    },
    {
      "class": "fz20"
    },
    {
      "class": "fz24"
    },
    {
      "class": "fz28"
    },
    {
      "class": "fz32"
    },
    {
      "class": "fz36"
    },
    {
      "class": "fz40"
    }
  ]
}

Typography

/css/components/atom/_typography.sass

  • Heading
    • h1
      • ページ主題
    • h2
      • ページ副題
      • 大きな課題の見出し
      • コンテンツグループのタイトル
    • h3
      • 具体的な課題の見出し
      • UI コンポーネント見出し
    • h4
      • 小さめのコンテンツのタイトル
    • h5
      • 細分化されたタイトル