Illusions in typography

Context	Guide	Scripts
Design Exploration Seminar, IDC School of Design, IIT Bombay	Prof. Vivek Kant	Latin, Devanagari, Odia

TL;DR

Anyone who draws type learns a set of rules early: round letters go past the baseline, the crossbar of an H sits above the middle, the top of an S is smaller than its bottom. They're usually taught as rules. This project goes back to why they exist.

I took six optical illusions, the Poggendorff illusion, the Jastrow illusion, simultaneous contrast, the Müller-Lyer illusion, Gestalt's law of proximity and top–bottom balance, and for each one:

• explained what it is and the leading theories of why it happens
• varied one thing at a time (angle, curve, thickness, weight, width) to see when it gets stronger or fades
• found where it shows up in real fonts, in Latin and in two Indic scripts, Devanagari and Odia
• looked at how type designers correct for it

Every figure here is redrawn as vector from the original study, with the letters set live in the fonts themselves. A few of the original typefaces were commercial, so their figures use open stand-ins chosen for the same trait: Roboto Flex for Acumin's width and weight range, Crimson Pro for Minion, Roboto Slab for Trend Slab and Jost for Futura's pointed apexes.

Poggendorff illusion

A diagonal line that passes behind a bar seems to come out the other side offset from where it went in. It's named after Johann Christian Poggendorff, the German physicist who described it. It isn't fully explained, but it has driven a lot of research into how we see angles and edges.

Why it happens

There are two main explanations, and neither covers everything.

Angular displacement. The eye overstates acute angles and understates obtuse ones. Lateral inhibition between the retina's cells, which respond to edges at different angles, makes the two halves of the line seem to head off on different paths. The catch: the illusion survives when the bar is taken away and only its edges are left, so it can't rest on the bar's contours alone.

Depth processing. The figure is read in three dimensions: the bar as a solid in front, the line as a surface running away behind it. The offset is then a misread of perspective rather than a flat distortion.

The depth theory has its own gap. Turn the whole figure so the line runs vertically and the illusion all but vanishes, which a perspective misreading can't explain.

Angle

With one line fixed upright and the other turned, the offset is strongest where the two meet at a sharp acute angle, and gone where they cross at a right angle. It barely matters which line is thick and which is thin, since the angles between them are the same either way. Two thick lines give a weaker effect than a thick and a thin one.

Curves

Keeping a Bézier curve's end points fixed and only lengthening its handles bends a straight line into a deeper and deeper S. When the curve is the thick line, the offset is negligible whatever the depth. When the curve is thin and the straight line thick, the offset grows with the depth of the curve, because the thick line hides more of it. With both thick it's still there, though a little weaker. Past a certain depth, a thick curve also picks up a visible dent where the lines cross.

In letters

In Latin type the illusion is plainest in X: two straight strokes cross at an angle, and the crossing hides part of each. Type designers correct it by shifting one half of a stroke so the diagonal reads as continuous, and each style does it differently.

The correction scales with weight. A light X barely needs one; the heavier the strokes, the more the halves have to shift. Width matters too: at the same weight a condensed X shows the illusion more than an extended one, most likely because its angles are sharper, and the eye exaggerates acute angles.

The illusion doesn't depend on the script. In Devanagari it shows where a curve meets a straight stroke, as in फ, whose curved stroke is nudged up where it meets the stem so it reads as continuous. It also appears at curved joins in क, क्ष and त्र. In Odia, where curves dominate, it appears at the sharp turns.

Jastrow illusion

Also called the ring-segment or Wundt–Jastrow illusion, after the psychologist Joseph Jastrow. Of two identical curved shapes stacked one above the other, the lower one looks longer. Toy train tracks do it: two identical curved pieces, laid one above the other, never look the same size.

Why it happens

It's a classic geometric illusion that is still not well understood. The usual explanation is that the lower shape's long outer edge sits right next to the upper shape's short inner edge. Judging the areas, the eye can't ignore that contrast, and it compares the shapes relatively when we'd like it to compare them absolutely.

Orientation, curve and thickness

Turning the pair in steps of 90° doesn't break it. The shape nearer the other's short edge always looks bigger.

Bending the shapes matters more. Two identical trapezoids already show a slight effect when flat, and it gets stronger as they curve.

So does thickness. As plain lines, two identical arcs look almost the same; the thicker they get, the more the lower one grows.

In Odia

Latin letters are mostly straight strokes. Indic scripts are full of curves, and Odia more than most: it was written on palm leaves whose fibres ran lengthwise, so a straight stroke along them could split the leaf. Stacked curves are exactly where Jastrow shows up.

Over ଲ (la), an arched mark kept the same length at every weight looks shorter as the letter below grows heavier, because the letter's top curve gets longer against it.

The chandrabindu over the same letter looks far smaller than the arched mark. Turn the arch upside down, so its short edge faces the chandrabindu, and the two look nearly the same length.

Curves inside a letter

ଚ (ca) is an open curve sitting on a small circle. Drawn apart, the curve looks much bigger when it sits below the circle than above it. Above, its short inner edge faces the circle, so the letter's top curve has to be drawn larger just to look normal.

Weight adds to this. The letter has to stay between the baseline and the headline, and its circle keeps the same height, so extra weight goes on the inside of the strokes. The top curve is drawn slightly wider at every step to compensate.

ଞ (nya) repeats one form top and bottom, with other strokes in between, so the curves never touch. The illusion still acts, and the lower half is drawn a little larger to look balanced. The difference is there at every weight but narrows as the letter gets heavier.

In ଭ (bha), a small curve branches from a large one. They're not the same size as in the classic figure, but the eye still judges each against the other, and how they sit together changes how big the small one looks.

Simultaneous contrast

A patch of colour looks darker on a light background and lighter on a dark one. We almost never see a colour on its own, so what's around it always changes how we see it.

In colour

The effect comes from complementary colours. Each colour seems to call up its complement, and where the complement is missing, the eye tends to supply it.

Complementary colours at the same value clash where they meet. The edge seems to vibrate.

That vibration hurts legibility. The same paragraph on the same green is hard to read in its complement, coral, and easy to read in a tint of green.

Tints and shades of coral help a little. Tints and shades of the background's own green, or colours near it on the wheel, help most.

In Odia letters

Set on alternating blue and green stripes, with each row shifted one stripe from the row above, Odia letters change colour from stripe to stripe.

Odia letters have many closed and partly closed counters, which brings in a second effect. In a closed letter like ପ (pa), the colour inside the counter changes how the letter's own colour looks. That holds whether the background changes or the counter does.

The effect is stronger on a pixelated background than on a flat one. On a screen whose pixels are large next to the text, small letters are affected most.

Glare does something similar. On a glossy screen in bright light, the same letter looks like two different colours at the top and the bottom of the screen.

At very large sizes a letter isn't seen whole. The eye takes it in parts, and its colour looks different in closed counters, part-closed spaces and open ones.

Müller-Lyer illusion

Lines of the same length look longer or shorter depending on what's at their ends. With tails, a line looks long; with arrowheads, it looks short. It's named after the sociologist Franz Carl Müller-Lyer, who described it in 1889.

Why it happens

The centroid hypothesis. The eye takes the end of a line to be the centre of mass of everything at that end. Arrowheads pull that centre inward, so the line reads short; tails push it outward, so it reads long.

Depth cues. The eye assumes the sides of a figure meet at right angles, as they do in a room. Tails look like the far inside corner of a room; arrowheads look like the near outside corner of a box. A line read as farther away gets scaled up in the mind.

Shapes of the same height

It carries over to shapes. A square, a circle and a triangle of exactly the same height don't look it: the triangle looks smaller than the square, and the circle smaller still. Letting the circle and triangle pass the lines slightly makes all three look equal.

In letters

Latin capitals are built from those same three shapes, so they share the problem. Capitals sit between the baseline and the cap height, and letters made mathematically the same height look uneven.

So round and pointed letters are drawn slightly past the lines. These overshoots also come from how letters meet the lines in a word: a flat H or F runs along the line for its whole width, while an O or C only touches it at one point.

It happens in every script, depending on how the letters are built. Odia letters are mostly curves, so the size differences between them are smaller than in Latin, but their round tops and bottoms still overshoot. In Devanagari, the headline (the shirorekha) fixes the top of every letter, so only the bottoms overshoot.

Width and weight

In Acumin, the study found that overshoot shrinks as letters get narrower. A narrow O is almost a rectangle, and its flat top and bottom run along the lines like an H's. Roboto Flex keeps the same overshoot at every width, so this figure is drawn rather than set.

Weight doesn't change it. At the same width, a C overshoots the same amount from thin to black, and so do Odia letters.

Terminals matter too. Futura's A and V come to sharp points, where Acumin's are cut flat, and pointed apexes have to go well past the lines to look the same height. Jost, which shares Futura's pointed apexes, shows the same thing.

Gestalt's law of proximity

We read things that sit close together as a group, and things farther apart as separate. Kurt Koffka's Principles of Gestalt Psychology describes the visual field organising itself into units, split apart wherever the stimulation changes.

It works on letters as well as dots. A shop sign that spaces letters for effect can be read two ways at once.

Letter widths

Letters in a script aren't all the same width. Each one's form decides how wide it has to be to look even in a word. Take N, about as wide as H, as the base width. Built on the triangle, A spreads a little past it at the base; round O and G spread past it at the sides. M and W go well past it, because of their inner joints.

Sorting Odia letters

To see how Odia letters meet their neighbours, I sorted the script by how each letter's strokes end: in a vertical stroke, an angled one, or a curve at the top. I then sorted it again by how wide each letter has to be. The two sortings line up closely, because a letter's terminal largely decides its width.

Kerning

Uneven spacing between letter pairs makes letters group in the wrong places, and can change what a word says. With too much space between N and G, MANGO reads as MAN GO. In Adobe Devanagari, the Hindi word खवाब (a dream) can be misread as रववाब. Devanagari's headline holds its words together, which limits this, but a script like Odia, with no headline, is much more exposed to bad kerning.

The explorations show that Müller-Lyer works horizontally too, which suggests a basis for kerning Odia. Once the script is sorted by terminal, spacing rules can be written for each kind of terminal rather than for every pair of letters.

Each letter meets its neighbour along imaginary vertical lines. A letter with a vertical stem on the right has that as its line. A curved letter uses its outermost point: that's its primary line. Anything that reaches past it, like a tail or a knot, has a secondary line at its tip.

That gives seven cases, with spacing measured in x, roughly the width of a vertical stem.

Top–bottom balance

Rudolf Arnheim explains how we see through natural forces. Everything is pulled down by gravity, so going up, against it, reads as powerful, and the same holds for where things sit on a page. Of two identical things, the upper one looks heavier. To look balanced, the upper one has to be made slightly lighter.

Which way is up

Environmental orientation. In the physical world, up is fixed: the sky is up and the ground is down. We keep that sense of upright even when we're sitting or lying down.

Retinal orientation. On a page or a screen, up is wherever the top of the visual field is, and it shifts as that field moves.

The downward pull in type

The realist landscape painters of the 17th and 18th centuries put more visual weight at the bottom of a picture, setting its centre of gravity below the geometric centre. Type designers do the same. In letters built in two parts, like B and S or 3 and 8, the bottom part is drawn larger. We're so used to seeing them this way that it only shows when they're turned upside down.

H and E do the same with their bars. Each bar sits slightly above the exact middle, so the lower half is the bigger.

Weight, width and typeface

As weight increases, the join moves down toward the exact middle. As width increases, it moves up, the opposite of weight. Every Latin letter with this two-part form behaves the same way.

The typeface decides it too. In the study, Minion's middle sat higher than Playfair's, because a text face needs a large x-height where a display face doesn't, and the condensed Khand's sat lower.

In Devanagari and Odia

Top–bottom balance is a general effect, so it appears in every script. In Devanagari letters with two parts, the difference between top and bottom stands out as soon as they're flipped. Their middle also shifts with weight, though less than in Latin.

In Odia, some letters have identical top and bottom curves and some don't, but the balancing shows as soon as either kind is flipped. The middle hardly moves with weight: Odia's long curves shrink the counters quickly as the weight goes up. The exception is ଞ (nya), whose top and bottom are nearly the same form. There the middle rises with weight, and the bottom grows even larger.

What I took from it

Most of type design's "rules" turned out to be corrections for how the eye misjudges size, length, angle and colour. Four things came out of it for me:

• The corrections scale. Nearly every one changes with weight, width or style, so no single fixed value holds across a family.
• The illusions don't depend on the script. They show up in Devanagari and Odia wherever the same geometry appears.
• Odia is exposed to more of them. Its curves, stacked forms and missing headline make it more vulnerable to Jastrow, contrast and spacing problems than Latin.
• Classifying a script can replace pair-by-pair work. Sorting Odia by terminals is enough to write kerning rules by type of terminal instead of letter by letter.

References

• Bach, M. (2002). Müller-Lyer Illusion. Visual Phenomena & Optical Illusions.
• Bach, M. (2003). Poggendorff Illusion. Visual Phenomena & Optical Illusions.
• Bach, M. (2012). Jastrow Illusion. Visual Phenomena & Optical Illusions.
• Sinha, P., Crucilla, S., Gandhi, T., Rose, D., Singh, A., Ganesh, S., Mathur, U., & Bex, P. (2020). Mechanisms underlying simultaneous brightness contrast: Early and innate. Vision Research, 173, 41–49.
• Aaberg, K. (2011). Color Contrast: all about the difference. Love of Graphics.
• Cherry, K. (2020). How the Müller-Lyer illusion is used in psychology. Verywell Mind.
• Koffka, K. (1999). Principles of Gestalt Psychology (p. 126). Psychology Press.
• Ali, N., & Peebles, D. (2012). The effect of Gestalt laws of perceptual organization on the comprehension of three-variable bar and line graphs. Human Factors, 55(1), 183–203.
• Arnheim, R. (2004). Art and Visual Perception (pp. 30–33). University of California Press.

With thanks to Prof. Vivek Kant for his guidance through every stage of the project.