タイポグラフィスケールジェネレーター
基準フォントサイズとモジュラースケール比率(黄金比や長3度など)を選ぶと、このツールは小さなキャプションから大きな見出しまで、比例したフォントサイズのセットを一括生成します。テキストサイズが場当たり的ではなく、統一感のあるものになります。結果はすぐに使えるCSSカスタムプロパティのブロックとしてコピーできます。
基準フォントサイズ(px)
拡大比率
サンプルテキスト ステップ
-2 · 10.24px
サンプルテキスト ステップ
-1 · 12.8px
サンプルテキスト ステップ
0 · 16px
サンプルテキスト ステップ
1 · 20px
サンプルテキスト ステップ
2 · 25px
サンプルテキスト ステップ
3 · 31.25px
サンプルテキスト ステップ
4 · 39.06px
サンプルテキスト ステップ
5 · 48.83px
--step--2: 10.24px;
--step--1: 12.8px;
--step-0: 16px;
--step-1: 20px;
--step-2: 25px;
--step-3: 31.25px;
--step-4: 39.06px;
--step-5: 48.83px;仕組み
モジュラースケールは、基準フォントサイズに一定の比率を段階的に掛け合わせ、正負両方向に展開します。負のステップはキャプションや細かい注釈に向けて縮小し、正のステップは見出しやディスプレイテキストに向けて拡大します。結果として得られるサイズのセットはすべて同じ比例関係を共有しており、無作為に選んだサイズよりも意図的に見える傾向があります。
比率の選び方
短2度や長2度のような小さい比率は、密なインターフェースに適した繊細で近接したサイズを生み出します。完全4度や黄金比のような大きい比率は、より劇的なコントラストを生み出し、力強い見出しがいくつかある編集ページやマーケティングページに向いています。
このカテゴリの他のツール
露出計算機
絞り、シャッタースピード、ISOの間で等価露出を求めます。
アスペクト比計算機
画像や動画を比率を保ったまま拡大縮小し、簡略化した比率を求めます。
CSSグラデーションジェネレーター
線形または放射状のCSSグラデーションをデザインし、生成されたコードをコピーします。
コントラストチェッカー
前景色と背景色がWCAGコントラストガイドラインを満たしているか確認します。
カラーパレットジェネレーター
任意のベースカラーから、補色・類似色・トライアド配色のパレットを生成します。
カラーフォーマット変換ツール
色をHEX、RGB、HSL、CMYKの間で即座に変換。各形式をワンクリックでコピーできます。