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.

Deriving the per-axis DPI from a diagonal spec

Screen marketing specifies the diagonal in inches (a 15.6-in laptop), but the calculator wants a per-axis density. The derivation chains the Pythagorean theorem with the integer pixel grid. For a screen of pixel resolution (w_px, h_px) and diagonal D inches, the physical width and height in inches satisfy w_in² + h_in² = D². If pixels are square — which every flat-panel display since the early 2000s assumes — then w_in / h_in = w_px / h_px. Solving the two constraints for w_in gives:

w_in = D × w_px / √(w_px² + h_px²)
DPI = w_px / w_in = √(w_px² + h_px²) / D

That diagonal-pixel form is what the calculator ships. For a 2560 × 1440 display on a 27-inch monitor: √(2560² + 1440²) ≈ 2938 pixels diagonal, divided by 27 inches, gives 108.8 PPI. The per-axis values are identical for square pixels, so horizontal and vertical density agree. Non-square pixel cases (some legacy SD video formats, projector hardware scaling) require separate w and h inputs and break the diagonal-only shortcut.

Sources & references

Euclid’s GCD algorithm (Elements, Book VII) is the primary citation for aspect-ratio reduction. CSS resolution units, including the relationship between dppx and dpi, are in the W3C CSS Values Level 4 spec. ISO 216 defines the √2-based A-series paper sizes that anchor several DPI presets. The “retina-threshold” PPI figures derive from Apple’s 2010 iPhone 4 announcement and subsequent peer review of the “1 arc-minute” visual-acuity threshold (Snellen 20/20). See the Sources block below.

Assumptions & limitations

• Integer pixel inputs only. Sub-pixel measurements (1920.5 × 1080.3) are rounded to nearest integer before GCD reduction. The aspect ratio answer is for the rounded grid, not the floating-point source.
• Square pixels assumed. Modern flat panels are square-pixel; some legacy NTSC / PAL content and projector hardware scaling have rectangular pixels and would need per-axis DPI inputs.
• Diagonal-inch input ignores bezel.The 15.6-in laptop figure refers to the active display diagonal. If you measure the chassis you’ll get a DPI ~5-10% lower than the actual screen DPI.
• No automatic DPR-to-DPI bridge.CSS pixels and device pixels are related by the browser’swindow.devicePixelRatio; the calculator operates on physical pixels and leaves the conversion to the user.
• Ratio display cap at 1000:1000. Ratios that reduce to terms above 1000 (e.g. 2.39:1 cinema) are displayed as decimals, which can confuse downstream tooling that expects integer pairs.
• No DPI handling for tiled / multi-monitor configurations. The calculator works one screen at a time.

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.