Convert between CSS units: px, em, rem, pt, %, vw, and ch. Includes type scale ratios, quick reference table, and live size preview.
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.
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. Keep these notes focused on your operational context. Tie the context to the calculator’s intended domain. Use this clarification to avoid ambiguous interpretation.
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_size
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.
| 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 |
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.
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.
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.