Converters

CSS Unit Converter

Convert px, rem, em and pt values.

Input
CSS input
Output
Result
Options

Browsers default to 16.

About this tool

Converting px to rem is the routine arithmetic of responsive CSS, and the reason to do it is accessibility: a rem value scales with the user's chosen base font size, while a px value ignores it entirely. Someone who has increased their default font size gets larger text with rem and unchanged text with px.

Paste as many values as you like, one per line, and each is converted with the arithmetic shown alongside it, so you can check the result rather than trust it. The base font size is configurable because the 16px default only holds until a stylesheet changes it, and if it has been changed, every conversion that assumed 16 is wrong.

How to use it

  1. Paste or upload your cssDrop a file onto the input pane, use the file picker, or paste the text directly.
  2. Adjust the options if neededThe defaults suit most input; open Options to change the behaviour.
  3. ConvertPress Convert, or use Ctrl+Enter (Cmd+Enter on macOS).
  4. Copy or downloadCopy the result, or download it as a .css file.

Worked examples

Each example below is executed against this tool by the test suite, so what you see is what the tool actually produces.

Several values at once

Input

24px
14px
1.5rem

Output

24px → 1.5rem
14px → 0.875rem
1.5rem → 1.5rem

Against a 16px base. Each line keeps its own unit if one is given.

What to watch for

The details that decide whether a conversion is correct, and where information can be lost without any error being raised.

rem and em are relative to different things
This is the distinction that causes bugs. rem is always relative to the root element's font size, so 1.5rem means the same everywhere. em is relative to the current element's font size, so it compounds through nesting, three levels of 0.9em multiply to about 0.73. Conversions here assume the element font size equals the base, so em results only hold where that is true.
The 16px default, and the 10px trick
Browsers default to 16px, so 1rem is 16px unless changed. Some projects set html { font-size: 62.5% } to make 1rem equal 10px for easier arithmetic, set the base to 10 here if yours does. Note that this approach reduces the effective size for users who have configured a larger default.
pt is a print unit
CSS defines 1pt as 1/72 inch and assumes 96 CSS pixels per inch, so 12pt is exactly 16px. Use pt only in print stylesheets; for screen work it adds a conversion step with no benefit.
Where px is still correct
Not everything should be rem. Borders, hairlines and small fixed offsets are usually better in px, since a 1px border scaling to 1.5px just looks blurry. Font sizes, spacing and layout dimensions are where rem pays off.

Limitations

  • em conversions assume the element font size matches the base, which is not true inside nested scaling.
  • Does not handle viewport units, ch or ex, which depend on runtime layout or font metrics.
  • Processing happens in your browser, so very large inputs are bounded by available memory. Files above roughly 10 MB are handled but will feel slower, and multi-hundred-megabyte files are better suited to a command-line tool.

Questions

Should I use rem or em?
rem for almost everything, because it does not compound and stays predictable. em is useful when a value should scale with its own element, such as padding inside a button that tracks its font size.
Why convert to rem at all?
Accessibility. rem respects the user's chosen base font size; px overrides it, so text stays small for someone who needs it larger.
Should I convert border widths to rem?
Usually not. A 1px border scaled to a fractional value renders blurry. Keep hairlines in px and use rem for type and spacing.

Related tools

More CSS tools