CSS Unit Converter(px・rem・em・pt変換)

How to Use the CSS Unit Converter

This free online CSS unit converter converts between pixels (px), root em (rem), em, and points (pt) instantly in your browser. Set your root font-size (16px by default, which matches the browser default), enter a value with its unit, and see the equivalent value in all four units at once. A reference table below shows common sizes at a glance.

rem vs. em: What Is the Difference?

rem(root em) is always relative to the font-size of the document's root element (html), so its value stays consistent no matter how deeply an element is nested. em is relative to the font-size of the element it is applied to (or its parent, depending on the property), which means the same 1.5em can resolve to different pixel values in different parts of a page if nested elements change font-size along the way. Because this tool only accepts a single base font-size, it calculates em the same way as rem — this is accurate whenever the element in question has not had its own font-size changed by an ancestor, but you should verify against your actual CSS cascade for deeply nested components.

px to pt Conversion

The CSS specification defines a reference pixel at 96 pixels per inch, and a point is defined as 1/72 of an inch. That gives the fixed ratio 1px = 0.75pt (equivalently 1pt ≈ 1.333px), which this tool uses for px ⇄ pt conversion. This is useful when matching CSS sizes against print stylesheets or design specs that use points (common in PDF export and desktop publishing tools).

Why Use rem Instead of px?

Pixel values do not scale when a user increases their browser's default font size for accessibility, but rem and em values do. Using rem for font-size, spacing, and layout measurements is a widely recommended accessibility practice, since it respects user preferences while still giving designers precise, predictable control relative to a single root value.

CSS単位変換ツールの使い方

基準フォントサイズ(デフォルト16px)を設定し、変換したい値と単位(px/rem/em/pt)を入力すると、 4つの単位すべての換算値が同時に表示されます。下の一覧変換表では、よく使う8px〜96pxのサイズを rem・ptに換算した値をまとめて確認できます。全ての計算はブラウザ内で完結します。

よくある落とし穴と対処 / Common Pitfalls

コード例 / Code Examples

/* 基準フォントサイズ(root) */
html { font-size: 16px; }

/* 16px相当の指定方法いろいろ */
.a { font-size: 16px; }
.b { font-size: 1rem; }     /* 16px ÷ 16px = 1rem */
.c { font-size: 1em; }      /* 親のfont-sizeが16pxの場合 */
.d { font-size: 12pt; }     /* 12pt × (1 / 0.75) = 16px */

変換例 / Before & After

基準16px:
16px  = 1rem     = 1em     = 12pt
24px  = 1.5rem   = 1.5em   = 18pt
14px  = 0.875rem = 0.875em = 10.5pt

基準10px(62.5%リセット時):
16px  = 1.6rem
24px  = 2.4rem

Why browser-only?

Unit conversion is pure arithmetic with no need for a server round trip. This tool computes every value locally with plain JavaScript: no network request is made as you type, and it keeps working offline once the page has loaded. Check the DevTools Network tab to confirm nothing is sent anywhere.

単位変換は純粋な計算処理のためサーバー通信が不要です。本ツールは全ての計算をブラウザ内の JavaScriptで完結させており、入力内容が外部に送信されることはありません。