タイプスケール
デザイン用のモジュラータイプスケールを生成。ベースサイズと比率を選択して完璧なプロポーションの見出しサイズを作成。
px
Scale PreviewPreview capped at 72px - CSS below ↓
h1
-
The quick brown fox
h2
-
The quick brown fox
h3
-
The quick brown fox
h4
-
The quick brown fox
h5
-
The quick brown fox
h6
-
The quick brown fox
body
-
The quick brown fox
small
-
The quick brown fox
Generated CSS
モジュラータイプスケールとは?
モジュラータイプスケールは、一貫した数学的比率に従うフォントサイズのセットです。例えばMajor Third (1.25x)やPerfect Fourth (1.333x)など。h1からh6まで各見出しが比例して大きくなり、調和のとれた視覚的にバランスのとれたタイポグラフィを生み出します。
適切な比率の選び方
Minor Second (1.067)などの小さい比率は、密なUIやダッシュボードに適したコンパクトなスケールを作ります。Perfect Fourth (1.333)や黄金比(1.618)などの大きい比率は、エディトリアルサイトに適したドラマチックなコントラストを生み出します。
生成されたCSSの使い方
CSSパネルは:rootのCSSカスタムプロパティ(例:--text-h1)と各見出しレベルの直接セレクターを出力します。スタイルシートにコピーして貼り付けるだけです。remはアクセシブルなスケーラブルなサイズに、pxは固定サイズに適しています。
タイプスケールとアクセシビリティ
pxの代わりにremを使うと、ユーザーのシステムフォントサイズ設定に合わせてタイポグラフィがスケールします。WCAGはテキストを200%まで拡大できることを推奨しています。remを使ったモジュラースケールはこの要件を自動的に満たします。