Typography

apps/website で利用しているタイポグラフィーの設計指針です。

Design Tokens

フォント指定時は、下記Design Tokenを利用することにより、サイト内で一貫したフォントファミリー・サイズ・行間を保つことができます。

@packages/ui/styles/tokens/typography.css

:root {
  /**
   * Typography: Font Family
   */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Arial, "Meiryo", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho", "BIZ UDPMincho", "Meiryo", serif;
  --font-mono: "SF Mono", "Segoe UI Mono", "Roboto Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

  /**
   * Typography: Font Size / Line Height
   */
  /* 10px */
  --text-2xs: 0.625rem;
  --text-2xs-lh: 1.125rem;

  /* 12px */
  --text-xs: 0.75rem;
  --text-xs-lh: 1.375rem;

  /* 14px */
  --text-sm: 0.875rem;
  --text-sm-lh: 1.625rem;

  /* 16px */
  --text-base: 1rem;
  --text-base-lh: 2rem;

  /* 18px */
  --text-lg: 1.125rem;
  --text-lg-lh: 2rem;

  /* 20px */
  --text-xl: 1.25rem;
  --text-xl-lh: 2rem;

  /* 26px */
  --text-2xl: 1.625rem;
  --text-2xl-lh: 2.375rem;

  /* 30px */
  --text-3xl: 1.875rem;
  --text-3xl-lh: 2.875rem;

  /* 36px */
  --text-4xl: 2.25rem;
  --text-4xl-lh: 3.125rem;

  /* 44px */
  --text-5xl: 2.75rem;
  --text-5xl-lh: 3.375rem;

  /* 52px */
  --text-6xl: 3.25rem;
  --text-6xl-lh: 3.875rem;
}

Preview

Source Code

<div class="grid gap-4">
  <div>
    <div><b>10px</b></div>
    <p class="text-2xs">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>12px</b></div>
    <p class="text-xs">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>14px</b></div>
    <p class="text-sm">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>16px</b></div>
    <p class="text-base">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>18px</b></div>
    <p class="text-lg">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>20px</b></div>
    <p class="text-xl">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>26px</b></div>
    <p class="text-2xl">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>30px</b></div>
    <p class="text-3xl">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>36px</b></div>
    <p class="text-4xl">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>44px</b></div>
    <p class="text-5xl">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div>
    <div><b>52px</b></div>
    <p class="text-6xl">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
</div>