タイポグラフィ

CodeConnect Design Systemのタイポグラフィシステムは、読みやすさとビジュアルヒエラルキーを両立させるために設計されています。一貫したフォントスケールにより、情報の階層構造を明確に伝えます。

フォントファミリー

Sans Serif（サンセリフ）

メインのフォントファミリーとして、システムフォントスタックを使用しています。各OSのネイティブフォントを使用することで、高速な読み込みと優れた可読性を実現します。

The quick brown fox jumps over the lazy dog

素早い茶色のキツネが怠け者の犬を飛び越える

font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif

Monospace（等幅）

コードブロックやターミナル出力など、技術的なコンテンツに使用します。

The quick brown fox jumps over the lazy dog

const greeting = ‘Hello, World!’

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace

フォントサイズスケール

一貫したタイポグラフィスケールにより、視覚的な調和を保ちます。

見出し

6xl3.75rem / 60pxvar(—font-size-6xl)

見出し

5xl3rem / 48pxvar(—font-size-5xl)

見出し

4xl2.25rem / 36pxvar(—font-size-4xl)

見出し

3xl1.875rem / 30pxvar(—font-size-3xl)

見出し

2xl1.5rem / 24pxvar(—font-size-2xl)

見出し

xl1.25rem / 20pxvar(—font-size-xl)

本文（大）

lg1.125rem / 18pxvar(—font-size-lg)

本文（標準）

base1rem / 16pxvar(—font-size-base)

本文（小）

sm0.875rem / 14pxvar(—font-size-sm)

キャプション・補足

xs0.75rem / 12pxvar(—font-size-xs)

行間（Line Height）

テキストの可読性を高めるための行間設定。

短い見出しやラベル、ボタンテキストに使用します。テキストが複数行になる場合は避けてください。

Tight

1.25 (125%)

var(—line-height-tight)

標準的な本文テキストに使用します。最も読みやすく、多くの場合に適しています。

Normal

1.5 (150%)

var(—line-height-normal)

長文や読みやすさを重視するコンテンツに使用します。行間が広く、目が疲れにくくなります。

Relaxed

1.75 (175%)

var(—line-height-relaxed)

使用方法

CSS変数として使用

/* カスタムコンポーネントのスタイリング */
.heading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  font-weight: 700;
}

.body-text {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

Tailwind CSSクラスとして使用

<div>
  <h1 className="font-sans text-4xl leading-tight font-bold">
    メインタイトル
  </h1>
  <p className="font-sans text-base leading-normal text-text-secondary">
    本文テキストはこのように記述します。標準的な行間で読みやすさを確保します。
  </p>
  <code className="font-mono text-sm bg-bg-secondary px-2 py-1 rounded">
    console.log('Hello')
  </code>
</div>

Typographyコンポーネントを使用

import { Heading, Text } from '@codeconnect-llc/design-system'

<div>
  <Heading as="h1" size="6xl">ページタイトル</Heading>
  <Heading as="h2" size="5xl">セクション見出し</Heading>

  <Text variant="body">標準的な本文テキスト</Text>
  <Text variant="body-sm">小さめの本文テキスト</Text>
  <Text variant="caption">キャプションや補足情報</Text>
</div>

タイポグラフィのベストプラクティス

読みやすさを最優先

アクセシビリティガイドライン

アクセシブルなタイポグラフィ

次のステップ