[Button] small button text not vertically centered with Roboto

[apokusin]

Current behavior 😯

The text inside of a button with size="small" is not centered vertically. This is especially obvious when used with an icon or a contained/outlined button.

Expected behavior 🤔

The text inside of a button with size="small" is centered vertically.

Steps to reproduce 🕹

Steps:

1. Use <Button size="small">text</Button>
2. Observe text

Context 🔦

Codesandbox link

Screenshots:
Medium (alignment ok)

Small (text too high)

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

I can notice it. It could be a regression after the span wrapping the text was removed. @danilo-leal could you double-check this please?

[apokusin]

The CodeSandbox I've linked to above uses MUI 5.2.2, but I'm also seeing the issue as far back as 5.0.0-rc.0.

[danilo-leal]

I suppose it could be related to the text line-height. The tricky thing is that it seems the overall Button height is composed of the text line-height. In the below example, the texts are without line-hight which makes the Buttons smaller. They seem to be centered though.

If we were about to remove the typography variant button line-height, we should probably add a minHeight to each component size variant so they don't shrink. Does that make sense?

[siriwatknp]

If we were about to remove the typography variant button line-height, we should probably add a minHeight to each component size variant so they don't shrink. Does that make sense?

At this point, I suggest only adjusting to line-height: 1.5 for size small because changing to use minHeight in v5 might be a breaking change. In v6, we can revisit the size implementation again.

[oliviertassinari]

I had noticed the same problem, on macOS 12, Chrome v96! I'm glad we have an issue open about this problem. @apokusin thanks for the care ❤️ .

The large text and outlined variant feels a bit off too:

[shagungarg0]

can i work on this issue??

[abhinav-22-tech]

can i work on this issue??

#30240 This is already on hold.

[shagungarg0]

can i work on this issue??

#30240 This is already on hold.

I am a beginner and target gsoc this year..can you guide me that how i should start??

[danilo-leal]

Hey @shagungarg0, thanks for the willingness to start working on this issue. However, @abhinav-22-tech already took the lead and opened the PR for it but given it is a breaking change, we put it on hold until the next major (can't give you a prediction when that will happen exactly though).

To find more good opportunities to contribute and learn, you can filter the issues with good to take and good first issues labels and look around if any of them get you interested!

[sajid19]

I am new to the contribution. I want to work in this issue. May I?

[gauravsoti1]

@siriwatknp Should this still have a good first issue label? Won't it be better to have logos like v6 and on hold?

[danilo-leal]

Won't it be better to have logos like v6 and on hold?

Yup, I guess so! Thanks for the heads up @gauravsoti1!

[oliviertassinari]

Removing the "on hold" label @DiegoAndai started the work on Material UI v6.

---

It feels 1px off too in https://mui.com/material-ui/react-button/#material-you-version

With 1px less on padding-bottom:

Now, the problem seems to be Roboto font related. If change the font to "IBM Plex Sans", it looks great by itself, same if I use the system font on macOS.

I suspect we need that https://web.dev/css-size-adjust/#descent-override

[DiegoAndai]

@oliviertassinari should we fix this for v6 only? or for v5 as well?

[oliviertassinari]

descent-override: 15%; seems to be close to do the trick

before

https://codesandbox.io/s/iconlabelbuttons-material-demo-forked-m96yo?file=/demo.tsx

after

@font-face {
  descent-override: 15%;
  font-family: "Roboto";

(after)

https://codesandbox.io/s/iconlabelbuttons-material-demo-forked-8vtvv3?file=/public/global.css:34-56

---

Now, the challenge is, I don't see how we can customize descent-override with Google Font CDN or Next.js https://nextjs.org/docs/app/building-your-application/optimizing/fonts. I have open google/fonts#6739.

should we fix this for v6 only? or for v5 as well?

@DiegoAndai At this point, I think we could focus most of our energy on v6.

[oliviertassinari]

Another CSS property that ca help text-box-trim https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/