Typography

日本語に最適化されたタイポグラフィシステム。Minor Third（×1.2）のモジュラースケールと、日本語の可読性に合わせた行間設定。

スケール一覧

用途	クラス	サイズ	行間	根拠
H1	`text-h1`	33px	デフォルト	base × 1.2⁴
H2	`text-h2`	28px	デフォルト	base × 1.2³
H3	`text-h3`	23px	デフォルト	base × 1.2²
H4	`text-h4`	19px	デフォルト	base × 1.2¹
本文	`text-body`	16px	×2.5	base
UI文	`text-ui`	14px	×2.0	コンパクトUI用

プレビュー

text-h1

見出しレベル1

text-h2

見出しレベル2

text-h3

見出しレベル3

text-h4

見出しレベル4

text-body（本文）

日本語の本文テキストです。kasumi/ui では line-height を 2.5 に設定しています。日本語は画数が多く、英語のデフォルト行間（約1.5）では窮屈に見えます。W3C「日本語組版処理の要件（JLREQ）」の推奨を参考に、実際の表示を確認しながら調整しました。

text-ui（UIテキスト）

UIテキストはコンパクトな 14px。ラベル、テーブルセル、通知など「操作する」テキストに使います。行間は 2.0 で、情報密度と可読性のバランスを取っています。

使い分け

text-body（16px / ×2.5）— 「読む」テキスト。説明文、記事、初見ユーザーが読む文章
text-ui（14px / ×2.0）— 「操作する」テキスト。アプリUI、フォームラベル、テーブルセル

見出しやボタンの行間はデフォルトのままです。見出しは1〜2行で折り返すことが少なく、ボタンは単行なので調整不要です。

Minor Third スケール

フォントサイズは Modular Scale で決めています。基準サイズ（16px）に一定の比率（×1.2）を掛けて段階を作る手法です。

base × 1.2⁰ = 16px  (本文)
base × 1.2¹ = 19px  (H4)
base × 1.2² = 23px  (H3)
base × 1.2³ = 28px  (H2)
base × 1.2⁴ = 33px  (H1)

Minor Third（1.2）を選んだ理由は、見出しと本文のメリハリが自然で、日本語 UI で H1 が大きくなりすぎないバランスの良さです。

インストール

kasumi/ui のレジストリからテーマをインストールすると、タイポグラフィトークンとカラーパレットがプロジェクトの CSS に追加されます。

npx shadcn add https://kasumi-ui.vercel.app/r/theme.json

実装

Tailwind CSS 4 の @theme inline でカスタムトークンとして定義しています。

@theme inline {
/* Typography Scale: Minor Third (1.2), base 16px */
--text-ui: 0.875rem;              /* 14px */
--text-ui--line-height: 2;        /* ×2.0 */
--text-body: 1rem;                /* 16px */
--text-body--line-height: 2.5;    /* ×2.5 */
--text-h4: 1.1875rem;             /* 19px */
--text-h3: 1.4375rem;             /* 23px */
--text-h2: 1.75rem;               /* 28px */
--text-h1: 2.0625rem;             /* 33px */
}

text-h1、text-body 等のユーティリティクラスが自動生成され、Tailwind のクラスとして使えます。

<h1 className="text-h1 font-bold tracking-tight">見出し</h1>
<p className="text-body">本文テキスト</p>
<span className="text-ui">UIテキスト</span>