Screen Units Converter

Convert between px, rem, em, DPI, PPI, and more screen units

Screen Units Converter
Use the fields below to calculate results or convert units for this tool.

CSS Units Converter

DPI/PPI Converter

Common CSS Unit Conversions

16px = 1rem
Base font size
24px = 1.5rem
Large text
32px = 2rem
Heading
48px = 3rem
Large heading

CSS Units Explained

px: Absolute unit, fixed pixel size

rem: Relative to root element font size

em: Relative to parent element font size

%: Relative to parent element

Screen Resolution

DPI: Dots per inch (print resolution)

PPI: Pixels per inch (screen resolution)

Standard screen DPI: 96 (Windows), 72 (Mac)

High-DPI displays: 192+ PPI

About Screen Units Conversion

Convert between different screen and web units including pixels, rem, em, DPI, and PPI. Essential for responsive web design, mobile development, and creating scalable user interfaces.

Frequently Asked Questions

What's the difference between px, em, and rem?

px are absolute pixels, em is relative to parent element font size, and rem is relative to root element font size. Use rem for consistent scaling, em for component-relative sizing, and px for precise control.

What is the standard base font size for web design?

The default browser font size is 16px, making 1rem = 16px. This is considered optimal for readability. Avoid changing the root font size unless necessary, as it affects accessibility tools.

How do DPI and PPI affect display quality?

Higher DPI/PPI means sharper images and text. Standard displays are 96 DPI, while "Retina" displays are 200+ DPI. High-DPI displays require responsive images and CSS media queries for optimal appearance.

When should I use viewport units (vw, vh)?

Viewport units are perfect for full-screen layouts, hero sections, and responsive typography. 1vw = 1% of viewport width, 1vh = 1% of viewport height. Be careful with mobile browsers that change viewport size.

How do I make text scale properly on mobile?

Use rem units for font sizes, set a proper viewport meta tag, and consider using clamp() for fluid typography. Test on actual devices, as mobile browsers handle scaling differently than desktop.

What's the difference between logical and physical pixels?

Logical pixels are CSS pixels used in code, while physical pixels are actual screen pixels. High-DPI displays have multiple physical pixels per logical pixel, controlled by the device pixel ratio.