Hacker News new | past | comments | ask | show | jobs | submit login

> Somw people like to think centering things is taking the bounding box of the visible pixel and centering the center of the bounding box.

That was my naive understanding for probably my first year at the uni. It got cleared up fairly quickly.

I imagine there can be typesetting/layout styles where this holds, but I would classify them as niche (maybe brutalism or something like that).

Funnily enough, in the very first example under Fonts I thought the author didn’t like “Manage…” because it could be pushed slightly to the right (due to ellipsis), but it turns out to be about vertical alignment which I didn’t see anything obviously wrong about in that particular case.

Once you deal with the obvious cases of lopsidedness in your design, the important quality becomes simply: stay consistent. Here, no self-respecting designer would pull one random example and say it’s wrong—you have to assess in context of design model as a whole, where you can either 1) show how one particular button breaks the model, or 2) argue that the model is wrong (which can be done, but good luck).




This vertical centering of text in buttons is more noticeable when there is an icon next to it. But it drives me crazy that the default is not to center around the cap and baseline. This is what I usually see in figma designs and it looks the best, but it's not simple to apply in html & css.


If the button is not in all caps, i.e. the first letter is substantially taller, then aligning by baseline & cap would make the text as a whole look too low (depending on x-height).

Icons can be less ambiguous, but still it depends on the shape and white space within one and the interplay with text label.

I think it all depends on your vision and its consistency.


You can actually still do it. Just don't measure until after the fonts and elements are in place. dynamically adjust the position afterward. There is no rule that says you must use only CSS




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: