1remは何pxですか？

デフォルトでは1rem = 16pxです。これはブラウザの標準フォントサイズが16pxであるためです。ただし、ユーザーがブラウザ設定でフォントサイズを変更している場合や、html要素にfont-sizeを指定している場合は異なります。たとえばhtml { font-size: 62.5%; }と設定すると、1rem = 10pxになります。

pxとremどちらを使うべきですか？

フォントサイズにはremの使用が推奨されます。remはユーザーのブラウザ設定（文字サイズの拡大）を尊重するため、アクセシビリティに優れています。WCAG 2.1のガイドラインでも、テキストの拡大縮小への対応が求められています。ボーダーやシャドウなどフォントサイズに連動させたくないプロパティにはpxが適しています。

emとremの違いは何ですか？

emは親要素のフォントサイズを基準にする相対単位で、remはルート要素（html）のフォントサイズを基準にします。emはネストするたびに基準が変わるため計算が複雑になりやすいですが、コンポーネント内でpadding等をフォントサイズに比例させたい場合に便利です。remはページ全体で一貫した基準を持てるため、フォントサイズの指定にはremが広く推奨されています。

CSS clamp()はどのブラウザで使えますか？

CSS clamp()は主要なモダンブラウザ（Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+）でサポートされています。Can I Useによると、グローバルで約96%以上のブラウザで利用可能です。IE11はサポートしていないため、IE対応が必要な場合はフォールバックとして固定値を併記する必要があります。

デザイン・Web制作

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

px・rem・em・pt・vw・%の相互変換。タイポグラフィスケール自動生成とCSS clamp()による流体タイポグラフィ計算にも対応。

フォントサイズ変換

ベースフォントサイズ (px)

ビューポート幅 (px)

単位	値
px（ピクセル）	16px
rem（ルートem）	1rem
em	1em
pt（ポイント）	12pt
vw（ビューポート幅）	0.8333vw
%（パーセント）	100%

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

ベースサイズ (px)

スケール比率

上方向ステップ数

下方向ステップ数

ラベル	px	rem	プレビュー
xs	10.24	0.64	Aa
sm	12.8	0.8	Aa
base	16	1	Aa
lg	20	1.25	Aa
xl	25	1.563	Aa
2xl	31.25	1.953	Aa
3xl	39.06	2.441	Aa
4xl	48.83	3.052	Aa
5xl	61.04	3.815	Aa

: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.563rem; /* 25px */
  --font-size-2xl: 1.953rem; /* 31.25px */
  --font-size-3xl: 2.441rem; /* 39.06px */
  --font-size-4xl: 3.052rem; /* 48.83px */
  --font-size-5xl: 3.815rem; /* 61.04px */
}

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

最小フォントサイズ (px)

最大フォントサイズ (px)

最小ビューポート (px)

最大ビューポート (px)

生成されたclamp()式

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

CSSプロパティ

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

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

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

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