タイポグラフィスケール生成
ベースフォントサイズと比率を指定して、調和の取れたタイポグラフィスケールを自動生成します。
xs (scale -2)
10.24px
0.640rem
Aa あいう
sm (scale -1)
12.8px
0.800rem
Aa あいう
base (scale 0)
16px
1.000rem
Aa あいう
lg (scale 1)
20px
1.250rem
Aa あいう
xl (scale 2)
25px
1.563rem
Aa あいう
2xl (scale 3)
31.25px
1.953rem
Aa あいう
3xl (scale 4)
39.06px
2.441rem
Aa あいう
4xl (scale 5)
48.83px
3.052rem
Aa あいう
5xl (scale 6)
61.04px
3.815rem
Aa あいう
タイポグラフィスケールの使い方
ベースフォントサイズ（通常16px）と比率を選択すると、スケールが自動生成されます。
Major Third（1.25）やPerfect Fourth（1.333）が一般的に使われる比率です。CSSとしてコピーできます。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます
関連ツール
🎨🖥️🌈🌈🖼️🎨🖌️🔤📱🔖👁️📐
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。