5 ms·

I'm actually dealing with the massive font differences that break the designs, and I don't know how to solve it. The designer specced the fonts that are availab

I'm actually dealing with the massive font differences that break the designs, and I don't know how to solve it. The designer specced the fonts that are available on different OSes. Something like font-family: X, Y, sans-serif;. 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.

kevin_thibedeau 4y ago
Stop trying to enforce pixel perfect control. This is equivalent to old school Win32, VB6 GUIs with hardcoded pixel positioning of all controls designed to work on a 640x480 screen. Web technologies are designed to accommodate flexible layout. Accepting font rendering differences is part of that.
- bufferoverflow 4y ago
  It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.
  - kevin_thibedeau 4y ago
    You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.
    - bufferoverflow 4y ago
      I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.
    - bufferoverflow 4y ago
      Here's an example: https://jsfiddle.net/a3q87ucs/ https://jsfiddle.net/a3q87ucs/
  - saadat 4y ago
    The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it. [1]: https://www.w3.org/TR/css-inline-3/#leading-trim https://www.w3.org/TR/css-inline-3/#leading-trim [2]: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202 https://medium.com/microsoft-design/leading-trim-the-future-...
- jsjohnst 4y ago
  > Stop trying to enforce pixel perfect control. Not the least of which because of text size zooming for accessibility. The web is not print!
- tshaddox 4y ago
  It’s not as petty as you make it sound. You don’t have to pixel peep to spot the differences. Switching to a different font can break basic stuff like text in a button being vertically centered, which can look broken or amateurish to normal site visitors.
  - blep_ 4y ago
    Only if you're doing centering by hardcoded pixel offsets. Stop doing that.
    - thundermuffin 4y ago
      You can still have this problem apply even if you are using flex and aligning items to the center. 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.
    - bufferoverflow 4y ago
      I don't think you understand the problem. Here, try to align these without changing individual p's CSS: https://jsfiddle.net/a3q87ucs/ 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.
      - Hello71 4y ago
        this only looks terrible because you've forced a specific height in rem. https://jsfiddle.net/vbd3fok5/ https://jsfiddle.net/vbd3fok5/ looks fine to me. there is some extra space, but I assume that if the font designer added extra space on top of the text, they did it on purpose. if you insist on ignoring that, https://jsfiddle.net/qpb0d45n/ https://jsfiddle.net/qpb0d45n/ makes the text "visually continuous", at least for a non-Korean reader like myself. I would speculate that a Korean user might look at this and ask why the site designer ignored their font's preference for space above the text.
elondaits 4y ago
In the past I found slight width differences between Windows and Mac that made a text take up a second line. Also, Google Fonts sometimes are updated and this can cause letter widths to change. … 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.
- bufferoverflow 4y ago
  > My recommendation is not to implement any design that can’t handle the difference 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-notified-once-a-web-font-has-loaded https://stackoverflow.com/questions/5680013/how-to-be-notifi...
  - onli 4y ago
    You can not solve that problem. You can not even guarantee font size, it's useless to worry about a font's width. Part of your job as a web developer is to make your employer understand the realities of the web platform.
  - dotancohen 4y ago
    > 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. Though you might make the site pixel-perfect on _your_ device with _your_ fonts (all the combinatorics you can think of to test), you are likely breaking something for a screen reader, or user with 200% zoom, or a braille user, or a user with hardcoded fonts for disability reasons, or a user using a Windows phone browser, or a user on IE 8, or a user viewing the site through a corporate proxy that blocks some requests, or a user with CSS styles disabled, or a user who hasn't updated his Mac in six years, or a miriad of other cases. When you're reimplementing basing browser functionality, you're breaking your site for a lot of users.
sjroot 4y ago
Web dev for many years chiming in: please step awayyyyy from the ugly solution. As another reply stated, you cannot guarantee pixel-perfect decision without sacrificing other aspects. It’s not something you should strive for at all in {current year}. 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.
deleted 4y ago
[deleted]
SenHeng 4y ago
At some point, you just have to give up and understand that a pixel perfect representation of a design is not possible. We're not working in print anymore. 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]. 0: https://en.wikipedia.org/wiki/Widows_and_orphans https://en.wikipedia.org/wiki/Widows_and_orphans
- sings 4y ago
  Personally, I think orphans are bad typography and have little to do with pixel perfection. I don’t see why responsive web design necessarily requires bad typography. Given the tools to address these issues, such as Adobes proposed `text-wrap: balance`, I am sure many would do so.
sings 4y ago
You may be able to override metrics of different fonts with CSS, using ascent-override and descent-override and the local() function to target a font on the system. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override 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.
- bufferoverflow 4y ago
  ascent-override / descent-override isn't supported by Safari. Which is half of my problem. We have Mac users using Safari / Chrome / FF, and we have Win users using Chrome / FF / Edge.
httpsterio 4y ago
You should use values like rem, em and ch as they're related to font sizes. If your root font size is 16px then 1rem equals 16 px, you can set the line height to 1.5rem etc. With ch you can limit how many characters an element should fit.
omnimus 4y ago
Just use a webfont. This is main reason people still buy webfont licenses for Arial (not cheap). They need consistency. 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.
phelm 4y ago
Use Arial everywhere?

kevin_thibedeau 4y ago

Stop trying to enforce pixel perfect control. This is equivalent to old school Win32, VB6 GUIs with hardcoded pixel positioning of all controls designed to work on a 640x480 screen. Web technologies are designed to accommodate flexible layout. Accepting font rendering differences is part of that.

bufferoverflow 4y ago
It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.
- kevin_thibedeau 4y ago
  You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.
  - bufferoverflow 4y ago
    I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.
  - bufferoverflow 4y ago
    Here's an example: https://jsfiddle.net/a3q87ucs/ https://jsfiddle.net/a3q87ucs/
- saadat 4y ago
  The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it. [1]: https://www.w3.org/TR/css-inline-3/#leading-trim https://www.w3.org/TR/css-inline-3/#leading-trim [2]: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202 https://medium.com/microsoft-design/leading-trim-the-future-...
jsjohnst 4y ago
> Stop trying to enforce pixel perfect control. Not the least of which because of text size zooming for accessibility. The web is not print!
tshaddox 4y ago
It’s not as petty as you make it sound. You don’t have to pixel peep to spot the differences. Switching to a different font can break basic stuff like text in a button being vertically centered, which can look broken or amateurish to normal site visitors.
- blep_ 4y ago
  Only if you're doing centering by hardcoded pixel offsets. Stop doing that.
  - thundermuffin 4y ago
    You can still have this problem apply even if you are using flex and aligning items to the center. 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.
  - bufferoverflow 4y ago
    I don't think you understand the problem. Here, try to align these without changing individual p's CSS: https://jsfiddle.net/a3q87ucs/ 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.
    - Hello71 4y ago
      this only looks terrible because you've forced a specific height in rem. https://jsfiddle.net/vbd3fok5/ https://jsfiddle.net/vbd3fok5/ looks fine to me. there is some extra space, but I assume that if the font designer added extra space on top of the text, they did it on purpose. if you insist on ignoring that, https://jsfiddle.net/qpb0d45n/ https://jsfiddle.net/qpb0d45n/ makes the text "visually continuous", at least for a non-Korean reader like myself. I would speculate that a Korean user might look at this and ask why the site designer ignored their font's preference for space above the text.

elondaits 4y ago

In the past I found slight width differences between Windows and Mac that made a text take up a second line. Also, Google Fonts sometimes are updated and this can cause letter widths to change. … 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.

bufferoverflow 4y ago
> My recommendation is not to implement any design that can’t handle the difference 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-notified-once-a-web-font-has-loaded https://stackoverflow.com/questions/5680013/how-to-be-notifi...
- onli 4y ago
  You can not solve that problem. You can not even guarantee font size, it's useless to worry about a font's width. Part of your job as a web developer is to make your employer understand the realities of the web platform.
- dotancohen 4y ago
  > 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. Though you might make the site pixel-perfect on _your_ device with _your_ fonts (all the combinatorics you can think of to test), you are likely breaking something for a screen reader, or user with 200% zoom, or a braille user, or a user with hardcoded fonts for disability reasons, or a user using a Windows phone browser, or a user on IE 8, or a user viewing the site through a corporate proxy that blocks some requests, or a user with CSS styles disabled, or a user who hasn't updated his Mac in six years, or a miriad of other cases. When you're reimplementing basing browser functionality, you're breaking your site for a lot of users.

sjroot 4y ago

Web dev for many years chiming in: please step awayyyyy from the ugly solution. As another reply stated, you cannot guarantee pixel-perfect decision without sacrificing other aspects. It’s not something you should strive for at all in {current year}. 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.

deleted 4y ago

[deleted]

SenHeng 4y ago

At some point, you just have to give up and understand that a pixel perfect representation of a design is not possible. We're not working in print anymore. 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]. 0: https://en.wikipedia.org/wiki/Widows_and_orphans https://en.wikipedia.org/wiki/Widows_and_orphans

sings 4y ago
Personally, I think orphans are bad typography and have little to do with pixel perfection. I don’t see why responsive web design necessarily requires bad typography. Given the tools to address these issues, such as Adobes proposed `text-wrap: balance`, I am sure many would do so.

sings 4y ago

You may be able to override metrics of different fonts with CSS, using ascent-override and descent-override and the local() function to target a font on the system. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override 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.

bufferoverflow 4y ago
ascent-override / descent-override isn't supported by Safari. Which is half of my problem. We have Mac users using Safari / Chrome / FF, and we have Win users using Chrome / FF / Edge.

httpsterio 4y ago

You should use values like rem, em and ch as they're related to font sizes. If your root font size is 16px then 1rem equals 16 px, you can set the line height to 1.5rem etc. With ch you can limit how many characters an element should fit.

omnimus 4y ago

Just use a webfont. This is main reason people still buy webfont licenses for Arial (not cheap). They need consistency. 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.

phelm 4y ago

Use Arial everywhere?