CSS Units Converter
DPI/PPI Converter
Common CSS Unit Conversions
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.