CSS Unit Converter

Introduction

Responsive work constantly forces unit conversions: a design arrives in pt, the codebase uses rem, and viewport sizing wants vw. Mental arithmetic easily mixes up the root font size with the parent font size. This page does one job, normalising any source unit into px and then writing out all six equivalents.

The example enters 2 rem with a 16 px root, a 1440×900 viewport and a 16 px parent font. That normalises to 32 px, which is 2 rem, 2 em, 24 pt, 2.2222 vw and 3.5556 vh. Change the parent font to 20 px and px and em move together while rem stays put, because rem only follows the root.

Percent here means a share of the parent font size, which is not the same as width:50% resolving against a containing block. Check which one you need before using that option.

Key features

• Six outputs: px, rem, em, pt, vw and vh are all returned from one input.
• Root size: rem and em depend on the root font size you enter, 16 px by default.
• Percent basis: Percent is treated as a fraction of the parent size, so 100% equals one parent font.
• Viewport units: vw and vh use the viewport dimensions. The parent element plays no part.
• Point conversion: pt converts to px at 96 dpi. Print workflows may use a different convention.
• Keeps sign: Negative values are accepted. Only the scale changes, never the sign.

How to use it

1. Value: Enter the number to convert. Negatives are allowed and the sign carries through to all six results.
2. Source unit: Pick the unit it is in now, such as pt, rem, em or vw. A wrong choice here throws off every output.
3. Root font size: Enter the html root font size, 16 px by default. rem follows this value and ignores the parent font.
4. Viewport width, Viewport height: Use the screen you are designing for; vw and vh come from these. Parent font size affects em and percent only.
5. Read all six: Press Calculate for px, rem, em, pt, vw and vh at once. Changing the parent font leaves rem alone, which is a handy check.

Things to keep in mind

• Root size basis: rem and em depend on the root font size you enter, 16 px by default.
• Percent basis: Percent is a fraction of the parent size; 100% equals one parent font.
• Viewport units: vw and vh use the viewport, not the parent.
• Points: pt converts to px at 96 dpi; print workflows may differ.
• Negative values: Negative values keep their sign.

Percent in the source dropdown means a share of the parent font size, so 100 percent resolves to one parent font. That is not how width:50 percent behaves in CSS, where the containing block is the reference. Check which meaning you need before choosing it. Changing the root font moves rem and px together while em follows the parent, a useful way to catch a mislabelled source unit.

A value of 2 rem with a 16 px root becomes 32 px, which is 2 em, 24 pt, 2.2222 vw and 3.5556 vh on a 1440 by 900 viewport. Raise the parent font to 20 px and px with em move together while rem does not. That split is deliberate: rem answers to the root, em to the parent, and vw and vh to the viewport alone.