Optical Alignment Beats Mathematical Alignment

Open any well-made text font in an editor, draw a horizontal guide at the cap height, and look at the H and the O together. The H stops on the line. The O does not: it pushes through, top and bottom, by a small amount the designer chose deliberately. If you then measure the two letters, the O is taller than the H. It was drawn that way so that it would not look taller.

This is the oldest and best-documented example of a rule that governs most of the small decisions in interface work: where a shape sits and how big it is are perceptual facts, not arithmetic ones. The grid is a convenience. The eye is the specification. What follows is an attempt to be precise about where that is true, how much correction the literature actually recommends, and where the numbers everyone repeats turn out to be softer than they sound.

Why the circle loses

Ian Moore, writing for Typographica on 8 February 2010, states the demonstration plainly: place a circle between two squares of identical height and "the circle is the same height as the two squares, but appears to be significantly smaller". The usual explanation is contact area. A flat terminal meets the alignment line along its full width; a curve touches it at a single tangent point and falls away immediately on both sides. The eye integrates over a neighbourhood, so it reads the curve as arriving late and leaving early.

The correction is called overshoot. Moore's phrasing for it: "To compensate for this optical illusion, the curve needs to increase in size so it seems level with the horizontal lines." Monotype's foundry documentation makes the scope wider than most designers assume. Asked which characters need overshoots, the answer given is "all of them, not just o, O, and zero", and it adds that "this same principle also applies to the points of the A and V". Pointed apexes suffer the same contact-area problem as curves, sometimes worse, because a point touches the line at one location with nothing beside it.

Without the correction, Monotype says, the round and pointed letters "will look too small next to the font's other characters, and the text will look irregular". Irregular is the right word. The failure is not that one letter looks short. It is that the line of type develops a rhythm of small dips that the reader registers as sloppiness without being able to name.

How much, and why nobody will give you a single number

Here is where I have to report a disagreement rather than a fact.

Wikipedia's entry on overshoot gives a typical range of 1 to 3 per cent of cap height or x-height for the letter O, and reports that Peter Karow's Digital Formats for Typefaces recommends 3 per cent for the O and 5 per cent for the A. I have not read Karow directly, so I pass that on as a citation of a citation.

FontLab's own tutorial on setting letter heights gives absolute units instead: "A typical overshoot is anywhere between 6 and 20." The tutorial does not restate the em size in that sentence, but on the usual 1,000-unit em that range is 0.6 to 2 per cent, which overlaps the low end of the percentage figures and sits below Karow's. Its worked example applies a 15-unit overshoot to an f, after which, in the tutorial's words, "he feels more equal" to the straight-stemmed letters.

FontLab also gives five rules that explain why a single number cannot be right:

• Larger round shapes need larger overshoots in absolute units.

• Wider letters need more; narrower shapes need less. For wide fonts the overshoot can be more, for ultra condensed less.

• Letters with stems should have smaller overshoots than pure curves.

• Open shapes such as C need less overshoot than closed shapes such as O.

• In a digital text font, make all overshoots exactly identical, to avoid rounding errors at small sizes.

The last one is the production rule that contradicts the first four, and it is the one I got wrong for years. I used to scale overshoot proportionally with weight across a family, which is defensible in principle and produces inconsistent rasterisation in practice, because the hinting and rounding do not care about your reasoning. Pick one value per master and hold it.

Monotype's position is the honest one: "The exact size of these overshoots, however, is somewhat dependent on what style of font you are drawing, and what its intended point-size is. As a type designer, you'll need to learn to regulate these things by eye."

Optical centring, and the arithmetic of the play triangle

The same problem appears whenever a shape is centred inside another shape. Microsoft's character design standards put the general rule in one sentence: "When spacing outlines, glyphs should be visually centered as opposed to mathematically."

The canonical interface case is a triangle inside a circular button. Centring the triangle's bounding box inside the circle looks wrong, and it looks wrong to everyone, which is why the fix is folklore. The folklore usually says "align the centroid", and that at least produces a number you can check.

Equilateral triangle pointing right, inscribed in a button.
Let h be the vertical side (the flat back edge).

width w              = h * sqrt(3) / 2 = 0.8660 h
vertices             (0, 0), (0, h), (w, h/2)
bounding-box centre  x = w / 2 = 0.5000 w
area centroid        x = w / 3 = 0.3333 w
difference           = w/2 - w/3 = w/6 = 0.1667 w

So aligning the centroid to the button centre means moving the
triangle RIGHT by one sixth of its own width, or about 16.7%.

For a 24 px wide triangle that is a 4 px shift.
For a 16 px wide triangle it is 2.67 px, which will round

Equilateral triangle pointing right, inscribed in a button.
Let h be the vertical side (the flat back edge).

width w              = h * sqrt(3) / 2 = 0.8660 h
vertices             (0, 0), (0, h), (w, h/2)
bounding-box centre  x = w / 2 = 0.5000 w
area centroid        x = w / 3 = 0.3333 w
difference           = w/2 - w/3 = w/6 = 0.1667 w

So aligning the centroid to the button centre means moving the
triangle RIGHT by one sixth of its own width, or about 16.7%.

For a 24 px wide triangle that is a 4 px shift.
For a 16 px wide triangle it is 2.67 px, which will round

Equilateral triangle pointing right, inscribed in a button.
Let h be the vertical side (the flat back edge).

width w              = h * sqrt(3) / 2 = 0.8660 h
vertices             (0, 0), (0, h), (w, h/2)
bounding-box centre  x = w / 2 = 0.5000 w
area centroid        x = w / 3 = 0.3333 w
difference           = w/2 - w/3 = w/6 = 0.1667 w

So aligning the centroid to the button centre means moving the
triangle RIGHT by one sixth of its own width, or about 16.7%.

For a 24 px wide triangle that is a 4 px shift.
For a 16 px wide triangle it is 2.67 px, which will round

That arithmetic is correct and it is a reasonable starting point. What I want to be careful about is the claim that the centroid is the optical centre. I could not find a perceptual study establishing that, and the type sources are consistent in refusing to give a formula. Luke Jones, writing on the Marvel blog on 5 August 2016, describes the play triangle as needing to be nudged "until it appears central", not until it reaches a computed point. Treat w/6 as the first guess and your eye as the arbiter, which is the same advice Moore gives in a single line: "Trust your eye more than the grid."

Jones does give one number worth having. A circle and a square both drawn at 120 by 120 pixels do not read as the same size; he enlarges the circle to 126 by 126, which is a five per cent increase. That is the two-dimensional version of overshoot, and it is the correction most icon sets quietly apply between a circular avatar and a square thumbnail.

He also notes that uppercase text set beside mixed-case text looks larger and needs reducing by roughly two pixels, giving 16 px down to 14 px, or 12 px down to 11 px. Anyone who has set an all-caps label next to a sentence-case one has met this.

Optical margins and hanging punctuation

The left edge of a justified column is the largest optical alignment problem in typography, because punctuation and some letter shapes have almost no mass at the margin. A quotation mark aligned mathematically leaves a visible notch.

InDesign's answer is Optical Margin Alignment. Ilene Strizver's account for CreativePro, first published 9 March 2016 and last revised 9 June 2022, lists what it touches: quotation marks, hyphens, dashes, periods, commas and asterisks, plus "serifs and the edges of certain characters with overhanging strokes", which includes capital A, T and W, the numeral 1, and the registered and trademark symbols. The default overhang is 12 points, and it is adjustable. Her advice on setting it is the useful part: "Select a point size for the amount of overhang by starting with the size of the type and going up (or down) from there. Go by what looks good to your eye, not by the number, which can sometimes be considerably larger than the size of the text for a good alignment."

That last clause is worth dwelling on. The correct overhang for 10 point text is frequently larger than 10 points. There is no proportional relationship you can compute.

On the web the equivalent is the hanging-punctuation property, with values none, first, last, allow-end and force-end. It is specified in CSS Text Module Level 3, but the Candidate Recommendation Draft flags it as at-risk, meaning it may be dropped before the specification advances, and MDN records it as having limited availability and not being Baseline because it does not work in some of the most widely used browsers. So the honest status is: the mechanism exists in the standard, it is not something you can rely on, and hanging punctuation on the web is still usually done with a negative text-indent and a lot of care.

Strokes: horizontals, joins and the space between letters

The third family of corrections is about mass rather than position. Moore is direct: "The horizontal and vertical strokes should not be the same thickness. If they are, the horizontal strokes will look heavier." He cites Futura as a geometric face that makes subtle adjustments to its horizontals despite presenting itself as monolinear. He gives no ratio, and I could not find a published one that holds across designs.

Joins are the same problem concentrated. Where a curve leaves a stem, the two strokes briefly overlap and the ink accumulates. Moore's description: "A heavy area appears where the curve tries to pull away from the straight. By trimming a little from the inside, it pushes the curve down in the right direction." At text sizes in print, this is what ink traps exaggerate. On screen at small sizes, an untrimmed join fills in and the counter closes.

Spacing is optical in exactly the same way. Mark Jamra's TypeCulture article on basic character spacing puts it as a volume problem: "curved stems need to enter into the space in order for it to appear to have the same volume as between straight stems." His procedure is worth memorising because it converts a vague instruction into a method. Set the space between two n's until it optically equals the volume of the counter. Apply that value to f, h, i, k, l, m, p, r and u. Set the o separately, tighter, and apply that value to c, d, e and q. Put the diagonals, k, v, w, x and y, evenly between the straight and curved values. For a, g, j, s and z, in his words, "your eye has to be the judge".

Microsoft's standards give the corresponding rule for vertical alignment, and it is a useful constraint on freehand adjustment: round characters should "overshoot the baseline of the flat characters the same amount as the top overshoots the lowercase flat characters". Symmetry top and bottom, even though the optical situations are not quite symmetrical.

The corrections, collected

What is actually known, and what is not

The phenomena are not in dispute. The circle looks smaller, the triangle looks left of centre, the equal horizontal looks heavier. These are stable, immediate and replicable on any observer you can find.

What is in dispute, or simply absent, is the quantification. Every source I fetched that is written by people who actually draw type refuses to give a formula and says some version of "by eye". The numbers that do circulate, 1 to 3 per cent, 3 per cent for O and 5 per cent for A, 6 to 20 units, the 120-to-126 circle, are craft conventions reported by practitioners rather than measured constants. I could not find a perceptual study that fixes any of them, and I could not find a primary source for the frequently repeated claim that the optical centre of a page sits a fixed fraction above the geometric centre.

That does not make the corrections arbitrary. It makes them empirical in the old sense: you make the adjustment, you look, and you stop when it stops being visible. The useful discipline is to write the value down afterwards, so that the next component in the same system gets the same treatment rather than a fresh guess. Optical alignment is not the opposite of systematic alignment. It is systematic alignment with the right measuring instrument.

Sources

• Moore, Ian. "Making Geometric Type Work." Typographica, 8 February 2010. The circle-between-squares demonstration, overshoot, horizontal versus vertical stroke thickness, trimming joins, and "Trust your eye more than the grid." typographica.org/on-typography/making-geometric-type-work/

• Monotype Foundry Support. "Lack of Overshoots." That all rounded characters need overshoots, that the principle applies to the points of A and V, the consequence of omitting them, and the statement that size depends on style and intended point size and must be regulated by eye. foundrysupport.monotype.com/hc/en-us/articles/360029597112-Lack-of-Overshoots

• FontLab 8 documentation. "Setting Your Letter Heights." The 6 to 20 unit range, the five rules on relative overshoot size, the 15-unit f example, and the instruction to make all overshoots identical in a digital text font. help.fontlab.com/fontlab/8/tutorials/calfonts/

• "Overshoot (typography)." Wikipedia. The 1 to 3 per cent typical range for O, and the report that Peter Karow's Digital Formats for Typefaces (2012) recommends 3 per cent for O and 5 per cent for A. en.wikipedia.org/wiki/Overshoot_(typography)

• Microsoft Typography. "Character design standards: Lowercase for Latin 1." Equal top and bottom overshoot on round characters, visual rather than mathematical equality, and visual rather than mathematical centring when spacing outlines. learn.microsoft.com/en-us/typography/develop/character-design-standards/lowercase

• Jamra, Mark. "Basic Character Spacing in Type Design." TypeCulture. Curved stems entering the space, the n and o reference values and which letters inherit them, and diagonals set between the two. typeculture.com/wp-content/uploads/2016/02/tc_article_20.pdf

• Strizver, Ilene. "TypeTalk: Hung Punctuation & Optical Margin Alignment." CreativePro, 9 March 2016, revised 9 June 2022. Characters affected, the 12 point default overhang, and setting it by eye. creativepro.com/typetalk-hung-punctuation-optical-margin-alignment/

• W3C. CSS Text Module Level 3, Candidate Recommendation Draft, 14 August 2026. The hanging-punctuation property and its at-risk status. w3.org/TR/css-text-3/

• MDN Web Docs. "hanging-punctuation." Value definitions and the limited-availability, non-Baseline status. developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation

• Jones, Luke. "Optical Adjustment: Logic vs. Designers." Marvel Blog, 5 August 2016. The 120 px square against the 126 px circle, the play triangle nudge, and the two-pixel uppercase reduction. marvelapp.com/blog/optical-adjustment-logic-vs-designers/

Related reading

• A Type Scale Is a Convention, Not a Law

• Hangul and the Square

• Colour Spaces, and Why Your Gradient Goes Grey

• Ulm, and the Idea That Design Could Have a Method

More from the Moc Mallen Studio journal