# PX2REM.com - CSS Unit Converter

> A free online tool for converting CSS units (px, rem, em, inches) with guides on responsive sizing.

## Overview

PX2REM.com is a developer tool that instantly converts CSS units and explains when to use each unit. It also includes blog guides on responsive typography, layout, and pixel density.

## Core Features

### 1. PX to REM Converter
- Convert pixel values to rem units
- Formula: rem = px / base-font-size
- Default base font-size: 16px (customizable from 6px to 32px)
- Bidirectional: enter px or rem, get instant conversion

### 2. REM to PX Converter
- Convert rem values back to pixels
- Formula: px = rem * base-font-size
- Useful for understanding rem values in pixel terms

### 3. EM to PX Converter
- Convert em units to pixels
- EM is relative to parent element's font size
- Helpful for debugging nested em calculations

### 4. Inches to Pixels Converter
- Convert physical inches to screen pixels
- Formula: px = inches * PPI (pixels per inch)
- Default PPI: 96 (customizable: 72, 96, 120, 144, 150, 192, 300)
- Useful for print-to-web design and screen dimension calculations

### 5. Pixels to Inches Converter
- Convert screen pixels to physical inches
- Formula: inches = pixels / PPI
- Default PPI: 96 (customizable: 72, 96, 120, 144, 150, 192, 300)
- Essential for print design, physical mockups, and understanding actual screen dimensions

## Blog and Guides

- CSS REM vs PX: when to use which (Real UI Cases) - /blog/css-rem-vs-px/
- How Many Pixels Are in an Inch: px and in Explained with PPI/DPI - /blog/how-many-pixels-are-in-an-inch/
- Responsive Typography with rem + clamp(): Practical Patterns - /blog/responsive-typography-with-rem-and-clamp/
- Responsive Web Design: A Practical Guide (Patterns, Pitfalls, and Copy-Paste Snippets) - /blog/responsive-web-design-guide/

## Key Benefits

- Instant conversion as you type
- Bidirectional conversions for common units
- Custom base size support (6px to 32px)
- Conversion tables for quick reference
- No sign-up required
- Multi-language support (EN, ZH, DE, ES, IT, PT)
- Client-side processing for privacy

## Common Conversion Reference (16px base)

| Pixels | REM     | Use Case              |
|--------|---------|----------------------|
| 8px    | 0.5rem  | Small gaps, padding  |
| 12px   | 0.75rem | Small text, captions |
| 14px   | 0.875rem| Secondary text       |
| 16px   | 1rem    | Default body text    |
| 24px   | 1.5rem  | H3 headings          |
| 32px   | 2rem    | H2 headings          |
| 48px   | 3rem    | H1 headings          |

## When to Use REM vs PX

### Use REM for:
- Font sizes (always)
- Spacing (margin, padding)
- Component dimensions
- Scalable, accessible layouts

### Use PX for:
- Borders (1px should stay crisp)
- Box shadows
- Media query breakpoints

## Why REM Matters

REM units scale with the root font size. When users increase browser font size for accessibility, REM-based layouts adapt automatically. PX values stay fixed, ignoring user preferences.

## Technical Details

- Built with Astro + Svelte
- Styled with Tailwind CSS + DaisyUI
- Static site, no server-side processing
- All calculations happen client-side

## Common Inches to Pixels Reference (96 PPI)

| Inches | Pixels | Use Case                |
|--------|--------|------------------------|
| 0.5in  | 48px   | Small elements         |
| 1in    | 96px   | Standard web element   |
| 2in    | 192px  | Medium components      |
| 5in    | 480px  | Large sections         |
| 10in   | 960px  | Full-width containers  |

## Common Pixels to Inches Reference (96 PPI)

| Pixels | Inches | Use Case                |
|--------|--------|------------------------|
| 96px   | 1in    | Standard web element   |
| 480px  | 5in    | Medium sections        |
| 960px  | 10in   | Full-width containers  |
| 1920px | 20in   | HD width               |

## Links

- Homepage (PX to REM): /
- REM to PX: /rem-to-px/
- EM to PX: /em-to-px/
- Inches to PX: /in-to-px/
- PX to Inches: /px-to-in/
- Blog: /blog/
- About: /about/