Design methodology

The Design cluster ships two calculators — aspect ratio and DPI/PPI. Both are pure-math utilities every front-end developer and graphic designer reaches for a few times a week.

Aspect ratio — Euclid’s algorithm

Given width and height, the reduced aspect ratio is width:height divided by their greatest common divisor. We use Euclid’s algorithm (recursive GCD) on integer rounded inputs:

gcd(a, b) = b == 0 ? a : gcd(b, a mod b)
ratio = (w / gcd, h / gcd)

For 1920×1080, gcd(1920, 1080) = 120, so the reduced ratio is 16:9. For non-integer inputs (e.g. 1920.5×1080.3), we round to nearest integer before reducing — half-pixel measurements are noise from the source software, not a real aspect.

Scaling

The widget also supports the inverse — “give me a height for width X that matches my current ratio.” The formula is just newHeight = newWidth × h / w using the original (un-reduced) ratio so floating-point drift doesn’t accumulate.

Why not always reduce to lowest terms?

Some standard ratios reduce to less-readable numbers. The cinema ratio 2.39:1 is technically 239:100, which is the reduced form but harder to recognise. We display the reduced ratio when both terms are under 1000; for ratios that don’t reduce cleanly we display the decimal form (2.39:1).

DPI / PPI — pixels per physical unit

DPI (dots per inch) and PPI (pixels per inch) are interchangeable terms in practice — both measure pixel density per inch in print and screen contexts. The math:

DPI = √(w_px² + h_px²) / diagonal_inches

Diagonal is used because screens are specified by diagonal dimension (a “15-inch laptop” means a 15-inch diagonal display). Per-axis DPI is the same formula applied per axis; for square pixels (which all modern displays have), the two values are identical.

The retina question

Apple coined “retina” to describe displays where the pixel density exceeds the human eye’s ability to resolve individual pixels at typical viewing distance. The threshold:

• Phone (viewed at ~12 inches): 326 PPI
• Tablet (~15 inches): 264 PPI
• Laptop (~20 inches): 220 PPI
• Desktop monitor (~30 inches): 150 PPI
• TV (~10 feet): 50 PPI

These aren’t hard floors — the human eye varies, and the “typical viewing distance” assumption is the biggest variable. Modern phones run 400-500 PPI, comfortably above the threshold.

Why “CSS pixel” is different from “device pixel”

On a retina display, a 1×1 CSS pixel is actually 2×2 or 3×3 device pixels — the browser scales up to keep text readable at typical viewing distance. devicePixelRatio in the browser exposes this ratio. The DPI calculator operates on physical pixels; if you’re designing for CSS pixels specifically, divide the reported DPI by your target devicePixelRatio.