Clarify turns specs into layout clarity.
You work with diagonals, resolutions and device pixel ratios every week. Clarify turns that noise into sizes, grids and type that you can trust in code.
- Built for real devices
- All calculators start from physical screens, not made up breakpoints.
- Shareable results
- Every tool supports copyable summaries and URLs that keep inputs.
- Clear writing
- Guides stay close to code and numbers so you can move from reading to shipping.
From spec to layout in one view
Pick a device, read the real viewport in CSS pixels, then decide columns and content widths right there. No spreadsheets, no guesswork.
Diagonal
6.1 in
Resolution
1179 × 2556 px
Viewport
393 × 852 CSS px
Suggested grid
8 columns, 16 px gutter
Enough to pick a card width, body size and breakpoint without digging through docs.
Core tools
The calculators you are likely to pin first in your bookmarks.
Screen size and layout simulator
Turn diagonal inches, resolution and device pixel ratio into real viewport sizes and layout guidance.
Viewport and DPR calculator
Convert physical pixels and device pixel ratio into CSS viewport width and height with clear examples.
PPI calculator for screens
Calculate pixels per inch, pixels per centimetre and physical size for interface and print work.
Guides that stay close to code
Short reads that link back to the calculators at the exact point you need them.
What is PPI and how to use it in interface design
A practical guide to pixels per inch for designing crisp interfaces and knowing when density matters.
CSS viewport explained for real projects
Understand how CSS viewports work, how DPR fits in and how to make layout decisions with confidence.
Safe areas explained for modern devices
Learn how notches, home indicators and insets affect your layout and how to handle them with CSS.