フォントサイズ変換ツール
px・rem・em・pt・%・vwを即座に相互変換。基準サイズ変更・ライブプレビュー・変換表付き。
基準フォントサイズ（Base）
ブラウザ標準は16px。プロジェクトに合わせて変更してください。
単位変換 — どのフィールドにも入力できます
<div class="fs-unit-block">
<div class="fs-unit-label">px — ピクセル</div>
<div class="fs-unit-input-row">
<input class="fs-unit-input" id="fs-px" type="number" min="0" step="0.5" placeholder="16" />
<button class="fs-copy-btn" data-copy="fs-px">コピー</button>
</div>
<div class="fs-unit-desc">絶対単位。画面の物理ピクセル数</div>
</div>
<div class="fs-unit-block">
<div class="fs-unit-label">rem — ルートEM</div>
<div class="fs-unit-input-row">
<input class="fs-unit-input" id="fs-rem" type="number" min="0" step="0.0625" placeholder="1" />
<button class="fs-copy-btn" data-copy="fs-rem">コピー</button>
</div>
<div class="fs-unit-desc">ルート要素（html）のフォントサイズ基準</div>
</div>
<div class="fs-unit-block">
<div class="fs-unit-label">em — 親要素EM</div>
<div class="fs-unit-input-row">
<input class="fs-unit-input" id="fs-em" type="number" min="0" step="0.0625" placeholder="1" />
<button class="fs-copy-btn" data-copy="fs-em">コピー</button>
</div>
<div class="fs-unit-desc">親要素のフォントサイズを基準とした相対単位</div>
</div>
<div class="fs-unit-block">
<div class="fs-unit-label">pt — ポイント</div>
<div class="fs-unit-input-row">
<input class="fs-unit-input" id="fs-pt" type="number" min="0" step="0.5" placeholder="12" />
<button class="fs-copy-btn" data-copy="fs-pt">コピー</button>
</div>
<div class="fs-unit-desc">印刷単位。1pt = 1/72インチ = 約1.333px</div>
</div>
<div class="fs-unit-block">
<div class="fs-unit-label">% — パーセント</div>
<div class="fs-unit-input-row">
<input class="fs-unit-input" id="fs-pct" type="number" min="0" step="1" placeholder="100" />
<button class="fs-copy-btn" data-copy="fs-pct">コピー</button>
</div>
<div class="fs-unit-desc">親/ルートフォントサイズに対する割合</div>
</div>
<div class="fs-unit-block">
<div class="fs-unit-label">vw — ビューポート幅</div>
<div class="fs-unit-input-row">
<input class="fs-unit-input" id="fs-vw" type="number" min="0" step="0.01" placeholder="1" />
<button class="fs-copy-btn" data-copy="fs-vw">コピー</button>
</div>
<div class="fs-unit-desc">1vw = ビューポート幅の1%（基準1440px）</div>
</div>
ライブプレビュー
素早い茶色の狐が怠惰な犬を飛び越える。The quick brown fox.
変換表 — よく使うサイズ一覧
| px | rem | em | pt | % | vw (1440px) |
|---|
基準サイズ 16px で計算。上記で基準を変更すると自動更新されます。
変換計算式
px → rem
rem = px ÷ 基準px
例: 24px ÷ 16 = 1.5rem
rem → px
px = rem × 基準px
例: 1.5rem × 16 = 24px
px → em
em = px ÷ 親要素px
親=ルートの場合はremと同値
px → pt
pt = px × 0.75
例: 16px × 0.75 = 12pt
px → %
% = (px ÷ 基準px) × 100
例: (16 ÷ 16) × 100 = 100%
px → vw
vw = (px ÷ vp幅) × 100
vp幅 = ビューポート幅（デフォルト1440px）
フリーランス・個人事業主の方へ — freeeで経理を自動化
Web開発・デザイン案件の請求書作成・経費管理・確定申告を freee でまとめて効率化。無料プランから始められます。
※ 本ページのfreeeリンクはアフィリエイトリンクを含む場合があります（A8.net）。