- Joining straight and curved lines creates a confusing optical illusion called the Bone Effect.
- It causes the straight lines to appear concave, and the curves to protrude.
- It can be mitigated by smoothing the transition between the two lines.
With today’s article I am starting a short series on optical illusions in typography. It will cover a range of visual effects, which for a dabbler in the field may seem trivial, but actually are absolutely crucial for any decent type design. And since these phenomena are based on universal laws of human perception it is worth knowing them, even if you want nothing to do with typefaces. You can implement this knowledge in web-, or logo- or, frankly, any kind of design work you can think of.
In this first article I would like to talk about one of the less known, but more amusing illusions, namely the Bone Effect. It has been pointed out, that this name sounds a bit perverse… and it really kind of does. Fortunately you don’t have to maintain a straight face while reading.
This illusion, like most, is caused by our brains’ ability to recognise patterns and extrapolate them to predict outcomes. It appears when we try to join a straight line with a curved one. Sounds easy enough, but it is enough to confuse our perceptions. When the brain perceives a straight line of a certain length, it naturally predicts its continuation into the distance. Similarly, when we are presented with a curve, we can, with some certainty predict its further flow.
How we perceive and extrapolate shapes
However when these two lines share a starting point, forming a complex shape, they go against the brain’s predictions. Where the straight line should continue indefinitely, it veers off. And where the curve should… curve further, it suddenly straightens. Our eyes have trouble reconciling the two. And so the straight line seems to bend, and the curve seems to sharpen. The illusion is subtle, but once you see it, you cannot unsee it.
This problem is largely connected with the so called curve smoothness, which is a big issue for architects, 3d modellers and other more technically minded creatives. You can read about it here, and here.
For the type designers, the go to tool for assessing curve smoothness is Speed Punk. I have used it for several illustration in this article. And no, I have not been paid for this reference.
This effect is perhaps most visible in the glyph o, especially in condensed typefaces. Because of the illusion the sides become concave, and the points where curves meet vertical lines seem to protrude outwards. You can see it clearly when you squint your eyes.
The Bone Effect is directly connected with the sharpness of the transition between straight and curved lines. The sharper the transition, the more pronounced the illusion.
The solution (?)
Unfortunately it would be very hard to remove this phenomenon completely. The only real solution seems to be not joining straight and curved lines at all. This, obviously, is not satisfactory, but other than that you are limited to mitigating the impact of this bony mirage. You can do this by softening the transition between the two lines.
In the illustration above there are four o glyphs. In the leftmost the Bone Effect has been amplified by sharpening the curves. In the second from the left the top and bottom curves are perfect semi-circles. In the third o the effect has been mitigated by softening the transition. In the rightmost there are no straight lines at all, and the Bone Effect is not present.
The same four o glyphs with curves visible. Curve speed highlighted with Speed Punk tool.
Let me say it in bigger text:
To mitigate the Bone Effect you need to smooth the transition between the straight line and the curve.
This is bad news for fans of geometry, because it means that you cannot simply dump a semicircle on top of a square and expect a nice rounded figure as an effect. Instead you will get an unsightly, mushroom-like shape. You actually have to make it less geometrical, for it to appear perfect.
If this annoys you, perhaps you will sleep easier knowing it annoys the heck out of me as well. And this is only the beginning. More illusions coming soon.
That’s it. You have made it through! If you liked this article, why not leave a comment? And if you found it useful, be sure share it with your network.
Have a great day and see you in the next one.