Optical alignment beats mathematical alignment

Filed under alignment

Every layout engine aligns rectangles. Every reader aligns shapes. Most of the time these agree well enough that nobody notices. The interesting cases are the ones where they do not, and they are predictable enough to be worth listing.

Round shapes need to overshoot

An o set to exactly the same height as an x looks smaller. A circle touches its baseline at a single point while a flat-bottomed letter touches along a whole edge, and the eye reads the flat contact as more presence. Type designers have compensated for this for centuries by drawing round letters slightly taller at top and bottom than flat ones. Nobody notices, which is the point.

The same correction applies to anything you draw yourself. A circular bullet, a dot in an icon, a round avatar next to square cards — matched mathematically, the round one reads as undersized. It needs a percent or two of overshoot to look equal.

Punctuation belongs outside the column

Start a paragraph with a quotation mark and the first line appears indented relative to the ones below it, because the quote is mostly air. The fix is to hang it: pull the punctuation into the margin so the first letter of actual text lines up with the letters beneath it. Old books do this everywhere. Screens mostly do not, because it takes deliberate effort and the default is to leave the glyph inside the box.

The bounding box is a fact about the font file. The edge of the column is a fact about what the reader sees.

Centring is rarely centring

Centre a line of text and the engine centres its bounding box. If the line ends in a comma, or begins with a capital W whose diagonals leave a wedge of space, the visual centre and the box centre are different points — and the discrepancy grows as type gets larger, which is exactly where centring is most used. At heading sizes it becomes visible.

Icons next to text

The reliable failure. An icon in a 24-pixel box beside 16-pixel text will sit too high or too low if you align the boxes, because the text occupies perhaps eleven of its sixteen pixels while the icon fills its square. Align the ink, not the container: match the icon's optical centre to the text's x-height midpoint, then nudge until it stops looking wrong. The nudge is usually half a pixel's worth of judgement and no formula will produce it.

How to check

Squint. Blurring the page collapses it to blocks of tone, and misalignment survives the blur while the details do not. It is a crude test and it is faster than any measurement.