Optical Alignment

012 min

The problem optical alignment solves

Say a designer is drawing a play button for a video app. It is a triangle that points right, inside a circle. They select both shapes and use the center command. The software puts the triangle exactly in the middle, yet the triangle looks as if it sits too far to the left.

The software did what it was asked. It centers a shape by its bounding box, which is the smallest rectangle that fits around the shape. For a square or a circle, the middle of that rectangle is also where the eye expects the middle to be. A triangle is different. Its left side is a tall flat edge and its right side narrows to a point, so most of the shape sits on the left. The middle of the rectangle is not the middle of the shape.

People do not read a shape as a set of coordinates. They read how much of it is there and where it sits. That is why a position can be correct by measurement and still look wrong. To fix it, the designer stops trusting the numbers for a moment and moves the shape until it looks right. In the play button, that means shifting the triangle to the right, away from its heavy side.

The alternative has a name too. Mathematical alignment places things by measured coordinates, and it is enough in most layouts. Optical alignment matters for the shapes where the numbers and the eye disagree.

022 min

How optical alignment works

The play button is one case of a general rule. The eye judges a shape by its visual weight, which is how much mass the shape seems to have and where that mass sits. To find where a shape looks centered, a designer asks where its weight is, not where its outline ends.

A square and a circle show the rule in its simplest form. Draw both 24 pixels wide and 24 pixels tall, and the circle looks smaller. The corners are the reason. A square fills its whole box, and a circle fills about 79% of it. Designers make up the difference by drawing the round shape a little larger.

In an equilateral triangle, which has three equal sides, the centroid is one third of the way along from the flat side. The bounding box center is halfway. So the triangle has to move toward its point by one sixth of its width. For a triangle with a 24 pixel flat side, the width is about 20.8 pixels and the move is about 3.5 pixels. Edwards reports that when the centroid sits on the circle's center, the triangle looks centered, and its three corners are the same distance from the edge of the circle.

032 min

Optical alignment in letters: overshoot

Type designers met this problem long before interface designers did. Take a capital O and a capital H. If the O were drawn exactly as tall as the H, it would look shorter, for the same reason a circle looks smaller than a square. So type designers draw the O slightly taller, and its top and bottom go a little past the lines where flat letters stop. That extra height is called overshoot. Its purpose is that letters of different shapes look the same size even though they are not.

How much letters overshoot

The amount depends on the typeface. About 1% to 3% of the height of a capital letter is typical for the O. Peter Karow, in his book Digital Formats for Typefaces, recommends 3% for an O and 5% for an A. Pointed letters need more because the tip of the A touches the line at a single spot and holds almost no weight there.

Take a typeface whose capitals are 700 units tall; the size is made up for this example. An O with 3% overshoot goes 21 units past the line at the top and again at the bottom.

The same fix in the game of go

Go is played with black and white stones. The stones are made in slightly different sizes, with the black ones a little larger, so that side by side the two colors appear to be the same size.

042 min

Optical margins and hung punctuation

The same problem appears at the edge of a column of text. Picture a block quote in a book. Its first line begins with an opening quotation mark, so the first word of that line starts a little to the right of the first word on every other line. The fix is to hang the mark: place it in the margin, outside the text edge, so the words of all lines start on one straight line.

Page layout programs do this with a setting called optical margin alignment. It moves letters such as A, V, W and Y, and punctuation, a little way into the margin so the edge of the text looks even. These characters leave empty space at the line edge, so a line that starts or ends with them looks shorter than it is. The idea reaches past punctuation. In a list on a screen, a bullet or an icon can hang to the left of the text edge, so that the words line up with the heading above them.

052 min

Optical alignment in interface design

Interfaces bring the same effects, and designers meet them while building components.

Icons come first. In an icon set, round icons are drawn a little larger than square ones, and icons with a heavy side are shifted away from it. Google's design team described one case when it introduced its single-letter G icon in 2015. The icon was drawn on the same grid as the company's product icons. Its circular part was adjusted by eye to avoid a visual "overbite" where it meets the crossbar.

Designers report the same adjustment in other places: the padding of icon buttons, the position of a dropdown menu under its trigger, and the start of text in a rounded input field.

061 min

Other shapes the eye misjudges

Overshoot, hanging and centroids are the corrections with the clearest published sources. Logo and interface designers list others. None has a single fixed value, and each is judged in the design at hand.

• A triangle looks larger than a circle of the same height.
• A vertical line looks longer than a horizontal line of the same length.
• Thin strokes lose visibility sooner than bold shapes.
• An object centered in a frame looks lower than it is, so designers place it a little higher.
• A white shape on a dark ground looks heavier than the same shape in black on a light ground.
• The same color can look different next to different neighbors, which changes how heavy the shape seems.
• Words in capitals next to words in mixed case look larger, so designers reduce them slightly.
• A centered word that begins or ends with an open letter such as T or L can look lopsided.

071 min

Applying optical alignment

Work through these steps in order.

1. Align by measurement first. Most layouts need nothing more.
2. Look for the shapes where measurement and sight disagree: triangles, circles beside squares, arrows, and text that starts with punctuation.
3. Move a shape away from its heavy side, and draw a round shape a little larger than a square one. Keep each change small.
4. Check the result three ways. Zoom out so the details blur. Flip the design horizontally. Put it on light and dark backgrounds.
5. Where the same shape repeats, use a number instead of judgment. The area ratio, the centroid and CSS text trimming give the same answer every time.
6. Write the offset into the component. If a triangle needs a 3.5 pixel shift, store it in the icon file, so the next person does not undo it with the align command.

If your team works on an 8-point grid, optical offsets are the exceptions. They let a few elements sit off the grid so the whole looks aligned.

081 min

When optical alignment goes wrong

Optical alignment fails in two ways.

091 min

Optical alignment vs nearby ideas

Optical alignment is often confused with ideas that also adjust how things look. The axis that separates them is what each one decides.

?3 questions

Questions people ask

§10 sources

Sources