News for hackers. Stuff that matters.
Re:Typescale: A Tool for Easy CSS Typography by wildrhythms on Friday May 19, 2023 @07:59AM (#36000742)
This is a nice visualization tool for seeing how these fonts will scale in your browser. Nice job!

I always consider: That 9px text might look readable on your 4K iMac, but how about your users on a budget Chromebook with a 720p display? And text rendering differences between browsers and operating systems is still something that severely affects how the text looks, especially at thin font weights that seemed to be all the rage a few years ago.

Re:Typescale: A Tool for Easy CSS Typography by graup on Friday May 19, 2023 @08:05AM (#36000797)
Also, for users that have any of the CJK languages as their default browser language, Chrome enforces a minimum font size of 10 (or 12?) pixel, so anything smaller should be avoided anyway if you care about rendering similarly for all viewers. https://bugs.chromium.org/p/chromium/issues/detail?id=36429
Re:Typescale: A Tool for Easy CSS Typography by lisrjflksdjfi on Friday May 19, 2023 @09:02AM (#36001417)
The fact you can even read a not-really-"9px" font on a retina display highlights how wrong browsers get things when they try to move too fast to quickly patch things. and more importantly, when the companies selling the new displays get a say on the html/css spec.

yeah, chrome and safari supported retina displays on day one, but at yet another huge consistency nuclear bomb that we now have to remember forever.

Re:Typescale: A Tool for Easy CSS Typography by chrismorgan on Friday May 19, 2023 @09:20AM (#36001610)
… what?

I have no idea what you’re trying to say, but I’m pretty sure you’re misunderstanding something.

Re:Typescale: A Tool for Easy CSS Typography by Guidii on Friday May 19, 2023 @10:35AM (#36002496)
Font sizes get scaled in the browser. So when you ask for a 9px font, the browser treats that as 9px in virtual pixels, then maps it into 18px physical pixels.

It mostly works, but gets weird when you have non-scaled content in the design.

Re:Typescale: A Tool for Easy CSS Typography by chrismorgan on Friday May 19, 2023 @10:46AM (#36002597)
Ah, that could be the misunderstanding.

You don’t have non-scaled content in the design. Everything is scaled. <img width="32" height="32"> will be 32px (as in, CSS pixels) wide, whether that means 32dpx (device pixels) or 64dpx or something else.

(OK, so there are a few escape hatches; you have things like <img srcset> which allow you to choose different image sources for different scaling factors, and you can also query devicePixelRatio and change things based on it—though all of this isn’t actually guaranteed to map to physical pixels, e.g. my system uses 1.5× scaling but Firefox hasn’t finished implementing fractional scaling under Wayland so it renders at 2× and then scales down to 1.5×, so any line that is carefully made “one device pixel wide” will actually only be ⅔ of a device pixel.)

Re:Typescale: A Tool for Easy CSS Typography by tracker1 on Friday May 19, 2023 @12:32PM (#36003808)
In browsers, there are supposed to be roughly 72px per inch. This should get scaled, assuming the OS/Browser knows what the actual pixel density per inch is. And even then the scaling may not be linear to reality.

If you've ever run a mobile device without the real dimensions set properly (cheaper models, or custom roms) it gets interesting to say the least. Having less than stellar vision up close, I have every accessibility setting on my phone maxed... It's bad enough as it is the number of applications/sites that will render (in particular modals) off-screen.

In the end, however, nearly everything is scaled to either the real pixels, or often assume 72/inch as the actual screen density and scale accordingly. You really never know which.

Re:Typescale: A Tool for Easy CSS Typography by chrismorgan on Friday May 19, 2023 @12:43PM (#36003958)
Correction: The CSS units are defined as 96px = 1in. It’s the point that’s 1⁄72 inch.

My comment elsewhere in the thread is relevant on these units and how they’re anchored: https://news.ycombinator.com/item?id=36001822.

Re:Typescale: A Tool for Easy CSS Typography by tracker1 on Friday May 19, 2023 @04:19PM (#36006388)
Yeah, I often get the two conflated... in either case, it's never, or at least rarely accurate.