Hacker News Reader

Comment by bufferoverflow | Hacker News Reader

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.

View on HN

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

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.

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.

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.

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.

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.

Here's an example:

https://jsfiddle.net/a3q87ucs/

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 [2]: https://medium.com/microsoft-design/leading-trim-the-future-...

> Stop trying to enforce pixel perfect control.

Not the least of which because of text size zooming for accessibility. The web is not print!

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.

Only if you're doing centering by hardcoded pixel offsets. Stop doing that.

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.

I don't think you understand the problem.

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.

this only looks terrible because you've forced a specific height in rem. 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/ 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.

> https://jsfiddle.net/vbd3fok5/ looks fine to me

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.

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.

> 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-notifi...

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.

  > 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.

> 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.

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.

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.

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/...

I think the other advice here is a little extreme. There is no reason not to try to normalise the appearance for all users.

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.

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.

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.

Use Arial everywhere?

Reply on news.ycombinator.com