This font is gigantic. And the text is a bit too wide. It feels as if I had to do a marathon from left to right on each line.
I wish the web didn't have the possibility of styling its content and would only use standard options which would be customizable by users. E.g. as a webdev, you wouldn't be able to set the font face beyond "serif", "sans-serif", "monospace" and then everybody could just set those to what they like. Similarly, there would be no "font-size". You'd have to use semantically correct HTML tags and the user would choose the font size for these tags. I'm tired of 99% pages being unreadable. Reader mode is a hack.
EDIT: To clarify, the text on this page renders on my 4k screen with 170% scaling as ~31cm wide and each character is ~1cm tall.
And sure enough, the CSS responsible for this part contains "font-size: 22.4px;". That's beyond reasonable for normal body text.
And yet, it is perfect for me. I end up zooming most web pages somewhere between 150%-200%. Right now I have HN at 200% zoom. This is on a 12" 1080p laptop. I do similar on a 27" 1440p on my desktop.
Turns out that one person's subjective experience doesn't form a factual standard for design.
Ironically design standards specify a 12" laptop with a 1080p screen is supposed to have a ~175% scaling factor (smack dab between where you said you set page zooms to) and not needing it for the page when you use exactly that for everything else is in fact why design standards would say it's larger than it's supposed to be.
Do you know, or point me to where I could find the scaling factor suggested for 27" 1440p? I zoom similarly on that monitor. Having checked the linked page again, I find it comfortable without zooming on this monitor as well.
https://www.sven.de/dpi/ will give you the literal PPI for any display assuming square pixels. If you take 96/PPI you get the literal scaling factor. If you apply this scaling factor to the display (preferably OS level) when an app says "make a line 5 inches wide" and you put a ruler up to the screen it should now actually be 5 inches wide (note many displays round up their size e.g. 28" might really be a 27.5" diagonally which can affect the result). On the web 1 CSS "pixel" is defined to be 1/96th an inch regardless of how big an actual pixel on the display is for backwards compatibility purposes and the system scaling factor * browser zoom let the browser know how many pixels need to be drawn for 1 "CSS pixel". This means there is no actual pixel layout in CSS, "px" is really just shorthand for "1/96th an inch" which on traditional density displays happens to also be 1 physical px.
For perceived size you need to also factor in your viewing distance though which matters more with things like monitors and TVs that can vary in position a lot from setup to setup vs a phone in your hand or laptop at hands reach for the keyboard. That is to say viewing a 4k TV from 15 feet a 1 inch image covers less visual arc than viewing the same 1 inch image a 4k phone 1 foot from your face so you've got to correct display distance against some assumed standard view distance. For computer displays this is assumed to be ~2 feet which should let you do some math based on the actual distance to your monitor to get intended visual size.
Now the fun part is personal preference can still work it's way in at that last step. The above lets you get to a standard perceived size and should be used as for exporting and publishing things so the above all works (i.e. if you publish something made on a display that showed things as being half the standard size without correcting the scale when publishing and everyone bases their scaling on standard size then everyone ends up having to zoom 200% on your website even though their scaling factor is set correctly). On the other hand the above does not mean that you MUST set it that way to view content though. Have bad eyes? Just like things bigger? Set your scaling factor to be 2x bigger than your scaling is "supposed to be" - just remember when you publish content you need to set the scaling of the layout/content to 50% or you'll break everyone else's scaling factors.
tl;dr: Assuming 2 ft view distance, 2560x1440, and square pixels it should actually already be around the standard scaling anywhere between 100% or 125%. At 3 ft perceptually more like the 175% you're used to (especially if you lean back in your chair while reading).
I'm the blog's author. Can you advice on some CSS fixes, I'm not experiencing what you're describing on my phone (Chrome and Firefox) nor my desktop (also Chrome and Firefox). Could you also share a screenshot please.
In my opinion: use black instead of #333 for the font text, and do not reduce font weight. There is virtually no excuse to harm legibility like that. Basically keep in mind you are optimising for your users' experience, not for your website looking good on screenshots.
I see you used "width: 60%" to specify the width of the article text. That's probably good for narrower screens, but on its own can have unpleasant effects on wider ones. Consider adding "max-width: 39em" to mitigate it. You may fiddle a bit with the exact value there to see what works for your website.
As to the text size, you used "font-size: 1.4em". I think that in this regard it's best to rely on the defaults and set "font-size: 100%" in "html, body" and then "font-size: 1rem" for the tag where the main text is contained.
I just retried viewing this page after rebooting into Windows and it looks completely different. The text is a lot smaller than on Linux. So Windows handles HiDPI a lot differently, it seems. But my own website looks exactly the same on Linux and Windows. I'm using a "reset.css" --- maybe that's what's at play here.
In any case, our impressions being different only prove my point about standardized styling of webpages.
For me, the font is way too light. I see you have `font-weight: 200` on the body and `font-weight: 300` on the content. Both render the same for me. The light font is way too weak in contrast, so deleting those both CSS rules and going with the default font-weight of 400 makes it much more readable for me.
I wish the web didn't have the possibility of styling its content and would only use standard options which would be customizable by users. E.g. as a webdev, you wouldn't be able to set the font face beyond "serif", "sans-serif", "monospace" and then everybody could just set those to what they like. Similarly, there would be no "font-size". You'd have to use semantically correct HTML tags and the user would choose the font size for these tags. I'm tired of 99% pages being unreadable. Reader mode is a hack.
EDIT: To clarify, the text on this page renders on my 4k screen with 170% scaling as ~31cm wide and each character is ~1cm tall.
And sure enough, the CSS responsible for this part contains "font-size: 22.4px;". That's beyond reasonable for normal body text.