Pixel-Perfect

픽셀 퍼펙트

Drawing an icon so every line lands exactly on a pixel boundary — land it between pixels and anti-aliasing blurs the edge.

Also known as: Pixel snappingPixel fitting
···
html
<div class="pair">
  <div class="cell">
    <svg viewBox="0 0 24 24" class="blurred"><rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="var(--fg)" stroke-width="2"/><line x1="8" y1="8" x2="16" y2="16" stroke="var(--fg)" stroke-width="2"/></svg>
    <span class="tag">off-grid — blurred</span>
  </div>
  <div class="cell">
    <svg viewBox="0 0 24 24" class="snapped"><rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="var(--fg)" stroke-width="2"/><line x1="8" y1="8" x2="16" y2="16" stroke="var(--fg)" stroke-width="2"/></svg>
    <span class="tag">snapped — crisp</span>
  </div>
</div>
css
.pair{display:flex;gap:clamp(20px,7vmin,48px)}
.cell{display:flex;flex-direction:column;align-items:center;gap:8px}
.cell svg{width:clamp(46px,15vmin,72px);height:clamp(46px,15vmin,72px);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10%}
.blurred{filter:blur(.6px);opacity:.9}
.tag{font-size:10px;color:var(--muted);letter-spacing:.02em}

Pixel-perfect means every line in an icon lands exactly on a physical pixel boundary on screen. When a vector coordinate isn't a whole number — say, 12.5px — the browser has to smooth that in-between edge, blending gray into the neighboring pixels through anti-aliasing. The visible result is a line that looks slightly smudged.

That blur is quite noticeable on standard (1x) displays. To avoid it, an icon's stroke centerlines get snapped to .5px increments (for 1px-thick strokes) or whole pixels (for 2px strokes). Design tools often nudge overlapping shapes half a pixel out of alignment without anyone noticing, so it's worth zooming in after drawing to check for any blurred edges before shipping.

On high-density (retina, 2x/3x) displays each CSS pixel is made of several physical pixels, so the problem is far less visible. But it still matters for small assets that are still drawn at 1x — favicons being the classic case — or for projects that still need to support lower-density screens.

When to use

Check it whenever an icon renders small and fixed — favicons especially — or the project still supports lower-density screens. If everything targets 2x+ retina only, this drops in priority.