Units & Rulers
Convert between every unit a designer actually measures in, and see a grid base at real proportion. Runs in your browser — no server call, no tracking.
Input
Click any result to load it as the new input.
Grid Base Practice
Every spacing decision — padding, margin, gap — should land on this grid.
The Metric System
Adopted by France's National Assembly in 1795 during the Revolution, replacing hundreds of regional French measures with one decimal, base-10 system. It's now the standard for nearly every country except the US, Liberia, and Myanmar — and the default for all print production outside North America.
Where the Point Came From
Pierre Fournier proposed the first fixed typographic point system in 1737. François-Ambroise Didot refined it in the 1770s into the Didot point, still used across continental Europe. The American Type Founders standardized a separate Anglo-American point (1886) at roughly 72.27pt/inch — later rounded to an exact 72pt/inch by Adobe for PostScript and, from there, CSS.
Why 96px = 1 Inch on Screen
96 pixels per CSS "reference inch" isn't a measurement of your actual screen — it's a fixed convention from the CSS2.1 specification (2011) so that a "1in" length behaves predictably across devices regardless of true pixel density. Your physical screen's real PPI (pixels per inch) is almost always a different number.
Why Base Units Matter
Design systems standardize on 4px or 8px because both divide cleanly into common screen densities (1x, 2x, 3x) without producing blurry sub-pixel values. Material Design uses 8dp increments; Apple's Human Interface Guidelines lean on optical balance around similar multiples. Picking one base and sticking to it is what makes spacing feel consistent rather than arbitrary.