NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
Aspect ratioColoursContrastCSSCSS unitsPalette

CSS Unit Converter

px, rem, em, vw and percent.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

Sizes the relative units depend on

Common sizes

pxrememptvw%

CSS fixes 1 inch at 96 pixels, so 1pt is 1.333px and 1cm is 37.8px on screen whatever the monitor. rem follows the root font size, em and percent font sizes follow the parent element, and vw and vh are one hundredth of the viewport width and height.

How to use it

  1. Enter a value and choose the unit it is in.
  2. Set the root and parent font sizes and the viewport size if yours differ from the defaults of 16px and 1440 by 900.
  3. Read the value in every other unit and press Copy next to the one you need. The table below lists common sizes.

Questions

What is the difference between rem and em?

rem is relative to the root font size, set on the html element, so 1rem is the same everywhere on the page. em is relative to the font size of the element's parent, so it compounds when elements are nested.

How many pixels is 1rem?

16px in every major browser by default. If a reader raises the default font size in their browser settings, rem values grow with it, which is why rem is preferred for font sizes.

Are cm and inches real sizes on screen?

No. CSS defines 1 inch as 96 pixels, and screens differ in pixel density, so a CSS centimetre is rarely a real centimetre on a monitor. Physical units are meant for print style sheets.

What does percent mean in CSS?

It depends on the property. For font size it is a share of the parent font size; for width it is a share of the containing block's width. Choose which one under the settings.

About this tool

About the CSS unit converter

Design files are measured in pixels, but good CSS often uses relative units so layouts respect the reader's font settings and screen size. Enter a value in one unit and read it in all the others, then copy the one you need. A table lists the common sizes for quick reference.

The settings that matter

Relative units depend on context, so set them to match your project:

  • Root font size, 16px by default in every major browser, which is what rem is based on.
  • Parent font size, for em and percentage font sizes.
  • Viewport size, 1440 by 900 by default, for vw and vh.

rem or em?

rem follows the root font size, so 1rem is the same everywhere on the page. em follows the parent element's font size and compounds when elements are nested. rem is usually preferred for font sizes because it grows when a reader raises the default size in their browser.

Physical units

CSS fixes 1 inch at 96 pixels, so 1pt is 1.333px and 1cm is 37.8px, whatever the monitor. Because screens differ in pixel density, a CSS centimetre is rarely a real centimetre on screen; physical units are meant for print stylesheets.

The calculations run in your browser.

Related tools