Capacitance Conversion Calculator
Convert capacitance between picofarads, nanofarads, microfarads, millifarads, and farads. Common capacitor presets, charge estimation, and reference table for electronic components.
PX to EM / REM Converter
Convert between CSS units: px, em, rem, pt, %, vw, and ch. Includes type scale ratios, quick reference table, and live size preview.
PX to EM / REM Converter
Browser default is 16px — used for rem
Used for em — inherits from parent element
For vw calculation (e.g. 1440 for desktop)
Pixels⧉
16.00px
Absolute screen pixels
EM⧉
1.0000em
Relative to parent (16px)
REM⧉
1.0000rem
Relative to root (16px)
Points⧉
12.00pt
1pt = 1.333px (print)
Percent⧉
100.00%
Relative to parent font size
Viewport Width⧉
1.1111vw
At 1440px viewport
ch⧉
2.00ch
Approx. width of '0' character
CSS snippet:
font-size: 1.0000rem; /* 16px at 16px root */
Quick PX ↔ REM Reference (base: 16px)
| PX | REM | EM (parent 16px) | PT |
|---|---|---|---|
| 8px | 0.5rem | 0.5em | 6pt |
| 10px | 0.625rem | 0.625em | 7.5pt |
| 11px | 0.6875rem | 0.6875em | 8.3pt |
| 12px | 0.75rem | 0.75em | 9pt |
| 13px | 0.8125rem | 0.8125em | 9.8pt |
| 14px | 0.875rem | 0.875em | 10.5pt |
| 16px | 1rem | 1em | 12pt |
| 18px | 1.125rem | 1.125em | 13.5pt |
| 20px | 1.25rem | 1.25em | 15pt |
| 24px | 1.5rem | 1.5em | 18pt |
| 28px | 1.75rem | 1.75em | 21pt |
| 32px | 2rem | 2em | 24pt |
| 36px | 2.25rem | 2.25em | 27pt |
| 40px | 2.5rem | 2.5em | 30pt |
| 48px | 3rem | 3em | 36pt |
| 56px | 3.5rem | 3.5em | 42pt |
| 64px | 4rem | 4em | 48pt |
| 72px | 4.5rem | 4.5em | 54pt |
| 80px | 5rem | 5em | 60pt |
| 96px | 6rem | 6em | 72pt |
Type Scale Ratios
| Scale | Ratio | h4 | h3 | h2 | h1 |
|---|---|---|---|---|---|
| Minor Second | 1.067 | 17px | 18px | 19px | 21px |
| Major Second | 1.125 | 18px | 20px | 23px | 26px |
| Minor Third | 1.2 | 19px | 23px | 28px | 33px |
| Major Third | 1.25 | 20px | 25px | 31px | 39px |
| Perfect Fourth | 1.333 | 21px | 28px | 38px | 51px |
| Augmented Fourth | 1.414 | 23px | 32px | 45px | 64px |
| Perfect Fifth | 1.5 | 24px | 36px | 54px | 81px |
| Golden Ratio | 1.618 | 26px | 42px | 68px | 110px |
Size Preview
The quick brown fox jumps over the lazy dog
Rendered at 16.0px (1.000rem)
Planning notes, formulas, and examples
About the PX to EM / REM Converter
CSS offers multiple unit systems for sizing — pixels (px) for absolute sizing, em for parent-relative sizing, rem for root-relative sizing, vw for viewport-relative sizing, and more. Choosing the right unit affects accessibility, responsiveness, and maintainability. The most common pain point is converting between px (what designers specify) and rem/em (what accessible CSS should use).
This converter handles all major CSS length units with full context: base font size (for rem), parent font size (for em), and viewport width (for vw). It generates ready-to-paste CSS snippets, a comprehensive quick-reference table for the 20 most common sizes, a type scale ratio explorer for harmonious heading hierarchies, and a live text size preview.
If you're building responsive layouts, migrating a design system from px to rem, or simply need to know what 14px is in rem with an 18px base font, this calculator gives you instant answers with the surrounding context that designers and developers need.
When This Page Helps
Design tools give sizes in pixels, but modern CSS should use rem for accessibility. This converter bridges that gap with instant bidirectional conversion, contextual CSS snippets, and a comprehensive reference table — saving trips to your browser's dev tools. Use it when you're translating a design system to scalable CSS and need root, parent, and viewport context in one place.
How to Use the Inputs
- Select conversion direction: PX→EM/REM, EM→PX, or REM→PX.
- Enter your value or click a preset for common sizes.
- Set the root font size (default 16px) — this is the browser default used for rem.
- Set the parent font size if different from root — this is used for em calculations.
- Enter the viewport width for vw calculations (e.g. 1440 for desktop).
- Read all equivalent units, copy the CSS snippet, and use the reference tables.
- Explore type scale ratios to build harmonious heading hierarchies.
Formula used
rem = px ÷ root_font_size
em = px ÷ parent_font_size
pt = px × 0.75
% = (px ÷ parent_font_size) × 100
vw = (px ÷ viewport_width) × 100
Reverse: px = rem × root_font_size or px = em × parent_font_sizeExample Calculation
Result: 1.5rem = 1.5em
24px ÷ 16px = 1.5. With root and parent both at 16px, rem and em are equal. In points: 24 × 0.75 = 18pt.
Tips & Best Practices
- Set your CSS html { font-size: 100% } (not a px value) so rem respects the user's browser font size.
- For responsive typography, use clamp(): clamp(1rem, 2.5vw, 2rem) scales between 1rem and 2rem.
- A popular shortcut: set html { font-size: 62.5% } to make 1rem = 10px (for easy mental math), but this overrides user preferences.
- Em is useful for component-level scaling — padding: 0.5em scales proportionally when the component's font size changes.
- The "Perfect Fourth" scale (1.333) is the most commonly used type scale for web design.
CSS Unit Overview
| Unit | Relative to | Best for | |---|---|---| | px | Screen pixel | Borders, shadows, icons | | rem | Root font size | Font sizes, spacing, layout | | em | Parent font size | Component-internal spacing | | % | Parent dimension | Widths, fluid layouts | | vw/vh | Viewport | Full-bleed sections, hero text | | ch | "0" width | Input field widths |
Accessibility and rem
Users with low vision may increase their browser's default font size from 16px to 20px or more. Layouts sized in rem scale correctly; layouts in px do not. WCAG 2.1 Success Criterion 1.4.4 requires text to be resizable to 200% without loss of content — rem-based typography passes automatically.
Building a Type Scale
A type scale applies a consistent multiplier between heading levels. Starting from a 16px base with a Major Third ratio (1.25): body = 16px, h4 = 20px, h3 = 25px, h2 = 31.25px, h1 = 39px. This creates visual harmony similar to musical intervals — which is why the ratios are named after musical intervals.
Sources & Methodology
Last updated:
Frequently Asked Questions
rem is relative to the root (<html>) font size, em is relative to the parent element font size. rem is predictable everywhere; em compounds — 1.5em inside another 1.5em element gives 2.25× the root size.
16px in all modern browsers. If a user changes their browser font size setting, rem-based layouts scale accordingly — this is the main accessibility benefit of rem over px.
Use rem for font sizes and spacing to respect user accessibility preferences. Use px for borders, shadows, and other decorative elements where scaling is not desired.
A type scale uses a consistent ratio (like 1.25 — "Major Third") to mathematically derive heading sizes from the base font size: h4 = base × ratio, h3 = base × ratio², h2 = base × ratio³, etc.
ch is the width of the "0" character in the current font. It is commonly used to set input widths (e.g., width: 20ch for a 20-character input).
1vw = 1% of viewport width. A 1440px viewport makes 1vw = 14.4px. Be cautious with vw for fonts — use clamp() to set min/max sizes for accessibility.
More in this topic
CGS to SI Unit Converter
Convert between CGS and SI units for force, energy, pressure, viscosity, magnetic fields, and more. Covers dyne, erg, gauss, poise, stokes, barye, and all major CGS quantities.
CM to Height Conversion Calculator
Convert height between centimeters and feet & inches. Visual height bar, percentile estimation, preset heights, and a full reference table from 4'10" to 6'8".