Optical Illusion Laboratory
Discover how the human eye perceives letterforms and explore the optical corrections used in professional typography.
1. Overshoot
Experiment Parameters
Visual Guides
Perceptual Insights
| Cap-Height Datum | 700 units (1000 UPM) |
| Recommended Overshoot | +12.5px (2.5%) |
| User Offset Applied | +14px |
Human vision is not a camera sensor. Our eyes interpret round curves, pointed tips, and horizontal strokes differently from simple boxes. Without deliberate compensation, your typography will appear sagging, uneven, or visually vibrating.
What this optical illusion laboratory does
This laboratory demonstrates why typography cannot rely purely on mathematical geometry. Explore 9 perceptual phenomena—including optical overshoot, stroke-weight astigmatism, geometric vs visual centering, counterform balance, spacing voids, and dark-mode irradiation—with live outlines, mathematical measurements, and interactive student challenges.
How to use it
Choose one of the 9 perceptual experiments from the experiment selector tab.
Use the Left Panel controls to adjust parameters like vertical overshoot, stroke thinning, optical centering, and kerning.
Inspect the Center Canvas with interactive zoom, guideline toggles, and vector outline overlays.
Review the Right Panel for real-time mathematical calculations, perception indices, and educational insights in Beginner or Advanced modes.
Switch to Challenge Mode to test your optical alignment intuition across 8 interactive typography exercises.
Export vector SVGs, JSON configurations, or print-ready study sheets for design systems or classroom critiques.
Frequently asked questions
Why do round letters like "O" overshoot the cap-height and baseline?
Curved and pointed letterforms make tangent point contact with alignment lines. A flat stroke like "H" creates a solid horizontal line of ink. Because points occupy less area, human eyes perceive round letters as 2–3% smaller if drawn strictly to mathematical guidelines.
Why are horizontal crossbars drawn thinner than vertical stems?
Due to human eye anatomy and the horizontal orientation of retinal receptive fields, horizontal lines are perceived as 5% to 15% heavier than vertical lines of identical mathematical thickness. Type designers deliberately thin crossbars to achieve optical weight equality.
What is the Helmholtz irradiation effect in dark mode typography?
Irradiation causes light shapes on dark backgrounds to bleed onto neighboring retinal photoreceptors. Consequently, white text on a black screen appears noticeably bolder than black text on a white screen. In dark mode, UI designers reduce font weights by 30–50 units or stroke weights by 5–8%.
What is the difference between geometric center and visual optical center?
The geometric center is the exact mathematical midpoint of a bounding box. Visual optical center accounts for mass distribution. In letters like "T" or "P", weight is concentrated in the top bar or bowl; placing them at mathematical center makes them look top-heavy or floating.
Custom Type Engineering
Need a custom brand typeface or complete typography system?
Goafreet crafts bespoke Latin and Indic typefaces, authorized script extensions, and corporate font governance for modern digital brands.