Optical Alignment

Mathematical centering is not the same as visual centering. Shapes with different weight, stroke, or fill read as misaligned even when their bounding boxes match exactly.

When to use

• Aligning an icon next to text (in a button, nav item, or list row).
• Centering a triangular "play" glyph, an arrow, or any asymmetric shape.
• Vertically centering text of two different weights or sizes in the same row.

Principles

• The eye tracks ink, not bounding boxes. A circle and a square of identical box size do not look the same size — the circle needs to be slightly larger to read as equal.
• Asymmetric shapes (play triangle, arrow, chevron) have their visual center offset from their geometric center. Nudge them 1–2px toward the "heavy" side.
• Baseline alignment beats box alignment for mixed type sizes: align on the text baseline, not the container edge.

Instructions

1. Never trust align-items: center blindly for icon + text pairs — check the rendered result at 2x zoom.
2. For play/arrow-style glyphs, shift 1–2px in the direction the shape "points," so the visual mass centers correctly.
3. When mixing font sizes in one row (e.g. a large number + a small label), align by baseline, then apply a small manual offset if the fonts have different x-heights.
4. Re-check alignment at the smallest size the component ships at — optical errors compound at small sizes.

Examples

// A play icon in a button needs a manual nudge — pure centering looks off-center
<button className="flex items-center justify-center">
  <PlayIcon className="translate-x-[1px]" />
</button>

Avoid

• Don't fix optical misalignment by eyeballing every instance separately — codify the offset as a token or variant so it's consistent.
• Don't apply the same nudge to every icon; only asymmetric shapes need it. Symmetric icons (circles, squares) usually don't.

References

• Concept borrowed from print typography's long history of optical vs. mathematical spacing.