3 ms·

If there’s anything I learned from studying design and typography, it’s that there’s no singular correct rule you can use to align things. Use precise measurem

If there’s anything I learned from studying design and typography, it’s that there’s no singular correct rule you can use to align things. Use precise measurements for your margins? Someone will say that perceptually it’s not symmetrical, and rightfully point out that perceived symmetry is the only one that matters. Adjust visually for your hanging punctuation, ascenders and descenders? Someone will draw a bunch of red lines and complain it’s not perfectly aligned with baseline, x-height, or whatever they prefer. GUIs around us are rich with obviously broken examples where spinners spin out of their centers, text in boxes is misaligned, etc. However, as articles like this one show, even if every one of those is dealt with, us designers will still have everything to complain about. (Pro tip: if you struggle to find something to complain about in the English version of a GUI, just switch to, say, Arabic.)

atoav 3y ago
Jup. Somw people like to think centering things is taking the bounding box of the visible pixel and centering the center of the bounding box. But some letters have more pixels in one half or the other, so that would leave you with more whitespace one one or the other side. That means despite being metrically centered it still doesn't look optically centered. I guess one could devise algorithms for that, but I haven't seen one that does a better job than my brain and my eyes.
- strogonoff 3y ago
  > 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).
  - dsego 3y ago
    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.
    - strogonoff 3y ago
      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.
  - aldousd666 3y ago
    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
- kevincox 3y ago
  The problem with your brain and your eyes are that they aren't available after the user picks their preferred font or for user-generated content or probably not after the text had been translated.
  - strogonoff 3y ago
    We can safely assume at that point the GUI may not look exactly as intended either way.
- nsajko 3y ago
  Not an expert, but I think your example is actually a solved issue nowadays: https://en.wikipedia.org/wiki/Microtypography https://en.wikipedia.org/wiki/Microtypography I know the newer TeX engines, for example, support microtypographical corrections.
liampulles 3y ago
Indeed I think the advice around calibrating fonts is not going to work if the text is long or has an unusual arrangement of ascenders and descenders. The reality is that centring is very context specific.

atoav 3y ago

Jup. Somw people like to think centering things is taking the bounding box of the visible pixel and centering the center of the bounding box. But some letters have more pixels in one half or the other, so that would leave you with more whitespace one one or the other side. That means despite being metrically centered it still doesn't look optically centered. I guess one could devise algorithms for that, but I haven't seen one that does a better job than my brain and my eyes.

strogonoff 3y ago
> 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).
- dsego 3y ago
  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.
  - strogonoff 3y ago
    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.
- aldousd666 3y ago
  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
kevincox 3y ago
The problem with your brain and your eyes are that they aren't available after the user picks their preferred font or for user-generated content or probably not after the text had been translated.
- strogonoff 3y ago
  We can safely assume at that point the GUI may not look exactly as intended either way.
nsajko 3y ago
Not an expert, but I think your example is actually a solved issue nowadays: https://en.wikipedia.org/wiki/Microtypography https://en.wikipedia.org/wiki/Microtypography I know the newer TeX engines, for example, support microtypographical corrections.

liampulles 3y ago

Indeed I think the advice around calibrating fonts is not going to work if the text is long or has an unusual arrangement of ascenders and descenders. The reality is that centring is very context specific.