黄金比、長三度などの古典的な比率で調和のとれたモジュラータイプスケールを生成。サイズを視覚的にプレビューし、完全なCSSをコピー。
タイポグラフィ スケールは、一貫した数学的比率に従う一連のフォント サイズです。サイズをランダムに選択するのではなく、各ステップに同じ比率を掛けて、見出し、本文、キャプション全体に視覚的なリズムと階層を作成します。
基本サイズ (16 ピクセルがブラウザのデフォルトであり、確実な開始点です) を選択し、比率を選択します。 1.125 のような小さい比率では、編集サイトに微妙でエレガントなスケールが作成されます。 1.618 のような大きな比率では、マーケティング ページに劇的なコントラストが作成されます。
タイポグラフィックスケールとは、一つの数学的比率に従う固定のフォントサイズ集合で、各段階が次の段階と同じ比率でつながります。目分量でサイズを選ぶのではなく——14、17、22、31…——ベースサイズを決めて比率を繰り返し掛ける（または割る）のです: 16 × 1.25 = 20、さらに × 1.25 = 25、という具合に。結果は意図的な階層になり、見出し・本文・キャプション・ラベルが同じデザインシステムの一員に見えます。
一般的な比率は性格が異なります。1.125と1.2は微妙で優雅な段差——文字の多い密なインターフェース向きです。1.25と1.333はウェブの主力で、派手さなくはっきりした階層を作ります（1.333はクラシック音楽の完全四度でもあります）。1.5はコンテンツサイト向けの大胆な跳躍。1.618——黄金比——は印象的ですが攻めが強く、ディスプレイ見出しやマーケティングページには美しいものの、長文読書には強すぎることが多いです。
16pxはブラウザのデフォルトで、デスクトップ本文の正しい出発点です。紙の書籍と同じ読み心地で、ほとんどのユーザーに読みやすく、アクセシビリティ指針とも一致します。モバイルは15pxから、または16pxのままでも構いません。ベースを決めたら他はすべてそこから導出——見出しは上へ掛け算、キャプションやラベルは下へ割り算——ベースを一つ変えるだけで階層全体を一貫して再調整できます。
スケールはフォントサイズだけではありません。行間は文字が小さくなるほど広げます: 本文は1.5〜1.6、見出しは1.2〜1.4。垂直リズムには、ベースサイズに比率を掛けて余白の段差を作ります——スケールが16/20/25/31なら、同じ数字をマージンやパディングの増分に使えます。フォントサイズと余白が同じ比率を共有すると、全要素が目に見えないグリッドに揃い、ページは「組み立てた」ものではなく「構成した」ものに見えます。
文字はモバイルとデスクトップの間を滑らかに変化すべきです。現代のCSSなら一行で済みます: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem)——最小値、流動的な中間、最大値。最小と最大はスケールから取り（例: 16px〜28px）、ビューポート項がその間を埋めます。見出しはスマホで優雅に縮み、モニターで大きくなる——メディアクエリは一切不要です。
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹の花に由来する黄金色。JIS慣用色名
ナデシコの花の淡いピンク。平安時代から愛される
新選組の羽織で有名な青緑色
茜草の根から染めた深い赤。夕焼けの色
春の新芽を思わせる明るい黄緑
仏教の七宝「瑠璃」に由来する深い青
桜の花びらのようなごく淡いピンク
藤の花の淡い紫。春の代表色
常緑樹の深い緑。永遠を象徴する
小豆に由来する渋い赤褐色