CSS Units Converter
Convert between all 18 CSS units instantly - px, pt, pc, cm, mm, in, q, rem, em, %, vw, vh, vmin, vmax, ch, ex, lh, and rlh. Configure root font size, parent font size, and viewport dimensions for accurate conversions. Results update automatically and are organized by category (Absolute, Font-Relative, Viewport). Completely free, no signup required.
Absolute Units
Font-Relative Units
Viewport Units
width: 16px; (=16px)Reference Table - Common Values(root: 16px, viewport: 1920px)
| px | rem | em | % | vw | pt | cm | in |
|---|---|---|---|---|---|---|---|
| 1 | 0.063 | 0.063 | 6.250 | 0.052 | 0.750 | 0.026 | 0.0104 |
| 2 | 0.125 | 0.125 | 12.500 | 0.104 | 1.500 | 0.053 | 0.0208 |
| 4 | 0.250 | 0.250 | 25 | 0.208 | 3 | 0.106 | 0.0417 |
| 8 | 0.500 | 0.500 | 50 | 0.417 | 6 | 0.212 | 0.0833 |
| 10 | 0.625 | 0.625 | 62.500 | 0.521 | 7.500 | 0.265 | 0.1042 |
| 12 | 0.750 | 0.750 | 75 | 0.625 | 9 | 0.317 | 0.1250 |
| 14 | 0.875 | 0.875 | 87.500 | 0.729 | 10.500 | 0.370 | 0.1458 |
| 16 | 1 | 1 | 100 | 0.833 | 12 | 0.423 | 0.1667 |
| 18 | 1.125 | 1.125 | 112.500 | 0.938 | 13.500 | 0.476 | 0.1875 |
| 20 | 1.250 | 1.250 | 125 | 1.042 | 15 | 0.529 | 0.2083 |
| 24 | 1.500 | 1.500 | 150 | 1.250 | 18 | 0.635 | 0.2500 |
Why Use Our CSS Units Converter?
Instant 18-Unit Conversion
Convert any CSS unit value to all 18 supported units instantly - px, pt, pc, cm, mm, in, q, rem, em, %, vw, vh, vmin, vmax, ch, ex, lh, and rlh. Our CSS units converter shows every result simultaneously in a clean category grid, with zero waiting.
Configurable Base Values
Set root font size, parent font size, viewport width, and viewport height to match your project context. Choose from common presets (375px iPhone to 2560px QHD) or enter custom values. All conversions update instantly when you change any setting.
100% Browser-Based Privacy
All CSS unit conversions happen locally in your browser. Your values and settings never leave your device - completely safe for proprietary projects and design systems. No server uploads, no data retention, no tracking.
Free & No Limits
Convert unlimited CSS units with no signup, no subscription, and no usage caps. Our CSS units converter is completely free forever with no premium features locked behind a paywall.
Common Use Cases for CSS Units Converter
Responsive CSS Development
Convert px to rem or em for accessible, scalable typography. Use our CSS units converter to translate pixel-perfect mockups into relative CSS units that respect user font-size preferences and improve accessibility for visually impaired users.
Print Stylesheet Authoring
Convert screen pixels to print-friendly units like cm, mm, pt, pc, and in for print stylesheets. Our CSS units converter helps you translate your web designs into accurate physical dimensions for PDF generation and print layouts.
Responsive Design & Viewport Units
Convert vw and vh values to pixels for specific viewport sizes, or find the correct vw value to achieve a target pixel size at a given screen width. Essential for building fluid typography and responsive layouts without media queries.
Email HTML Development
Convert units for email HTML where pt is the standard for font sizes. Our CSS units converter helps email developers translate design specs into email-safe units that render consistently across Outlook, Gmail, and Apple Mail.
Design-to-Development Handoff
Convert Figma or Sketch pixel measurements into CSS units during design handoff. Use our CSS units converter to translate 24px headings to 1.5rem, 16px body to 1rem, or any other unit combination your project requires.
Presentation & Document Design
Convert between pt and px for presentation software, document design, and publication layouts. Print designers transitioning to web can use our CSS units converter to understand how familiar print units map to digital CSS pixels.
Understanding CSS Units
What are CSS Units?
CSS units define the size and measurement of elements on a web page. They fall into four main categories: absolute units (px, pt, pc, cm, mm, in, q) that have fixed physical sizes, font-relative units (em, rem, %, ch, ex, lh, rlh) that scale with typography, viewport units (vw, vh, vmin, vmax) that scale with the browser window, and percentage that scales with the parent element. Our CSS units converter supports all 18 units and instantly shows you equivalent values across every category.
How Our CSS Units Converter Works
- Enter your value and select the source unit:Type any number and choose the unit you're converting from. You can start with any of the 18 supported CSS units - px, pt, pc, cm, mm, in, q, rem, em, %, vw, vh, vmin, vmax, ch, ex, lh, or rlh.
- Configure context-dependent settings: Set the root font size (for rem, rlh), parent font size (for em, %, ch, ex), viewport width (for vw, vmin, vmax), and viewport height (for vh, vmin, vmax). Choose from common presets or enter custom values. The results update automatically as you adjust any setting.
- Read the instant results: See the converted value in all 18 units organized by category (Absolute, Font-Relative, Viewport). Click any result card to set it as the new input for further conversion. Copy individual values or the CSS output with one click.
Key Unit Categories Explained
- Absolute units have fixed physical sizes defined by the CSS reference pixel ratio (96 DPI).
1in = 96px,1cm ≈ 37.8px,1pt = 1/72in. These are best for print stylesheets and when exact physical dimensions are required. - Font-relative units scale with typography settings. Use
remfor root-relative sizing,emfor parent-relative sizing, and%as an alternative to em. Values forchandexare approximate (based on 0.5× the font size), whilelhandrlhassume the default line-height of 1.2. - Viewport units scale with the browser window dimensions.
1vw = 1% of viewport width,1vh = 1% of viewport height,vminuses the smaller dimension andvmaxuses the larger. Set your target viewport size to get accurate pixel equivalents.
Accuracy & Limitations
All absolute unit conversions in our CSS units converter are mathematically precise based on the CSS reference pixel ratio (1in = 96px). Font-relative units (ch, ex, lh, rlh) use standard approximations: ch and ex are estimated at 0.5× the font size, lh at 1.2× the parent font size, and rlh at 1.2× the root font size. Actual rendered values depend on the specific font face and browser. For pixel-perfect work, always verify with your actual typography in the target browser.
Related Tools
Color Picker & Converter
Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output - free online color picker converter.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database - free online color name finder.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components - live preview, HEX and RGB input. Free online color contrast checker.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors - enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.
Frequently Asked Questions About CSS Units Converter
A CSS units converter is a tool that converts measurement values between different CSS units. Our CSS units converter supports 18 units across four categories: absolute (px, pt, pc, cm, mm, in, q), font-relative (rem, em, %, ch, ex, lh, rlh), and viewport (vw, vh, vmin, vmax). Enter any value and see the equivalent in all units instantly, with configurable base settings.
Our CSS units converter supports 18 units: px, pt, pc, cm, mm, in, q (absolute), rem, em, %, ch, ex, lh, rlh (font-relative), and vw, vh, vmin, vmax (viewport). This covers all commonly used CSS units as well as less common ones like q (quarter-millimeter), ch, ex, lh, and rlh.
Select px as the input unit, enter your pixel value, and read the rem result from the Font-Relative Units section. The conversion uses the formula: rem = px / root font size. With the default root of 16px, 16px = 1rem, 24px = 1.5rem, 32px = 2rem. You can adjust the root font size to match your project.
rem (root em) is relative to the root (<html>) font size and ignores parent elements, making it predictable and easy to maintain. em is relative to the parent element's font size, so it can compound - a 2em heading inside a 1.5em container would be 3em relative to the root. Our CSS units converter shows both values simultaneously so you can compare.
1vw equals 1% of the viewport width. Our CSS units converter uses the viewport width setting to calculate pixel equivalents. For example, at 1920px wide, 10vw = 192px. At 375px (iPhone), 10vw = 37.5px. Use presets for common device widths or enter a custom value for accurate conversion at your target viewport size.
These are approximate conversions because the actual values depend on the specific font face. Our CSS units converter uses standard approximations: ch and ex are estimated at 50% of the font size (a common average), lh assumes a default line-height of 1.2, and rlh assumes a root line-height of 1.2. For critical measurements, verify the values with your actual font in the browser.
The q unit represents a quarter-millimeter (1q = 0.25mm). It is primarily used in Japanese CSS layout specifications and high-precision print design. While rarely used in web development, our CSS units converter includes it for completeness and for users working with international design standards.
Select the font-relative unit (e.g., rem) as the input unit, enter your value, and read the px result from the Absolute Units section. Click the px card to instantly swap that value to the input for further conversion. This chaining feature makes it easy to go from rem → px → cm → pt in a few clicks.
Yes. Our CSS units converter is 100% free with no signup required, no premium features, and no usage limits. Convert unlimited CSS unit values without any restrictions. All processing happens locally in your browser.