I thought something like this would been obvious after 2 decades of transitioning from print to web design, but I sometimes still get complaints for things like widows and orphans [0].
Given the tools to address these issues, such as Adobes proposed `text-wrap: balance`, I am sure many would do so.
Not the least of which because of text size zooming for accessibility. The web is not print!
If a font has some weird characteristic about it (for instance, the font itself has built in whitespace at the bottom or top of letters), you will not be able to center it vertically no matter what CSS magic you try to do except for doing some kind of translation on it; that translation doesn't have to be pixel-based either, but it will 100% have to happen until hopefully when the leading-trim property that saadat mentioned is widely available.
Here, try to align these without changing individual p's CSS:
https://jsfiddle.net/a3q87ucs/
You see how the second text is lower. That has to do with internal font settings that CSS has no control of. Not yet at least.
No, it doesn't. Here's the screenshot with a line I added:
https://i.imgur.com/6pLiasn.png
> if you insist on ignoring that, https://jsfiddle.net/qpb0d45n/
And now you have blocks of different heights. Which cause other issues.
[1]: https://www.w3.org/TR/css-inline-3/#leading-trim [2]: https://medium.com/microsoft-design/leading-trim-the-future-...
… My recommendation is not to implement any design that can’t handle the difference. This will be more robust and better for you in the future (e.g. i18n, zoomed fonts for a11y, etc.). Whenever I worked implementing a design by someone else and there were overly strict assumptions about text size I let them know this was a problem and suggested an alternative.
The problem with your proposed solution is that if you’re using a webfont and measure before it loads, it won’t match the width once it’s replaced. Also, back in the day browsers came with a command to increase char size instead of zooming the whole page… I no don’t know if some still do, or if it happens under certain contexts (a11y extensions?) but that would also break.
I'm not going to tell my employer I'm not implementing the design, when I can solve the problem, though in an ugly way.
> if you’re using a webfont and measure before it loads
That's not a problem. You can check if the font has loaded.
https://stackoverflow.com/questions/5680013/how-to-be-notifi...
> I'm not going to tell my employer I'm not implementing the design, when I can solve the problem, though in an ugly way.
When you're reimplementing basing browser functionality, you're breaking your site for a lot of users.
Sometimes graphic designers don't understand all the implications of their design choices in a dynamic medium. It is my job, as an experienced professional, to steer them away from the problems and do the best to capture their intention.
Almost every time designers (who many times were my employers) understood the issue when pointed out and agreed with my solution. Their designs normally only consider the "ideal" cases (e.g. every title / item description fits nicely) because they have to make it look good for the client, but they know reality requires compromise.
If you want to align the text vertically with an image, use flexbox. If the specific font they want to use doesn’t look right in that context, have them either (1) deal with it or (2) pick another font.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...
I think the other advice here is a little extreme. There is no reason not to try to normalise the appearance for all users.
We have Mac users using Safari / Chrome / FF, and we have Win users using Chrome / FF / Edge.
It´s admirable to try to have look of a native platform but nobody thinks this way about websites. Plus only very small % of people would even realize difference between those sans serifs if they werent looking for it side by side.
The problem is, X and Y have different line heights and different widths. And there's no CSS / media query way to detect which font is available.
So far I'm leaning towards a very ugly solution: rendering a test string into a DIV, measuring it, and then applying the correct class to the parent element.