014 — Paddings for buttons
by Óscar Otero
1 min read
Texts always have extra space above and below, which depends on the ascenders and descenders of the font face and the line height. Buttons with text need more horizontal padding than vertical padding to visually compensate for this extra space.
The following button looks like there's a bit more space between the text and the border vertically (above and below) than horizontally (left and right).
Although "technically" the space is the same (10px), visually the extra space
of the text gives the impression of incorrect padding. Here we can see the space
occupied by the text:
The same button with more horizontal padding (15px) than vertical (10px)
looks more equilibrated:
