Proportionally-perfect Design

Evolving our desire for pixel-perfection


It seems like this whole movement toward responsive design has given developers even more reason to push back against “pixel-perfect” design — the idea that what the developer produces actually match the creative he was given. It’s an understandable frustration on behalf of the developer — the browser is one of the most unpredictable and volatile environments in which to write code. So what you usually end up getting is a website that mostly matches the “approved” creative, but with misaligned elements and disjointed spacing “because that’s just how the web is”.

That is total hot garbage.

Disregard for this kind of detail in the execution of a design cheapens the final product and its like giving a big middle finger to the designer who painstakingly nudged pixels until her creative vision was realized.

How Design Happens

When a designer is establishing an aesthetic for a new project, one of the initial steps is to select a typeface. The designer chooses a font that looks promising, drops it into her design, then tweaks pixels and type size until she finds something that looks good. If she wants to try a different typeface, she goes through the same processes; replacing the font she just worked to refine with a new one, adjusting the spacing and size until the font works well with whatever design she’s got so far.

The designer isn’t keeping track of each time the exact pixel value of a font size or padding around an object changes — the medium (Photoshop) isn’t built that way. Rather, she’s paying attention to the proportion of the design. She’s playing with the design — like a potter with clay or a sculptor with stone — until she finds that visual balance that just “looks right”. This is “proportionally-perfect” design, and its what we’re really after.

We can achieve this in code, but we have to start writing code in the same way a designer works with type — by using ems.

Ems

An “em” (pronounced like the letter “m”) is a unit of measure, but unlike “pixels” or “points, ems are a relative unit defined by a font’sheight.

Typefaces are designed with a constant height. This practice was established with traditional typesetting when letters needed to fit in the same-sized row.

Traditional type setting.

Type designers still use this practice today. It is a helpful way to maintain consistent glyph size and proportion.

Typeface set with constant height.

Since ems are relative, that means their value changes based on the size of the font.

If the font is 20px tall, 1em = 20px.

If the font is set to 16px, 1 em = 16px.

Simple.

Things you should be setting in ems

  • Type (size, leading, kerning).
  • Breakpoints.
  • Container or grid maximum width.
  • Margin and padding.

This approach may be new to many developers, and may be like lifting the veil for some designers. We have talked about design in terms of finite units of measure because that’s what our tooling (Photoshop, InDesign) speaks back to us, but the hidden language of web design is proportion, specifically proportion centered on type. Once designers and developers begin speaking in this common language, the translation from Photoshop to code becomes more seamless. Design and code are married.

Three things

A website design work flow focused on ems is three things:

Harmonious.
Accessible.
Revealing.

First, harmonious.

Setting type around a measure ties your composition together with a common thread. Line, texture, and color are the obvious drivers of aesthetic, but space plays an equally important role.

Space is the thing that guides a user though the page.

Space is the thing that creates rhythm and flow.

Space is the thing that makes the design usable.

Space is the thing that holds the design together.

… and the designer finds the perfect harmony of space by adjusting the proportion of elements and type.

The designer is actually designing space proportionally around the type, whether or not he is aware of it.

Whether or not the designer is aware of it, he is composing design around the proportion of type.

If code reflects this reality, then that design harmony is much easier to capture.

Second, accessible.

Design that uses a relative unit like em responds and adapts to a number of user contexts. If breakpoints are set in ems, then low-vision users who have their browser font size increased will experience the most optimal, most proportional experience. This is not true of designs defined in pixels.

video.pbs.org with base font size increased.

The beauty of accessibility is that good design considerations benefit all users — they make the experience more accessible for everyone. Consider the use case above — a user with the browser’s font size increased. But instead of a low-vision user, its a user sitting far away from their monitor, maybe a TV. They increase the font size, and if the code uses ems, the experience scales up and down beautifully, giving the user the absolute best experience.

Finally, revealing.

Responsive breakpoints are typically set at specific widths. If a width is defined in ems, then the breakpoint is a relative point. Breakpoints are literally points at which the design breaks and needs to be readjusted. Since design is proportional, the breakpoints should respond to changes in context in order to maintain proportion.

Increasing the browser font size on a design set in ems is like looking at that design under a microscope. The traditional way of testing responsive layouts is to drag the window back and forth to see how the design changes at different widths. If an experience is defined in ems, adjusting the width of the browser is a moot practice. Adjusting the base measure up and down will expose design flaws in a very obvious way. This is a much better way to stretch and examine and refine the experience.

Like what you read? Give Luke Askew a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.