rem
--
Free · Instant · No signup
Responsive Font Size rem/px Interconvertible Calculator
Convert a pixel size through a root px into rem, em, and a clamp() suggestion for fluid type.
Page updated 2026-09-04.
Calculator
Calculated Results
em (same parent as root)
--
One fixed size, converted to relative units and a fluid band
An 18px font size against a 16px root converts to 1.125rem (and equivalently 1.125em within a matching parent context), with a suggested fluid range of clamp(0.984rem, calc(1.125rem + 0.5vw), 1.406rem).
The rem conversion is simple division: 18 / 16 = 1.125rem -- rem units are always relative to the root (html element) font-size specifically, which is why changing the root size elsewhere would proportionally scale every rem-based measurement across the whole page, unlike em, which is relative to each element's own immediate parent.
The suggested clamp() band takes that 1.125rem value and builds a minimum (0.984rem, slightly smaller), a viewport-responsive middle formula, and a maximum (1.406rem, noticeably larger) around it -- letting the font size scale fluidly with viewport width between those two bounds, rather than staying perfectly fixed at 1.125rem on every screen size.
What makes this different from a simple unit converter
Different from PX to REM / EM Converter: this page also emits a clamp() band around the rem value. A basic px-to-rem converter would stop at the 1.125rem figure -- this tool goes further, using that value as the center point of a generated clamp() expression, giving you a ready-to-use fluid typography rule rather than just a fixed unit conversion.
The specific minimum and maximum bounds in the suggested clamp() aren't arbitrary -- they represent a reasonable range around the base rem value, intended as a sensible starting point that you can further adjust based on your specific design's actual minimum and maximum viewport widths.
Em and rem come out identical here (both 1.125) specifically because this calculation assumes the element's parent font-size matches the root font-size -- in a real page with nested elements at different font-sizes, em would be relative to whatever the immediate parent's actual size is, which could differ from the root.
Related typography and responsive-sizing tools
For the fuller context of a complete type scale this single size might belong to, the Typography Scale Calculator generates a related set of proportionally-sized steps.
For a more general-purpose clamp() calculation not tied to a specific font-size conversion, the CSS clamp() Font Calculator covers that broader case.
Frequently Asked Questions (FAQ)
How is 18px converted to 1.125rem?
rem = target pixel size / root font-size = 18 / 16 = 1.125rem. Since rem is always relative to the root (html element) font-size, this conversion holds regardless of where in the page the element sits.
Why do em and rem come out to the same value here?
Because this calculation assumes the element's immediate parent font-size matches the root font-size. In a real page with nested elements at varying font-sizes, em (relative to the immediate parent) could differ from rem (always relative to the root).
How is this different from a basic px-to-rem converter?
Different from PX to REM / EM Converter: this page also emits a clamp() band around the rem value. A basic converter would stop at the rem figure alone. This tool additionally generates a ready-to-use clamp() expression, building a fluid, viewport-responsive range around that base rem value rather than just a fixed unit conversion.
Are the suggested clamp() minimum and maximum values fixed rules, or a starting point?
They're a reasonable starting point centered around the base rem value, not a fixed universal rule -- adjust them further based on your specific design's actual minimum and maximum viewport widths and how much size variation you want.
What does the vw term inside the clamp() calc() actually do?
It ties part of the font size directly to viewport width, so the font smoothly scales up as the viewport gets wider (within the clamp's min/max bounds) rather than jumping abruptly at specific breakpoints the way traditional media-query-based sizing would.
You might also need
-
Text Banner ASCII Art Generator Map A-Z, 0-9, and spaces into a three-row block banner. Does not convert a photo to ASCII. -
Color Picker from Image Sample colors from a canvas image. -
Color Contrast Ratio Checker (WCAG 2.1 AA / AAA Compliance) Relative luminance contrast between two colors with WCAG 2.1 AA and AAA pass or fail for normal and large text. -
Hex Sample Mixer Deduplicate pasted hex samples and average them into a mix hex. Does not cluster image pixels.