Computed pixel value: 16px
rem is relative to the root font size.
em and % are relative to the parent font size.
vh / vw are 1% of the viewport height/width.
pt is converted using the CSS standard 96px = 72pt.
About CSS Units Converter
CSS Units Converter translates between the size units CSS understands: pixels (`px`), root-relative ems (`rem`), parent-relative ems (`em`), percentages (`%`), viewport height and width units (`vh` / `vw`), and points (`pt`). Type a value in any field; the others update simultaneously. The base font size (default 16px) and viewport size (default 1280×720) are configurable so the relative units reflect your real environment.
Reach for it whenever a design hands you one unit and your CSS uses another: 24px in a Figma export when your stylesheet is rem-based, a 5vh hero height that needs an absolute pixel sanity check on a 1080p screen, or a 12pt print value that needs converting for screen output. Number Base Converter is for *integer base* conversion (binary / hex / decimal); Color Picker is for *colour* format conversion. This tool is the dimension-unit equivalent — different problem space, same simultaneous-conversion idiom.
Examples
16px (root font-size: 16px, viewport: 1280x720)rem: 1
em: 1
%: 100
vh: 2.222
vw: 1.25
pt: 12All units relative to the same 16px value. Tweak the root font-size or viewport size in the options to match your real environment.
Frequently asked questions
What is the difference between rem and em?
`rem` is relative to the *root* font-size (the `<html>` element). `em` is relative to the *parent* element's font-size. `rem` is predictable and recommended for layout values; `em` is useful when sizing things relative to their container's text size (padding inside a button, for example).
Why does my viewport setting matter?
`vh` and `vw` are 1% of the viewport's height and width, so they depend on viewport dimensions. The default 1280×720 is a typical desktop; switch to 375×812 for iPhone, 768×1024 for iPad, or your actual target to see the values your users will see.
When should I use pt?
Print contexts. `pt` (1/72 of an inch) is meaningful for printed PDFs and physical layout, and is the unit Microsoft Word and other word processors use. For screen-only CSS, prefer `px` or `rem` — `pt` works but is unusual.
Are there units this tool does not cover?
Less-common ones: `cm`, `mm`, `in` (physical units, mostly for print), `ch` (character width), `ex` (x-height), `vmin`, `vmax`, and `dvh` / `svh` (dynamic viewport units). Add them if your project needs them; the seven covered are the ones most CSS uses day to day.