px / rem / em / pt 変換ツール

rem units are relative to the root element's (html) computed font size, which defaults to 16 px in every browser but can be overridden by the user in their browser accessibility settings. Using rem respects this preference, meaning a user who has set their browser font size to 20 px for low-vision reasons will see all rem-based text scaled proportionally. WCAG 2.1 SC 1.4.4 (Resize Text) requires that text can be resized up to 200 % without loss of content; rem-based layouts satisfy this automatically whereas px-based layouts require explicit media queries.

Setting html { font-size: 62.5%; } makes the root font size 10 px (62.5 % of 16 px), so that 1.6 rem equals 16 px, 2.4 rem equals 24 px, and so on—making rem arithmetic as intuitive as px. This technique is popular because it simplifies mental math when converting design specs in px to rem in CSS. However, it overrides the user's browser font size setting relative to 10 px instead of 16 px, potentially reducing type at the user's preferred scale. A safer modern alternative is to keep the root at 16 px and use a CSS custom property (--base: 16) to document the assumed base.

em units are relative to the computed font size of the element itself (or the nearest ancestor that sets font-size), making them useful for components that must scale proportionally with their own text—such as padding on a button (padding: 0.5em 1em scales with the button's font size), margins on inline elements, or nested lists where indentation should grow with text size. For global sizes that should be consistent across the page (headings, body, captions), rem is preferable because it avoids the compounding inheritance problem: an em inside an em inside an em multiplies the font sizes together.

CSS points (pt) are defined as 1/72 of an inch, a unit inherited from PostScript printing. At standard screen resolution, 1 px is not equal to 1 pt. However, browsers define 1 inch as exactly 96 px for CSS purposes, making 1 pt = 96/72 = 1.333... px, or equivalently 1 px ≈ 0.75 pt. To convert px to pt, multiply by 0.75. For print stylesheets declared with @media print, it is common to express font sizes in pt because print designers think in those units, and browsers faithfully map them to physical points on paper.

The vh unit (1 % of the viewport height) is rarely used for font sizes because viewport height changes erratically on mobile devices as browser chrome appears and disappears during scrolling. Text sized in vh can jump noticeably when the URL bar hides, causing CLS. CSS introduced svh (small viewport height, based on the smallest possible height with browser chrome visible) and dvh (dynamic viewport height) as more predictable alternatives. For font sizes, vw and viewport-width-based fluid type are strongly preferred over any height-based unit.