CSS Unit Converter — px, rem, em, pt, vw, vh
Convert between CSS units instantly. px to rem, em to px, pt to px, and more with configurable base font size.
How to Use
- Enter the numeric value you want to convert.
- Select the source unit (From) and the target unit (To).
- If you are working with
rem,em, or%, adjust the base font size to match your project's root font size. - If converting to or from
vworvh, set the viewport dimensions to match your target screen size. - The result appears instantly. Use the quick reference table below to see the value in all units at once.
Understanding CSS Units
CSS supports a wide range of units for specifying lengths, sizes, and spacing. Choosing the right unit affects how your layout responds to different screen sizes, user preferences, and device capabilities. Units fall into two broad categories: absolute and relative.
Absolute Units
px (Pixels) — The most common absolute unit in web development. One CSS pixel is defined as 1/96 of an inch, though on high-DPI screens a CSS pixel may correspond to multiple physical device pixels. Pixels are predictable and consistent, making them ideal for borders, shadows, and fixed-size elements.
pt (Points) — A traditional typographic unit where 1pt equals 1/72 of an inch. In CSS, 1pt is exactly 1.333px. Points are primarily useful in @media print stylesheets where you want sizes that correspond to physical print dimensions.
Relative Units
rem (Root EM) — Relative to the root element's font size. If the <html> element has a font size of 16px (the browser default), then 1rem = 16px. The key advantage of rem is consistency: it always references the same base value regardless of nesting depth. This makes it the preferred unit for font sizes, spacing, and component dimensions in modern CSS.
em — Relative to the font size of the element's parent. Unlike rem, em compounds when elements are nested. A 1.5em font size inside another 1.5em element results in text that is 1.5 × 1.5 = 2.25 times the base size. This compounding behavior makes em tricky to manage in deep component trees, which is why rem is generally preferred for layout.
% (Percentage) — Relative to the parent element's corresponding property. For font-size, 100% equals the parent's font size. For width, 100% equals the parent's width. Percentages are fundamental to fluid and responsive layouts.
vw (Viewport Width) — 1vw equals 1% of the viewport's width. If the viewport is 1920px wide, 1vw = 19.2px. Viewport units are powerful for creating layouts and typography that scale with the browser window, though they should be used carefully to avoid text becoming too small or too large on extreme screen sizes.
vh (Viewport Height) — 1vh equals 1% of the viewport's height. A common use case is height: 100vh for full-screen sections. Be aware that on mobile browsers, 100vh may not account for the address bar, which is why dvh (dynamic viewport height) was introduced in newer CSS specifications.
Best Practices for Responsive Design
Modern CSS best practice is to use rem for font sizes and spacing, percentages or flexbox/grid for layout widths, and px for fine details like borders and box shadows. This combination ensures your design scales with user preferences while maintaining precise control where it matters.
A popular technique is setting html { font-size: 62.5%; }, which changes the base to 10px. This makes rem calculations easier: 1.6rem = 16px, 2.4rem = 24px, and so on. If you use this approach, set the base font size to 10 in this converter for accurate results.
For responsive typography, the CSS clamp() function combined with viewport units provides fluid scaling: font-size: clamp(1rem, 2.5vw, 2rem) creates text that smoothly scales between a minimum of 1rem and a maximum of 2rem based on viewport width.
Common Conversion Reference
- 16px = 1rem = 1em = 12pt = 100% (at default base)
- 14px = 0.875rem = 10.5pt
- 18px = 1.125rem = 13.5pt
- 24px = 1.5rem = 18pt
- 32px = 2rem = 24pt
Accessibility and User Preferences
Using relative units like rem and em is not just a responsive design choice — it is an accessibility requirement. Users who have configured larger font sizes in their browser settings (common for those with low vision) will only benefit from those settings if your CSS uses relative units. Elements sized in px remain fixed regardless of user preferences, while elements sized in rem scale proportionally. The WCAG 2.1 Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality — relative units make this automatic.
Related Tools
Convert Tailwind CSS classes with the Tailwind CSS Converter. Minify your stylesheets with the CSS Minifier. Pick and convert colors between HEX, RGB, and HSL with the Color Picker. Format your CSS with the HTML Beautifier.
Frequently Asked Questions
- What is the difference between rem and em in CSS?
- rem (root em) is relative to the root element's font size (usually the <html> element, which defaults to 16px). em is relative to the font size of the parent element. In this converter, both use the base font size setting since there is no DOM context.
- How do I convert px to rem?
- Divide the pixel value by the base font size (usually 16px). For example, 24px / 16 = 1.5rem. This converter does the math for you automatically.
- What base font size should I use?
- The browser default is 16px, and most websites leave it unchanged. If your CSS sets a different font-size on the html or :root element, use that value instead.
- When should I use vw and vh units?
- vw (viewport width) and vh (viewport height) are useful for creating elements that scale with the browser window. Common uses include full-screen hero sections (100vh), responsive typography (clamp with vw), and fluid layouts.
- Why are rem units recommended for font sizes?
- rem units respect the user's browser font size preferences, making your site more accessible. If a user increases their default font size, rem-based text scales proportionally while px-based text stays fixed.
- How does the percentage (%) unit work in CSS?
- The % unit is relative to the parent element. For font-size, 100% equals the parent's font size. For width, 100% equals the parent's width. This converter uses the base font size as the reference for percentage calculations.
- What is a point (pt) in CSS?
- A point is a traditional typographic unit equal to 1/72 of an inch. In CSS, 1pt = 1.333px (or equivalently, 1px = 0.75pt). Points are primarily used in print stylesheets.
- Is the conversion between px and rem always the same?
- The conversion depends on the root font size. With the default 16px base, 1rem = 16px. If you change the root font size (e.g., html { font-size: 62.5%; }), then 1rem = 10px instead.
AI agent tools available.
The CodeTidy MCP Server gives Claude, Cursor, and other AI agents
access to 47 developer tools. One command: npx @codetidy/mcp