Stax
Tools

Font Size Converter

Convert CSS font sizes between px, rem, em, pt, vw, vh, and %.

UnitValueNotes
px16absolute pixels
rem1base 16px
em1parent 16px
pt12at 96 dpi
vw1.1111viewport 1440px wide
vh1.7778viewport 900px tall
%100parent 16px

Click any row to use that unit as the new input.

Settings (base font size, viewport, parent)
px
px
px
px

CSSユニットのクイックリファレンス

ベストプラクティス：フォントサイズにremを使用する

clamp()によるフルードタイポグラフィ

アクセシビリティコミュニティはフォントサイズにremユニットを使用することを推奨しています。これにより、ブラウザのデフォルトフォントサイズを大きくしたユーザー（一般的なアクセシビリティのニーズ）のテキストも適切に拡大縮小されます。html { font-size: 62.5% } を設定すると1rem = 10pxになり、暗算が簡単になります：1.6rem = 16px、2.4rem = 24px。

最新のCSSでは最小値と最大値の間でスケールするフルードフォントサイズが使えます：font-size: clamp(1rem, 2.5vw, 2rem) はフォントが少なくとも1remで、ビューポートに合わせて2.5vwで成長し、2remで上限となることを意味します。この計算ツールを使って、特定のビューポートでターゲットサイズに一致するvw値を見つけてください。

フロントエンド開発者は、フォントサイズをpxで指定するFigmaデザインを、ユーザーがルートフォントサイズをオーバーライドできるアクセシブルなCSSコードベース向けのrem値に変換するときにこのツールを使います。pxからremへレガシースタイルシートを移行するチームは、各ピクセル値を貼り付けて即座にrem相当値を得ます。物理的な紙の寸法を対象とする@media printルール用にremとpx値をptに変換するプリントスタイルシートの作者にも使われます。

  • px — 絶対ピクセル。一貫しているが、ユーザーのブラウザ設定を無視する
  • rem — ルートフォントサイズに対する相対値（デフォルト16px）。アクセシブルなタイポグラフィに最適
  • em — 親要素のフォントサイズに対する相対値。コンポーネントスコープのサイズ設定に便利
  • pt — 印刷単位（1pt = 1/72インチ）。プリントスタイルシートで使用
  • vw / vh — ビューポートの幅・高さに対するパーセンテージ。CSS clamp()によるフルードタイポグラフィに適している
  • % — 親フォントサイズに対するパーセンテージ。font-sizeに使用した場合はemと同等

よくある質問

What is the difference between px and rem?
px (pixel) is an absolute unit — 16px is always 16 pixels regardless of context. rem (root em) is relative to the root element's font size, which defaults to 16px in browsers. 1rem = 16px by default, 2rem = 32px. rem is preferred for font sizes in responsive design because users can scale their browser's base font size for accessibility.
When should I use rem vs em?
Use rem for global font sizes, spacing, and layout — it stays consistent relative to the root. Use em for component-specific sizing that should scale with the component's own font size, such as padding inside a button. For example, padding: 0.5em means 'half the button's font size', which scales correctly if you change the font size.
How do I convert px to rem?
Divide the px value by the root font size (usually 16px). For example: 24px ÷ 16 = 1.5rem. If you change the root font size to 18px, then 1rem = 18px and 1.5rem = 27px. This calculator lets you set any base font size for accurate conversion.
What is the difference between vw/vh and %?
vw (viewport width) and vh (viewport height) are relative to the browser viewport dimensions. 1vw = 1% of the viewport width. % is relative to the parent element's value for that property. For font-size, 100% = the parent's font size. vw/vh units do not depend on the parent element and always refer to the browser window.
What is pt and when is it used?
pt (point) is a print unit: 1pt = 1/72 inch. At the standard screen resolution of 96 DPI, 1px = 0.75pt, so 16px = 12pt. Points are mainly used in print stylesheets (@media print), word processors, and PDF generation. For web typography, use px or rem instead.

関連ツール