Why the Web Shouldn't Strive for Pixel Perfection

We’re always optimizing for whatever’s most important to us right now

You should only focus on pixel perfection when it truly matters; otherwise, it often results in a lose-lose situation.

I think there are two root causes behind this issue:

• Some UI designers lack foundational knowledge of the web, leading them to design websites with a graphic design mindset.
• They expect the final implementation to be an exact 1:1 match with the design mockup.

Why Graphic Design Principles Don’t Apply to the Web

Graphic design typically involves fixed dimensions and layouts, giving it a completely different perspective. Typography is also often handled with fixed units like pt.

The web, however, is inherently dynamic in terms of interaction and sizing:

• The user’s viewport is not fixed
• The user’s device varies
• The user’s system fonts vary
• The user’s zoom/scaling settings are not fixed
• Web pages can scroll both horizontally and vertically
• Web pages feature interactive elements like buttons and input fields
• Following from the above, there are hover, focus states, and more

Font sizes and typefaces can even be affected by user settings (unless you throw in the towel and export text as images).

Once you adopt a pixel-perfect mindset, it translates into a product optimized for a single, specific screen size rather than adapting fluidly across multiple devices.

Some Examples

Layouts Across Different Screen Widths

For instance, you can use CSS Grid’s auto-fill and auto-fit to achieve layouts that automatically fill the width of the screen (or container).

In certain scenarios, especially when taking advantage of wide screens, this kind of UI is particularly useful:

However, this kind of dynamic UI behavior is difficult to define clearly in static mockups, especially for designers without a web background. Pursuing pixel perfection here means throwing away solutions that might actually deliver a much better user experience.

Tables

Table design is an art in itself. As I’ve written before, there are several nuances to keep in mind when designing tables for the web, such as:

• Text should generally be left-aligned, while numbers should be right-aligned
• When numbers change dynamically, you can add font-variant-numeric: tabular-nums (if the font supports it) to prevent width jitter caused by changing digits

If the designer isn’t aware of these details and the developer doesn’t notice either, they often end up being overlooked completely.

vh/vw Units

In CSS, vh and vw units are incredibly useful. But if you’re constrained by a pixel-perfect mindset, you might just hardcode a fixed pixel value just to check off the requirement and get it over with.

Browser and OS Settings

In iOS Safari, users can choose where to place the address bar, and starting with iOS 12, there are Safe Areas to account for in layouts. In cases like this, trying to mock up and specify every single device state places a massive burden on both design and development.

What Do We Actually Want?

We need to understand what both sides are ultimately aiming for. Designers want the UI from their mockups to be faithfully presented, while developers want to meet UI requirements in a maintainable, responsive way.

What we truly need is a design system—one where spacing, margins, and typography scales are well-defined and can be seamlessly applied across different devices.

Responsive Web Design (RWD) remains as relevant as ever. As CSS continues to evolve, achieving this well has become so much easier than it was a decade ago.

The Solution

Lately, I’ve been following Design Engineer jhey on Twitter. He is currently a Design Engineer at Shopify, having previously worked at Vercel and Google.

His mastery of CSS is second to none. Many of his UI animations and interactions require not only deep familiarity with cutting-edge CSS features but also remarkable creativity. It is precisely this fluency in CSS that allows him to bring web pages to life so vividly.

In my view, an ideal UI designer (for the web, at least) should possess a solid understanding of CSS. However, this can be difficult to find in Taiwan:

• Companies often don’t prioritize UI enough to open dedicated roles like this.
• Even when they do, the focus tends to be purely on visual UI design, without requiring familiarity with CSS or web standards.
• Such talent commands higher salaries and is exceptionally rare to come by.

At my previous company, I had the privilege of collaborating with designers who truly understood web UI. While writing the CSS was certainly challenging, it was an incredibly fun and valuable experience.