Drop a line

Have a tip, or just want to say hi? Just use the form to the right!


123 Street Avenue, City Town, 99999

(123) 555-6789



You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Why fuzzy geometry sometimes works in visual design


Why fuzzy geometry sometimes works in visual design

Liam Spradlin

Sometimes things look misaligned, and they are. Sometimes they look off-balance but they aren't. And sometimes things look totally balanced, but when you look closer they're a little off-kilter.

This is fuzzy geometry. And in many cases, it works for visual design. One instance that immediately comes to mind is type design. When designing a typeface there are tons of little tricks and visual work-arounds one uses to keep things looking balanced. And that's not surprising - after all, you're designing to account for tens of thousands of letter combinations, if we're just talking about the alphabet alone.

Probably the most obvious trick is the shape of the O when compared to a font's regular caps height. Take a look at some examples.

So in every case (except for typefaces that are breaking the rule for a specific reason), the O is just a little taller than a regular capital glyph. It goes above caps height (not quite to ascender height), and dips slightly below the baseline (not reaching the descender).

What if it didn't? Here's what would happen.

In the first image above is an unadjusted pair of shapes representing a hypothetical O and I. Without guidelines they appear balanced next to one another. Then we adjust for height, then take away the guidelines. Something is off. Here's why.

The reason things look off-balance when the O and I are the same height is that the O's top height is only represented by a single point (marked here by the diamond) while its sides quickly (or slowly) slope off in either direction. Non-round capital glyphs on the other hand have a caps height represented solidly, like the I, with no instant slopes to diminish the shape.

In interface

The idea of fuzzy geometry exists in many areas of design, not just type. One example would be Android's default status bar. It's been pointed out in the past specifically that the WiFi and signal indicators don't have matching angles. The signal indicator slopes downward on the left at a 45 degree angle, while the WiFi indicator carries a somewhat steeper slope.

Looking at the bar out of context, what jumps out? If we're paying attention to geometry, it seems apparent that the angles between the signal indicator and the WiFi indicator don't match. There are two obvious ways we could fix this. First, adjust the WiFi indicator to have matching angles. Second, adjust the signal indicator to have a matching angle on its left side. Here's what each of those options would look like.

It seems obvious that neither of these is ideal, despite the angles being geometrically correct. This example may be pushing things a bit over the edge, but hopefully it illustrates why fudging the math is sometimes necessary for good design.