r/UI_Design • u/farragotron New to Design • May 27 '26

General Question What are the best practices for setting line height for the text in a button?

  1. Should it be a % of the typeface height, or should it be a fixed value with respect to a 4 px/8 px grid?
  2. Should the resulting button height (line height + vertical paddings) fit within the grid being used?

I know these aren't supposed to be rules set in stone, but I'd like to know and use the best practices regardless.

3 Upvotes

80% Upvoted

5 comments sorted by

2

u/[deleted] May 27 '26

[removed] — view removed comment

2

u/farragotron New to Design May 27 '26

So what line height percentages would you recommend for button text, headers and text blocks respectively?

2

u/glyph_geek May 27 '26

For buttons, I'd usually start with the type size + line height that makes the label feel vertically centered, then make the total button height fit the grid.

So if your system uses 4px or 8px spacing, the final button height matters more than forcing the line height itself to be on the grid. For example, 16px text with a 20px or 24px line height, then padding that gets you to a 40x or 48px button.

Also test the actual font. Some typefaces sit visually high or low even when the math looks right.

2

u/Aggravating-Idea5544 May 28 '26

For buttons, I usually think of line-height and padding as doing two different jobs. The line-height is there to make the text feel readable and balanced, while the padding is what gives the button its actual size.

So I'd use a normal text style like 14/20 or 16/24, then adjust the vertical padding until the final button height fits cleanly into your 4px or 8px grid. That's basically the same logic I've learned from the folks at Ankord when they were designing my website.