Optical alignment
Geometric centring is a starting point. When it looks wrong, it is wrong, and the fix is usually two pixels.
A button with a trailing icon looks unbalanced with symmetric padding, because the icon has less visual weight than the letters. I start with two pixels less on the icon side and adjust from there. A play triangle's geometric centre is not its visual centre; it wants to sit slightly right of the maths. Heavy shapes read larger than light ones at the same size, so a filled icon may need to be a size down from its outline sibling.
- Icon-side padding = text-side padding − 2px, then look
- Triangles and arrows shift toward their point
- Quotation marks and bullets hang outside the text edge where the layout allows
The test is always the same: squint, or step back, and ask whether the thing sits. If it does not, move it until it does and write the value down.