Tools for layout clarity
Every calculator focuses on a single job and gives you copyable outputs you can paste into your design file or codebase. No sign-up required—just open, calculate, and go.
Filter by title, description or tags using plain language.
Screen size and layout simulator
LayoutTurn diagonal inches, resolution and device pixel ratio into real viewport sizes and layout guidance.
Viewport and DPR calculator
ViewportConvert physical pixels and device pixel ratio into CSS viewport width and height with clear examples.
PPI calculator for screens
DensityCalculate pixels per inch, pixels per centimetre and physical size for interface and print work.
Safe area CSS helper
Safe areasTurn platform insets into safe area aware padding snippets with env variables and sensible fallbacks.
REM to PX and type scale helper
TypographyConvert rem values to pixels and generate a simple type scale based on your base font size.
Aspect ratio helper
LayoutSimplify ratios, match target sizes and work with common aspect ratios for components and layouts.
BMI Calculator
HealthCalculate your Body Mass Index with metric or imperial units. Get instant BMI category classification.
PX to EM Converter
CSS UnitsConvert pixels to em units for responsive CSS. Instant conversion with customizable base font size.
EM to PX Converter
CSS UnitsConvert em units to pixels for CSS. Calculate exact pixel values from relative em measurements.
PX to Percentage Converter
CSS UnitsConvert pixels to percentage for fluid, responsive layouts. Calculate percentage widths from pixel values.
Percentage to PX Converter
CSS UnitsConvert percentage values to pixels for CSS layouts. Calculate exact pixel widths from percentages.
Base Unit to PX Converter
Design SystemConvert design system base units to pixels. Works with 4px and 8px grid systems.
PX to Base Unit Converter
Design SystemConvert pixels to design system base units. Align measurements with 4px or 8px grid systems.
PX to Tailwind Converter
Tailwind CSSConvert pixels to Tailwind CSS spacing scale. Find exact or closest Tailwind spacing values.
Tailwind to PX Converter
Tailwind CSSConvert Tailwind CSS spacing values to pixels. Understand exact pixel sizes of Tailwind spacing scale.
Golden Ratio Calculator
DesignCalculate golden ratio proportions for design. Get larger and smaller values using phi (approximately 1.618).