Why your "perfect" logo looks wonky: the definitive guide to optical corrections

The great betrayal of geometry

To understand optical corrections, we must first accept that our eyes aren't faithful cameras. They're more like faulty post-production software that applies automatic filters without our permission.

When we look at an object, our brain makes immediate assumptions about its weight, size and position, based on light, surrounding space and the shape itself. This phenomenon, which Gestalt psychology has studied for decades, is the foundation of all visual design.

The dictatorship of the pixel vs. the democracy of the eye

Imagine having to draw a set of icons: a square, a circle and a triangle. Logic tells you: "I'll set a height of 100 pixels for all three. They'll be consistent."

Result? The square will look like a massive giant, the circle will seem timid and small, and the triangle will appear malnourished.

Look at the image below: on the left, three shapes aligned mathematically at 100px height. On the right, the same shapes optically corrected to appear visually balanced. The difference is subtle but crucial: the circle has been enlarged by 3%, the triangle by 5%, whilst the square remains unchanged.

Why does this happen? It's a matter of perceived area and space occupation. The square, with its right angles, fills every single pixel of its bounding box. The circle touches the edges only at four tangent points, leaving the corners empty. The triangle is even worse: it tapers towards the top, losing visual mass as it rises.

To make them appear equal, we must stop measuring with a ruler and start "weighing" with our eyes. We must break the grid.

The art of overshoot (or how to cheat with style)

In typography and logo design, the key concept is called overshoot. It's the technique of extending curved and pointed shapes beyond the guidelines that delimit flat shapes.

The "little bit extra" rule

If you take a geometric font like Futura (or even Helvetica) and draw two horizontal lines that touch the base and top of a letter "H", you'll notice something shocking: the letter "O" breaks those lines. It goes beyond them. It overflows.

Observe the image: the red lines trace the cap-height (capital letter height) of the H. The O overshoots them both at the top and bottom by approximately 2-3%.

If the "O" were exactly as tall as the "H", it would appear minuscule. To compensate for the lack of mass in the "corners" (which the circle doesn't have), we must enlarge it slightly.

By how much? There's no magic formula, but generally we're talking about 1% - 3% more than the body height (cap-height). In more elaborate serif fonts (like Garamond), the overshoot can reach 5%.

Not just circles: the problem with points

The same principle applies to pointed letters (or shapes): the A, V, N, W.

Let's take the letter "A". Its top point is, geometrically, an infinitesimal point. If that point barely touched the alignment line of the "H", the eye would perceive the letter as shorter, because the visual "mass" dissolves towards the top.

The solution? Push the A's point slightly above the line.

In the diagram below you can see how the A and V "pierce" the cap-height: this small overshoot makes them appear as tall as letters with flat edges like H and E.

What exactly is overshoot?

Overshoot is the difference in pixels (or units) between the highest/lowest point of a curved or pointed shape and the reference line of flat shapes. It's an intentional optical correction that compensates for the loss of visual mass at the extremities.

Practical takeaway: When designing a logo that combines round icons and text, never mathematically align the icon's height to the text. The round icon must always be slightly larger than the text (1-3%) to appear balanced.

The triangle mystery (and the Play button)

Ah, the triangle. Every UI designer's nightmare when drawing a "Play" button.

If you take an equilateral triangle and use the "Align to centre" tool to position it inside a circle or square, the result will be dreadful. The triangle will appear shifted to the left (or towards the flat base).

Look at the interactive example: on the left, a mathematically centred triangle (appears unbalanced). On the right, the same triangle optically centred (finally balanced).

Visual centre of gravity vs. geometric centre

The software calculates the centre based on the bounding box (the invisible rectangle that contains the shape). But the triangle has most of its visual mass concentrated on one side (the base). The opposite point is light.

What's the difference between geometric centre and optical centre?

• Geometric centre: the mathematical central point of the shape's bounding box, calculated automatically by the software.
• Optical centre: the point where the human eye perceives the balance of visual mass.

In design, the second always wins.

To optically centre a triangle, you must ignore the software. You must shift it towards the opposite direction of its "heavy" base. In the case of a Play button (pointing right), you must shift the triangle slightly to the right.

The inscribed circle trick

An empirical method we often use at Insight is to find the centre of the circle that can be inscribed in the triangle (the incircle) and align that point, not the centre of the selection rectangle. It almost always works better than pure mathematics.

In Illustrator/Figma:

1. Select the triangle
2. Create a circle that touches all three sides from the inside
3. Find the centre of that circle
4. Use that point as the reference for alignment

In the image below you can see the step-by-step process: the triangle seems to "jump" to the right when correctly centred, even though mathematically it moves away from the canvas centre.

The weight of lines (why the horizontal gets fat)

Have you ever noticed that in a perfect cross (+), the horizontal line often seems thicker than the vertical one? Or that in a square, the horizontal sides seem heavier?

In the image: two identical 2px crosses. On the left, both lines have the same thickness (but the horizontal appears thicker). On the right, the horizontal line has been reduced to 1.8px to compensate for the optical illusion.

This is another trick of our visual system. This phenomenon, studied by Gestalt psychologists Max Wertheimer and Kurt Koffka in the 1920s, depends on how our visual system scans information: the eye moves more easily horizontally through saccadic movements (small rapid flicks of the gaze) and therefore "traces" horizontal lines multiple times, perceiving them as more pronounced.

Another explanation comes from our evolutionary experience: we're more accustomed to scanning the horizon (searching for dangers, food) than the vertical axis, so our brain dedicates more "processing resources" to horizontal lines.

The typographic correction

Type designers have known this since Roman times. If you look at a high-quality sans-serif font, you'll see that the vertical strokes are always slightly thicker than the horizontal ones.

Take the letter "H". If you precisely measure the thickness of the horizontal bar, it will almost always be thinner than the two vertical legs (typically 90-95% of the thickness). If they were mathematically identical, the horizontal bar would appear clumsy and heavy.

In the typographic zoom below: notice how the thickness of the H's central bar is imperceptibly thinner than the vertical strokes. This is a professional optical correction.

Application in brand identity

When designing a frame, border or linear icon (outline), consider slightly thinning the horizontal strokes (5-10% less). It's an imperceptible detail at the conscious level, but one that gives immediate elegance and a sense of "rightness" to the design.

Practical case: If you're creating an icon with a uniform 2px stroke, try reducing the horizontal lines to 1.8-1.9px. Your eye will thank you.

Irradiation (the Dark Mode problem)

Here we enter the territory of light physics. There's a phenomenon called irradiation: light surfaces on a dark background tend to "expand" visually and appear larger than the same dark surfaces on a light background.

Think about it: light "eats" darkness.

Why does this happen?

When light hits the retina, photons bounce slightly inside the eye before being absorbed by the photoreceptors. This causes a luminous halo around light objects. It's the same reason why stars in the night sky seem larger than they really are, or why the full moon appears to "pulse" at the edges.

Visual experiment: In the image below you see two identical circles (100px diameter). The white one on a black background appears approximately 5-8% larger than the black one on a white background. This isn't a subjective measurement: it's optical physics.

Have you ever noticed that white text on a dark background in e-readers seems to "glare" after prolonged reading? Same physics: light expands in darkness, creating visual fatigue.

The negative logo challenge

A classic beginner's mistake is taking the black logo, colouring it white and slapping it on a black background without touching anything else.

The result? The white logo will appear "fat", clumsy, too heavy.

When at the agency we prepare the "negative" (Dark Mode) version of a brand, we almost always apply an optical correction called trap or simply weight reduction. We reduce the line thickness by 5-10%. This makes the white logo on black appear visually identical to the black logo on white, even though geometrically it's thinner.

In the side-by-side comparison: same logo, same font weight. On the left on a light background, on the right on a dark background without corrections (appears heavier). Bottom right, the corrected version with 7% thickness reduction.

Pro tip: corrections for text

If you're using a Light font on a black background, you might need to do the opposite: slightly increase the tracking (letter spacing) by +10/20 units, or choose a slightly heavier weight (e.g. Medium instead of Regular) to prevent the text from being "eaten" by the dark background, especially on backlit screens (LCD, OLED).

Golden rule for Dark Mode:

• White logos/icons: reduce thickness by 5-10%
• Light text on dark: increase tracking or go up one weight
• Always check on real devices, not just desktop monitors

Famous case studies (big brands that "lie")

To prove we're not talking about abstract theory, let's look at how the giants apply these rules.

1. Google's "G": geometry sacrificed on the altar of harmony

A few years ago, when Google rebranded, the internet went mad. Someone superimposed a perfect circle onto the logo's "G" and cried scandal: "It's not a circle! It's crooked!"

In the deconstructed image below: Google's G superimposed on a perfect circle (in red). Notice how the G "betrays" the circle at at least 5 critical points.

Google responded (metaphorically) with a smile. Their "G" isn't geometric because, if it were, it would appear to have a "bite" on the right side and the curve would seem squashed.

They pushed the anchor points to create a continuous curve that's pleasing to the eye, not to the compass. They sacrificed geometry for harmony.

But there's more: Google also uses optical compensation for the visual weight of colour. The G isn't just "pushed" in the beziers, but also has imperceptible variations in thickness (±2-3%) to balance the empty areas (the opening on the right) with the filled ones (the continuous curve on the left). If you traced the curve's thickness with millimetre precision, you'd discover it isn't uniform.

2. Nintendo Switch: programmed asymmetry

The Nintendo Switch logo is composed of two stylised controllers (Joy-Cons). At first glance they appear symmetrical.

Spoiler: they're not.

In the comparative diagram: the left controller (red, filled) is visually heavier than the outline of the right controller (blue, outline). Moreover, the dots inside aren't geometrically centred.

If Nintendo had used perfect symmetry, the logo would appear unbalanced towards the left, because solid colour "weighs" more than an empty line. They made the right controller slightly wider (approximately 3% more) to compensate for the visual weight of solid colour versus stroke.

It's a masterpiece of asymmetric balancing that demonstrates a fundamental truth: visual symmetry is not geometric symmetry.

Your optical corrections checklist

Now that you know your eyes are liars (marvellous, but liars), how can you work better? Here's the checklist we use at Insight before delivering any artwork.

✅ Overshoot Check

• Do curved shapes (O, C, G) overshoot above and below flat shapes (H, E, L) by 1-3%?
• Do points (A, V, M) overshoot slightly (2-5%) to compensate for mass loss?
• Are circular icons slightly larger than adjacent text?

Quick test: Overlay a grid on your design. If everything is perfectly aligned to the grid, it will probably look wrong.

✅ Alignment Check

• Are you aligning to the geometric centre or the visual centre of gravity?
• Have you applied the "inscribed circle trick" for triangles and arrows?
• Have you done the squint test? (Close your eyes until the design becomes blurred. Do the elements appear aligned? If yes, you're on the right track)

Squint test: Step back 2-3 metres from the monitor or reduce the design's opacity to 40%. If something looks out of place now, it will be up close too (even if geometrically perfect).

✅ Colour & Weight Check

• Have you corrected thicknesses for the negative version (white on black)? 5-10% reduction recommended.
• Are horizontal lines visually consistent with vertical ones, even if this means making them thinner (90-95% of vertical thickness)?
• Have you tested the logo/design on both light and dark backgrounds, on different devices (desktop, mobile, print)?

Inversion test: Print the logo in positive and negative versions, place them side by side. If the negative version looks "fatter", reduce the thickness.

✅ Spacing (Kerning) Check

• You haven't trusted the software. The space between an "A" and a "V" must be smaller (often negative, -20/-50) than that between two "H"s.
• Have you applied the water test: imagine pouring water between the letters. The volume of water should be visually constant between each pair of letters, even if the linear distance changes.
• Don't the letters appear to "dance" when you read the text from afar?

Blur test: Apply a 3-5px Gaussian Blur to the text. If some letters seem to "merge" whilst others have too much space, the kerning is wrong.

✅ Scale Check (bonus for multi-platform systems)

• Does the design work at different scales? An icon that works at 64px might appear "fat" at 16px.
• Have you created optically optimised versions for small sizes? (detail reduction, contrast increase)

Size test: Scale the logo to 32px, 16px, 8px. If it becomes illegible or unbalanced, you need an optimised version, not a simple resize.

Conclusion: Trust your (trained) instinct

Grids are useful. They're the foundations on which we build. But a good architect knows when a wall must be slightly inclined to appear straight.

As designers, our job isn't to satisfy a mathematical algorithm, but to communicate with human beings. And human beings are imperfect creatures, who find beauty not in sterile precision, but in perceived harmony.

The next time someone tells you "this isn't aligned", don't pull out the smart guides to prove them wrong. Look with their eyes. They're probably right, even if the maths says otherwise.

The difference between a good designer and a great designer lies entirely there: in the courage to get the maths wrong to nail the emotion.

Now that you know all this, there's a risk: you'll see imperfections everywhere. Logos, interfaces, urban signage, newspaper headlines. Don't worry: it's normal. It means your eye is training itself. Welcome to the other side of the mirror.

💡 Insight Takeaway

The eye wins over maths: If it looks right but is geometrically wrong, it's right. If it's geometrically perfect but looks crooked, it's wrong.

Overshoot: Circles and points must always be slightly larger/taller (1-5%) than flat shapes to appear equal.

Visual weight: White on black appears thicker (reduce by 5-10%). Horizontal lines appear thicker than vertical ones (reduce by 5-10%).

Centre of gravity: Don't centre irregular objects (like triangles) based on the selection rectangle, but on their visual mass.

Dark Mode requires dedicated corrections: Don't simply invert colours. Reduce thicknesses, adjust contrasts, test on real devices.