タイポグラフィ

Misora Design Systemのタイポグラフィは、可読性とアクセシビリティを最優先に設計されています。 ビジネスシーンで馴染みのあるフォントを選定し、適切なサイズと行間で快適な読書体験を提供します。

フォントファミリー

和文フォント

BIZ UDPゴシック

可読性の高いゴシック体を採用。UD（ユニバーサルデザイン）フォントで、 誰にでも読みやすく、ビジネス文書に最適です。

CSS 
font-family: "BIZ UDPGothic", "Noto Sans JP",
             "Hiragino Kaku Gothic ProN", sans-serif;

欧文・数字フォント

Inter / System Font

モダンで視認性の高いサンセリフ体。数字の判読性が高く、 データや統計情報の表示に適しています。

CSS 
font-family: "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", "Roboto", sans-serif;

等幅フォント（コード用）

Monaco / Menlo / Consolas

コードブロック、技術文書、APIリファレンスなどに使用します。

CSS 
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;

見出し

見出しは情報の階層を明確にし、コンテンツの構造を視覚的に伝えます。 すべての見出しは太字（700）、行間1.25を基本とします。

見出し1（H1）- 36px

ページタイトル、最重要見出しに使用。1ページに1つまで。

HTML 
<h1>見出し1（H1）- 36px</h1>

見出し2（H2）- 30px

セクションタイトルに使用。ページを大きな区分に分ける際に使用。

HTML 
<h2>見出し2（H2）- 30px</h2>

見出し3（H3）- 24px

サブセクションタイトルに使用。H2の下位階層。

HTML 
<h3>見出し3（H3）- 24px</h3>

見出し4（H4）- 20px

小見出し、カードタイトルなどに使用。

HTML 
<h4>見出し4（H4）- 20px</h4>
見出し5（H5）- 18px

小さなセクションタイトル、リスト項目の見出しに使用。

HTML 
<h5>見出し5（H5）- 18px</h5>
見出し6（H6）- 16px

最小の見出し。ラベル的な用途に使用。

HTML 
<h6>見出し6（H6）- 16px</h6>

本文テキスト

標準本文（16px）

これは標準的な本文テキストです。Misora Design Systemでは、本文のフォントサイズを16px以上とし、 行間を1.5〜1.7倍確保することで、快適な読書体験を提供します。 長文でも読みやすく、目の疲労を軽減します。

HTML 
<p>これは標準的な本文テキストです。</p>
CSS 
body {
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-relaxed); /* 1.7 */
  color: var(--color-text-primary);
}

大きい本文（18px）

リード文や重要な説明文に使用する、やや大きめのテキストです。 視認性が高く、印象的なメッセージを伝えるのに適しています。

HTML 
<p style="font-size: var(--font-size-lg);">
  リード文や重要な説明文に使用します。
</p>

小さい本文（14px）

注釈、キャプション、メタ情報などに使用する小さめのテキストです。 補足的な情報や、UIラベルに適しています。

HTML 
<p style="font-size: var(--font-size-sm);">
  注釈、キャプション、メタ情報などに使用します。
</p>

フォントサイズスケール

タイポグラフィスケールは、調和の取れた視覚的階層を作成するために設計されています。

変数名 サイズ 用途 サンプル
--font-size-xs 12px 極小テキスト サンプルテキスト
--font-size-sm 14px 小テキスト サンプルテキスト
--font-size-base 16px 本文（基準） サンプルテキスト
--font-size-lg 18px 大きい本文 サンプルテキスト
--font-size-xl 20px H4、強調 サンプルテキスト
--font-size-2xl 24px H3 サンプルテキスト
--font-size-3xl 30px H2 サンプルテキスト
--font-size-4xl 36px H1 サンプルテキスト
--font-size-5xl 48px ヒーロータイトル サンプル

使用方法

フォントウェイト

適切なフォントウェイトを使用することで、テキストの重要度と階層を表現します。

Normal (400): 本文テキスト

Medium (500): ラベル、ナビゲーション

Semibold (600): ボタン、強調

Bold (700): 見出し、重要な情報

CSS 
/* CSS変数を使用 */
font-weight: var(--font-weight-normal);   /* 400 */
font-weight: var(--font-weight-medium);   /* 500 */
font-weight: var(--font-weight-semibold); /* 600 */
font-weight: var(--font-weight-bold);     /* 700 */

行間

適切な行間は可読性を大きく向上させます。テキストの用途に応じて行間を調整します。

CSS 
/* 見出し用 - 密集 */
line-height: var(--line-height-tight); /* 1.25 */

/* UI要素用 - 標準 */
line-height: var(--line-height-normal); /* 1.5 */

/* 本文用 - ゆったり */
line-height: var(--line-height-relaxed); /* 1.7 */

レスポンシブタイポグラフィ

モバイルデバイスでは、見出しのサイズを適度に縮小し、可読性を維持します。

CSS 
/* デスクトップ */
h1 {
  font-size: var(--font-size-4xl); /* 36px */
}

/* モバイル */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-3xl); /* 30px */
  }
}