Typography

デザインシステムのタイポグラフィシステムです。日本語に最適化されたフォントスタックと階層的なサイズシステムを提供し、読みやすさとブランド一貫性を実現します。

Overview

タイポグラフィシステムは以下の要素で構成されています：

• 階層的な見出しシステム - 情報の重要度を明確に表現
• 最適化された本文テキスト - 長文でも読みやすい設定
• UI要素専用フォント - インターフェースに特化したスタイル
• 数値表示専用フォント - データ表示に最適化されたタブラー数字

Headings

階層的な見出しシステム

Heading 1

ページタイトルやメイン見出し

デザインシステム

Size: 48px 📋

Weight: Bold 📋

Line Height: 1.4 📋

Heading 2

セクション見出し

コンポーネント一覧

Size: 36px 📋

Weight: Bold 📋

Line Height: 1.4 📋

Heading 3

サブセクション見出し

ボタンコンポーネント

Size: 28px 📋

Weight: Bold 📋

Line Height: 1.5 📋

Body Text

本文と補足テキスト

Body Text

本文テキスト、段落

これは本文テキストの例です。日本語の文章は読みやすさを重視し、適切な行間と文字間隔を設定しています。Noto Sans JPフォントを使用することで、日本語と英語の混在する文章でも美しい表示を実現しています。

Size: 16px 📋

Weight: Regular 📋

Line Height: 1.6 📋

Caption

補足情報、注釈、キャプション

これは補足テキストの例です。注釈やキャプションに使用されます。

Size: 14px 📋

Weight: Regular 📋

Line Height: 1.7 📋

UI Elements

インターフェース要素のタイポグラフィ

UI Small

小さなボタン、ラベル

Button Example Label Text

Size: 14px 📋

Weight: Medium 📋

Line Height: 1.0 📋

UI Medium

ボタン、フォーム要素

Button Example Label Text

Size: 16px 📋

Weight: Medium 📋

Line Height: 1.0 📋

Numeric

数値データ、表組み

1,234,567 ¥12,345 98.7%

Size: 16px 📋

Weight: Medium 📋

Feature: Tabular numbers 📋

Font Family

日本語対応フォントスタック

あいうえお かきくけこ さしすせそ ABCDEFG abcdefg 1234567890 デザインシステム Design System

Font Stack: 📋

'Noto Sans JP', 'Noto Sans', 'Inter', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Helvetica Neue', 'Yu Gothic UI', 'Yu Gothic', Meiryo, sans-serif

Design Principles

可読性の最優先

日本語と英語が混在する文章でも、適切な行間と文字間隔で読みやすさを確保。

一貫性の維持

すべてのテキスト要素が統一されたスケールに基づいて設計され、視覚的な調和を実現。

アクセシビリティ

様々なデバイスとユーザーの視覚的ニーズに対応した、包括的なタイポグラフィ設計。

Implementation

CSS Variables

タイポグラフィトークンはCSS変数として定義されており、一貫した実装が可能です。

Vanilla Extract

型安全なCSS-in-JSで、コンパイル時にタイポグラフィの整合性を保証。

Best Practices

1. 階層の明確化: 見出しレベルを適切に使用し、情報の構造を明確に
2. 行長の最適化: 1行あたり45-75文字を目安に、読みやすい行長を維持
3. コントラストの確保: テキストと背景のコントラスト比を適切に設定
4. レスポンシブ対応: デバイスサイズに応じた適切なフォントサイズの調整