Optical Alignment
Adjusting the visual position of elements to appear centred or aligned, even when they are not mathematically so.
Plain English
Maths and eyes disagree. A circle centred mathematically inside a square looks like it is sitting too low. An icon with equal padding on all sides looks optically off-centre because its visual weight is distributed unevenly. Optical alignment corrects for this — shifting elements slightly from their mathematically perfect position so they look right to the human eye, which is the only judge that matters.
Technical
Optical corrections are made with small offsets: icons in buttons often need margin-bottom: 1–2px to appear vertically centred; circular avatars may need padding-top: 1px to offset baseline offset. Text with descenders (g, p, y) appears lower than text without. Numbers in geometric icon containers often need transform: translateY(-1px). There are no universal rules — optical alignment must be tuned visually, not calculated.
Live Demo
Mathematical center
Icon sits exactly at 50% — but the star's visual mass pulls it low, making it look misaligned.
Optical nudge (+1px)
1px downward nudge (mb-px) optically centres the star against the label.
Mathematical center ≠ visual center. Adjust by 1–2px to satisfy the eye.
Usage
✓ Good usage
After mathematically centring an icon inside a button, check visually and add margin-top: 1px if it appears to sit slightly low — that 1px difference is optical alignment at work.
✗ Bad usage
Trusting only the bounding box coordinates in a design tool — "it's centred in Figma" does not mean it looks centred in the browser.
Recommended values
- Icon in a button: adjust by 1–2px if it looks low or high after mathematical centering
- Text in a circular badge: may need padding-top: 1–2px to compensate for cap-height vs line-height
- Number in a pill badge: font-variant-numeric: tabular-nums helps consistency
- Logo/wordmark in a header: let the visual weight, not the bounding box, determine spacing
Common mistakes
- Trusting mathematical centring without visual verification.
- Over-correcting — large offsets signal a different underlying problem (wrong line-height, wrong icon size).
- Applying the same optical correction to all browsers — rendering differences mean corrections may need to be browser-specific.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
After implementing any icon-in-button or text-in-badge layout, check visually in the browser and apply 1–2px optical corrections as needed. Prioritise how it looks over what the numbers say.