デザイン・Web制作

フォントサイズ計算ツール

ルート・親要素・ビューポートの基準を分けたpx・rem・em・pt・vw・%変換。タイプスケール、Tailwind v3/v4、CSS clamp()式を生成。

登録不要

フォントサイズ変換

remはルート、emとfont-sizeの%は親要素、vwはビューポート幅を基準にします。

単位値操作
px（ピクセル）16px
rem（ルートem）1rem
em（親要素基準）1em
pt（ポイント）12pt
vw（ビューポート幅）0.8333vw
%（親要素基準）100%

タイプスケールジェネレーター

スケール比率

ラベルpxremプレビュー
xs10.240.64Aa
sm12.80.8Aa
base161Aa
lg201.25Aa
xl251.5625Aa
2xl31.251.953125Aa
3xl39.062.441406Aa
4xl48.833.051758Aa
5xl61.043.814697Aa

CSS変数

:root {
  --font-size-xs: 0.64rem; /* 10.24px */
  --font-size-sm: 0.8rem; /* 12.8px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.25rem; /* 20px */
  --font-size-xl: 1.5625rem; /* 25px */
  --font-size-2xl: 1.953125rem; /* 31.25px */
  --font-size-3xl: 2.441406rem; /* 39.06px */
  --font-size-4xl: 3.051758rem; /* 48.83px */
  --font-size-5xl: 3.814697rem; /* 61.04px */
}

流体タイポグラフィ（clamp）

最小・最大サイズは上のルートフォントサイズを使ってremへ変換します。

生成されたclamp()式

clamp(1rem, 0.9rem + 0.5vw, 1.5rem)

CSSプロパティ

font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);

プレビュー（現在のビューポートで表示）

フォントサイズが画面幅に応じて変化します

このツールについて問い合わせる →

フォントサイズ計算ツールについて

px・rem・em・%・vw の基準

このツールでは、同じフォントサイズを表すための基準を単位ごとに分けて計算します。

  • px：CSSの絶対長単位です。物理的なディスプレイ1画素と常に同じとは限りません。
  • rem：ルート要素の算出フォントサイズが基準です。1remが何pxかはページ設定や利用者環境によって変わります。
  • em・%：font-sizeで使う場合は親要素の算出フォントサイズが基準です。
  • vw：1vwはビューポート幅の1%です。
  • pt：CSSでは1pt = 1/72in、1px = 1/96inの関係で換算します。

相対単位を選ぶだけでアクセシビリティ適合が保証されるわけではありません。WCAG 2.2のResize Textでは、支援技術を使わず200%まで拡大しても内容や機能が失われないことを確認します。特にvwだけの文字サイズは文字拡大へ追従しない場合があるため、実ブラウザで検証してください。

タイプスケールとWebデザイン

タイプスケール（Type Scale）とは、見出し・本文・キャプションなどのフォントサイズを一定の比率で段階化する設計方法です。比率が大きいほど、隣り合う段階のサイズ差も大きくなります。

このツールで選べる比率の例：

  • Major Third（1.25）：段階ごとに1.25倍
  • Perfect Fourth（1.333）：段階ごとに約1.333倍
  • Golden Ratio（1.618）：段階ごとに約1.618倍

このツールは選択したルートサイズでremへ換算し、CSS変数、Tailwind CSS v4の@theme、Tailwind CSS v3の設定形式を別々に出力します。最大は上方向10・下方向5ステップです。

CSS clamp() で実現する流体タイポグラフィ

流体タイポグラフィは、画面幅に応じてフォントサイズを連続的に変える方法です。CSSのclamp()は最小値・推奨値・最大値の3つを受け取り、推奨値を上下限の間へ制約します。

基本の書式：font-size: clamp(最小rem, 計算式, 最大rem)

たとえば clamp(1rem, 0.5rem + 1vw, 1.5rem) と書くと：

  • 画面幅が狭いとき → 1rem（ルートが16pxなら16px）を下回らない
  • 画面幅が広がると → 0.5rem + 1vw で滑らかに拡大
  • 画面幅が十分広いとき → 1.5rem（ルートが16pxなら24px）を超えない

このツールは最小・最大フォントサイズ、異なる2つのビューポート幅、選択したルートサイズから両端を結ぶ式を生成します。最大フォントサイズは最小以上、最大ビューポートは最小より大きい必要があります。生成後も200%文字拡大と狭幅で内容が失われないか確認してください。

よくある質問

Q. 1remは何pxですか？
1remはルート要素の算出フォントサイズです。一般的な初期値として16pxが使われることはありますが、ブラウザ設定やCSSで変わるため常に16pxとは限りません。このツールでは実際に使うルートサイズを入力してください。
Q. pxとremどちらを使うべきですか？
目的と周囲のCSSによって選びます。remはページ共通の基準、emや%は親要素基準の調整に使えます。px指定もページズームでは拡大されますが、ルートの固定方法などによって利用者の既定文字サイズを反映しにくくなる場合があります。単位だけで判断せず、WCAG 2.2の200%文字拡大を実際に確認してください。
Q. emとremの違いは何ですか？
font-sizeに使うemは親要素の算出フォントサイズ、remはルート要素の算出フォントサイズが基準です。emは入れ子ごとに基準が変わり、remはページ内で共通の基準を持ちます。このツールでは両方の基準値を別々に入力できます。
Q. CSS clamp()はどのブラウザで使えますか？
clamp()は現在の主要ブラウザで利用できます。対応条件は変わり得るため、対象ブラウザが決まっている場合はMDNの互換性表と実機で確認してください。また、利用可能であることと200%文字拡大に適合することは別なので、生成式の拡大テストも必要です。
このツールを評価
—(0件)