Font height causing uneven buttons…
This design is using the Adobe font organetto-variable. Which is fine, however it does have some odd spacing on the bottom which makes the top and bottom spacing look uneven.
I've been playing with line-height and block padding to no avail.
Is there a css property I am forgetting to remove the spacing with predictable results?
3 Replies
There is one, that isn't supported by any browsers yet 😅
Or actually, for that, it's something that is still in the works. There was a proposal a few years ago that finally started to pick up some momentum last year, but currently they're still talking about it, because it's going to be a really big thing.
Right now, the only real solution is different padding block and magic-numbering your way there
Thanks for the help
If you’re doing magic numbers, maybe you could put it in a div, make the div the height you want with the text aligned inside, then overflow: clip so it’s looking at the divs box and not text bounding box?
Or if you’re using flex I wonder if baseline would work. Maybe inside the green button you could have an invisible letter in the same font as the purple button and use baseline? Just spitballing would have to test that