Pixel Perfect Markup from Design Mockup
Pixel Perfect is a markup methodology where the implemented HTML/CSS visually matches the design mockup with pixel-level precision. In practice, absolute accuracy is unachievable (different browsers render fonts differently, antialiasing systems differ), but professional markup from a mockup produces results with 1–3px deviation — imperceptible in real conditions.
What Pixel Perfect Means in Practice
Pixel Perfect is not about pixel matching on screenshots, but about adhering to the system. Good markup from a mockup:
- Accurately reproduces spacing, sizes, colors from the design
- Uses the same fonts with the same weight and size
- Correctly implements components in all states (hover, focus, disabled, active)
- Matches the mockup across all breakpoints (not just desktop)
Poor markup "based on the mockup" — when the developer guesses spacing, loses intermediate breakpoints and ignores states.
Tools for Working with Figma Mockups
Figma Dev Mode (requires Professional subscription from designer) — shows exact dimensions, spacing, CSS properties, exports assets. Developer clicks on element and sees ready CSS.
Figma Inspect — free alternative with limited functionality. Sufficient for basic tasks.
Browser extensions:
- PerfectPixel (ChromeExtension) — overlays PNG screenshot as semi-transparent layer over page. Allows comparing markup and mockup visually with adjustable opacity.
- PixelPerfect Pro — analogue with additional overlay positioning features.
Workflow: export page PNG from Figma with desired scale, load in PerfectPixel, overlay on open page in browser, reduce opacity to 30–50% — all discrepancies visible.
Typical Discrepancies and Their Causes
Fonts. The same font renders differently in macOS (subpixel antialiasing) and Windows (ClearType). Figma is used predominantly on macOS — markup may not look identical on Windows. This is normal: the task is to follow the system, not achieve pixel-perfect match on a specific platform.
line-height. In Figma line-height is set in pixels or percent. In CSS — in relative units (1.5) or pixels. Conversion: if in Figma text is 16px with line-height 24px → in CSS line-height: 1.5.
Box model. Figma dimensions work like box-sizing: border-box (padding included in size). If CSS uses content-box (default) — dimensions will shift. First line of any CSS file:
*, *::before, *::after { box-sizing: border-box; }
Shadows. Figma shadow: X: 0, Y: 4, Blur: 16, Spread: 0, Color: #000 @ 10% → CSS: box-shadow: 0 4px 16px rgba(0,0,0,0.1). Spread in Figma is spread-radius in CSS (4th parameter).
Border radius. With different sides: border-radius: 8px 8px 0 0 (top-left, top-right, bottom-right, bottom-left clockwise).
Responsive Markup Across Multiple Mockups
Pixel Perfect applies to each breakpoint with provided mockup. Standard set: 375px (mobile), 768px (tablet), 1440px (desktop). Developer doesn't "guess" intermediate states — designs smooth transition between breakpoints so any intermediate screen size looks correct.
Technique: CSS clamp() for smooth size changes, min() and max() for flexible spacing, grid and flexbox with gap instead of fixed margin.
Cross-Browser Compatibility
Pixel Perfect markup should work in target browsers. For 2024–2025 minimum standard:
- Chrome/Edge 120+
- Firefox 121+
- Safari 17+
- Mobile Safari (iOS 16+)
- Android Chrome
CSS Grid, Flexbox, CSS Variables, aspect-ratio, gap — all supported in all current browsers. Check via caniuse.com before using experimental properties.
Timeline
| Volume | Time |
|---|---|
| Landing (1 page, 3 breakpoints) | 2–4 days |
| 5–10 pages with components | 7–14 days |
| 20+ pages, design system | 3–5 weeks |
Speed depends on component complexity, presence of animations, and number of states. Markup from scratch with ready Figma mockup with Dev Mode — faster than from PDF or screenshots.