Hacker News Reader

Comment by crazygringo | Hacker News Reader

This is an excellent piece, about how virtually impossible it is to center things accurately mostly because of how fonts are displayed.

But I'll add two more wrinkles that the author doesn't mention:

First, that font rendering isn't just about metrics but varies across operating systems and browsers. So even if you center perfectly on Chrome on your Mac, it may very well be off on Firefox on Windows.

And second, that the author's proposed solutions only work for Western-style fonts that have ascenders and descenders. It gets even trickier when you consider a range of totally different scripts from Asia etc.

View on HN

Yes, and let’s not forget fallback fonts. So rules for each browser and OS and each font class and each layout (desktop, tablet, mobile). Probably on the order of 100 rules for a single style. Yeah, we’re just being lazy.

We need sane font rendering in browsers that treat things like alignment in a way that we’d expect for the 99% case. If I say “center” it should just fucking center.

Fallback fonts are a legacy of the past though, in an era where everybody ships at least hundred of kilobytes of JS and images (when it's not tens of megabytes, but this is another topic…) there's no good reason to specify a font and hope it will be found on the customer's OS: ship the font you're using.

Depends on who you want to be able to access your site. Not everyone had 10Mbps+

You don't need 10Mbps to download a 30kB font file.

And if you're really targeting people that have trouble loading such a font file, then you have much, much bigger problems than centering things (you basically cannot put any image on your website).

A 30kb font file kinda website is probably gonna serve a 2Mb all up web page which at 100kbps is a slow experience.

> A 30kb font file kinda website is probably gonna serve a 2Mb all up web page

Where's that ratio coming from? Shipping fonts is just good practice when you want your website to look consistently on all platform, it doesn't mean anything else about how the website is made.

Also, 100kbps is a very slow connection, it's 2 orders of magnitude less than the 10Mbps you talked about earlier, and when you have this kind of very poor connection everything is kind of slow anyway (even the very barebone HN's front page is 120kb!).

No thanks, I don't want your shitty font file that only looks ok on whatever system you testet. All websites should use the system font for body text. The only problems is that a) the default browser font is usually some ugly shit instead of the system font and b) there is no way to specify size in a way that different fonts will actually be the same size. Both of these need to be fixed in the browser instead of hacking on more shit for each website.

> No thanks, I don't want your shitty font file that only looks ok on whatever system you testet.

Why would it looks bad elsewhere?

> All websites should use the system font for body text.

Wait what? There are very different requirements when it comes to reading system widgets and actual text! (like we don't use the same kind font for code and prose).

Which is why I've configured my browser to use the correct fonts that work for me. Use `font-family: revert;` for prose, and `font-family: system-ui;` for any widgets you've got.

I'm probably in a tiny minority, but I just flat out disable third party fonts. Everything looks equally good to me and I save bandwidth. The only expression are image fonts, which render as squares - I share the author's frustration.

Third party fonts are a privacy nightmare, especially when you know who's the biggest third party out there. But there's no good reason to source the fonts from a third party either: you can host them by yourself and serve them with the rest of the website.

Now disabling custom fonts altogether makes sense of you are trying yo save bandwidth, but then you aren't mad if things don't properly align.

That’s not true though. You don’t need different styles for text on different platfroms. They all work the same

I'm not sure about your experience, so I don't want to diminish it, but I have patently not found this to be true at all.

> First, that font rendering isn't just about metrics but varies across operating systems and browsers.

This is in parts, however, due to font metrics, because Windows and Mac use different conventions of how font metrics are specified in fonts: https://www.williamrchase.com/writing/2019-11-10-font-height... In other words, the usual font formats don’t specify font metrics in an unambiguous way.

Reply on news.ycombinator.com