Pixel perfect
Pixel perfect, in web design and front-end development, means a built page matches the approved design file exactly at each specified breakpoint: the same sizes, spacing, alignment, type and colour, down to the pixel. It is a demanding fidelity standard for a design handoff, and one that designers and developers often argue over.
The longer version
The phrase also names a film and turns up in game graphics and photo editing, but in a software team it is a statement about handoff. The designer delivers a layout in a design tool at set widths, say 375, 768 and 1440 pixels, and the developer builds until the page, laid over the file at each of those widths, shows no visible difference. Checking is done by overlaying the design on the page, by measuring with browser inspection tools, or by a screenshot comparison against an approved image.
Between the breakpoints there is no design file, so a page cannot be pixel perfect at 900 pixels wide unless somebody drew it. The word pixel is also slippery. A CSS pixel is a unit of layout and may be drawn with two or three physical pixels on a dense screen, so the same page is sharp on one display and soft on another with no change in the code. Fonts are rasterised differently by each operating system and browser, which moves text by fractions of a pixel. An exact match in every browser is therefore not something a team can promise.
In practice teams settle on a tolerance. The design system fixes spacing and type scales so most of the work is exact by construction, design review at breakpoints catches the visible slips, and visual regression testing keeps a page from drifting after it has been approved. A reviewer reporting a mismatch needs to say at which width, in which browser and on which screen density, because the same page can be correct on one and off on another.
Common questions
What does pixel perfect mean?
Pixel perfect means a built page matches its design file exactly, in sizes, spacing, alignment, typography and colour, at the breakpoints the designer specified. In practice it is the standard a front-end developer is held to when a design handoff leaves no room for interpretation.
Is pixel perfect design realistic on the web?
Pixel perfect is achievable at the sizes a designer drew, in one browser on one screen, but not across every browser and device. Fonts render differently by platform, screen densities change how a CSS pixel is drawn, and users resize windows between breakpoints. Most teams aim for visually exact at the designed widths and consistent elsewhere.
How do you check that a page is pixel perfect?
Overlay the design file on the running page at each breakpoint, measure spacing and sizes with the browser's inspector, or compare a screenshot against an approved baseline image. Automated visual regression tools run the screenshot comparison on every build, and a person then judges each flagged difference.
Does pixel perfect conflict with responsive design?
Pixel perfect fixes the result at specific sizes, while responsive design lets layout adapt across all sizes. A page can be both: responsive between breakpoints and pixel perfect against the design at each breakpoint the designer drew. The two conflict only when exact matching is demanded at widths nobody designed.
Why does my page look different from the design in another browser?
Browsers and operating systems render fonts, subpixel positions and default styles differently, and screens with a higher device pixel ratio draw the same CSS pixel with more physical pixels. A difference of a pixel or two in text position is normal. Larger gaps usually come from a missing reset, a different viewport width or an unloaded font.
Bug reports that arrive ready to triage.
Collect replay, console, network and browser context with the Free plan.