Free 8pt Grid Generator

Why eight specifically. The usual explanation is screen densities: common device pixel ratios are 1×, 1.5×, 2×, 3× and 4×, and eight divides cleanly by two and four, so an 8-unit value stays a whole number of physical pixels at most scale factors. Four would too; sixteen would be too coarse.

That explanation is real but partial. A four-point base has the same divisibility and is used by some systems. The actual reason eight won is that it is coarse enough to constrain — an 8pt system offers 8, 16, 24, 32, 40 as its first five values, which is a small enough set to remember, where a 4pt system offers ten values in the same range and stops feeling like a constraint.

Which is why most 8pt systems keep a 4pt half-step for tight cases. Icon alignment, the space between a label and its input, dense table rows — all want something finer than 8, and the half-step gives it without opening the door to arbitrary values.

This overlay draws that structure directly. The major lines are at your chosen division and the minor lines sit halfway between them, stroked at 45% of the major weight. That weight difference is doing real work: a single-weight grid at double density tells you where the lines are but not which ones are the system.

There is a specific limit here that is better stated than discovered. The spacing is the short side divided by the division count, and the count runs 8 to 80. On a canvas whose short side is 640 pixels, 80 divisions gives exactly 8 pixels. On a 768px canvas the finest available step is 9.6 pixels; on 1080px it is 13.5; on 1440px it is 18.

The historical origin of the convention is more recent and more mundane than its ubiquity suggests. The 8pt spacing grid overlay page traces it, beside the rest of the typography grid overlays, and the modular grid generator handles the case where the spacing has to carry columns and rows too. Google's Material Design, published in 2014, specified an 8dp baseline grid and a 4dp sub-grid for iconography, and its scale of influence made that specific pair the default across the industry within a few years.

It was not new even then. Print typography has used unit-based vertical rhythm for as long as it has used leading, and the concept of setting everything to a multiple of the leading is standard practice in book work. The interface version is that idea applied in two dimensions.

What is different in the interface case is that the unit is horizontal as well as vertical. Print's vertical rhythm has no horizontal counterpart, because the horizontal is governed by the measure. An 8pt grid applies the same unit both ways, which is what makes it a spacing system rather than a rhythm.

That symmetry matters more than it looks. Vertical rhythm on one unit and horizontal spacing on another is extremely common in interfaces built without a system, and it produces a specific kind of wrongness that nobody can identify — everything is aligned but nothing feels related.

The most valuable use of an overlay like this is auditing rather than designing. Screenshot a finished screen, lay the lattice over it and look for edges that fall between lines. In practice a large majority of spacing errors are single values that were nudged once and never corrected.

A 14-pixel gap in a field of 8s and 16s is invisible in isolation — nobody perceives 14 as wrong — and completely obvious under the grid. That asymmetry between how hard the error is to see and how easy it is to find with a tool is the argument for the tool.

The second use is settling arguments. Two designers can disagree indefinitely about whether a gap is too tight, and the disagreement resolves in seconds once the question becomes whether it is on the system.

The main criticism of 8pt grids is worth taking seriously: they are a spacing system, not a design system, and the two get conflated. Consistent spacing does not produce good hierarchy, good typography or good colour, and a product can be perfectly on-grid and completely illegible.

A related criticism is that strict adherence can force bad decisions. Optical alignment sometimes requires a value off the system — a piece of punctuation, a shape with a different visual centre, an icon whose bounding box lies about its weight. Systems that forbid exceptions produce designs that are technically consistent and visually wrong.

The usual resolution is to treat the grid as the default rather than the law: on-system unless there is a stated reason, and the reason has to be optical rather than convenience.

For print work, the same lattice does the same job with a different unit. A 3 mm or 4 mm base grid on a page serves exactly the function that 8pt serves on a screen, and the argument for one number rather than several is identical.

The lattice is drawn in both directions at the same spacing because that symmetry is the point. If you only want vertical rhythm, the baseline grid generator is the correct tool and this one is more than you need.

The grid draws over your own image rather than exporting a fixed template because the useful question is always about a specific screen. A blank lattice tells you nothing; the same lattice over your interface tells you which values are off.

The export sizes itself from the paper format and the DPI you choose rather than from your screen, and SVG preserves both line weights, so the hierarchy between major and minor survives into whatever application you take it into.

Everything runs in your browser. Images you load are never uploaded, because there is no server for them to reach. The drawing, the transform and the export all happen on your own machine.