Guides that stay close to the tools
Use these guides when you want to understand the reasoning behind the calculators before you commit a layout. Each guide links directly to the relevant tools.
Filter by title, description or tags using plain language.
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.
Choosing breakpoints that match real screens
Decide breakpoint sets based on actual devices, content and layout goals, not guesswork.
Type scale for the web without drama
Build a type scale that is easy to implement in CSS, matches your content and works across viewports.
iPhone 16 Pro & Max: Design Specs and Viewport Guide
Detailed breakdown of the iPhone 16 series for designers and developers.