Convert px, em, rem, pt and % with a configurable base font size — full equivalence table in your browser.
CSS measures length in several units that all end up as pixels on screen, and converting between them by hand is a daily annoyance in front-end work. This converter takes one value — in px, em, rem, pt or percent — and shows the same length in all five units at once, using a base font size you control. The default base is 16 px, the initial font size in every major browser, but if your design system sets html { font-size: 62.5% } or any other root size, change the base and the whole table adapts.
The relationships are linear and the tool shows the formulas it applies: em and rem values are multiplied by the base font size to get pixels, points are converted at the CSS-defined ratio of 96 px per 72 pt (so 1 pt = 1.333 px), and percentages are read relative to the base, exactly like em. One honest caveat the tool states on screen: em and rem produce identical results here because a single base is used for both. In a real page they differ — rem always refers to the root element, while em refers to the font size of the current element, which may itself be scaled by its parents.
Typical uses: translating a designer handoff in pixels into the rem values your codebase standardizes on, checking what 0.875 rem works out to before writing a media query, converting print-oriented pt sizes from a style guide into screen units, or setting accessible type scales that respect the user browser settings. The conversion runs 100% in your browser as you type — nothing is uploaded, and there is nothing to install.
px = em × base; px = rem × base; px = pt × 96 ÷ 72; px = % ÷ 100 × base. Inverse: em = rem = px ÷ base; pt = px × 72 ÷ 96; % = px ÷ base × 100. With the default base of 16 px: 1.5 em = 24 px = 18 pt = 150%.
rem is always relative to the root (html) font size, while em is relative to the font size of the current element, which inherits and compounds through the tree. This converter uses one base for both, so the numbers match here; in nested elements they can diverge.
Because every major browser ships with an initial font size of 16 px, so 1 rem = 16 px on an untouched page. If your CSS changes the root size — the popular 62.5% trick makes 1 rem = 10 px — set that value in the base field.
Multiply by 72 and divide by 96: CSS fixes the ratio at 96 px per inch and 72 pt per inch, so 16 px = 12 pt. The pt unit matters mostly for print stylesheets and documents.
rem is generally recommended for typography because it scales when users change their preferred browser font size, which px ignores. px remains fine for things that should not scale with text, like borders or shadows.
No. The conversion is a handful of multiplications done in JavaScript on your device — nothing is sent to any server or stored anywhere.
Vai.la turns any URL into a short link with click statistics, QR Code and your own biolink.
Vai.la is not responsible for how the tools are used or for decisions made based on their results.