ビューポート境界幅の設定（Viewport Bounds）
スマホ標準: 375px
PC標準: 1440px
基準フォント ＆ モジュラースケール調和比率
推奨: 16px (1.0rem)
推奨: 18px (1.125rem)
📐 各階層の clamp() 式一覧
ルート 16px 基準🖥️ リアルタイム・タイポグラフィ プレビュー
上部のスライダーで画面幅を変更すると、文字サイズが数式通りに無段階で伸縮します。
Webアクセシビリティの未来を切り拓く
WCAG 2.2 達成基準1.4.12が求めるテキスト間隔の真実
フルード・タイポグラフィを正しく実装することで、メディアクエリによる段階的なカクつきを排除し、あらゆるデバイスで心地よい可読性を実現できます。しかし、固定の `height` や `overflow: hidden` を不用意に設定していると、弱視ユーザーがテキスト間隔を拡張した瞬間に致命的なレイアウト崩れを引き起こします。
`height: 48px; overflow: hidden;` を指定しているため、WCAG 1.4.12の行高1.5倍・字間0.12倍を適用した際に文字の下部や右端が切断されて読めなくなります。
`min-height: 48px;` と `padding` を使用しているため、ユーザーのブラウザ拡張で文字間隔が広がっても自動で高さが追従して文字欠けが発生しません。
📋 生成コード（CSS変数 ＆ Tailwind設定）
/* Generated CSS Variables */
:root {
--font-h1: clamp(...);
}
なぜ「文字がはみ出すボタン」はアクセシビリティ法違反になるのか？
ディスレクシア（読字障害）や弱視のユーザーは、行間を広げることで上下の行の混同を防ぎます。固定の `line-height: 1.2` や狭すぎる行間は文字が重なる原因になります。
段落と段落の間にはフォントサイズの最低2倍（`margin-bottom: 2em`）の空白を設けても、カードやモーダルの外枠からはみ出して文字が途切れないようにする必要があります。
文字同士の隙間（トラッキング）を0.12em広げた際、固定幅のボタンやナビゲーションバーで2行に折り返せず右端が消滅するバグが多発します。
英単語やスペース区切りの単語間隔を0.16em拡張してもボックスが破綻しないこと。CSSでは `height` ではなく `min-height`、`width` ではなく `max-width` を使うのが基本原則です。