Problems with antialias / Blurred text

[Nemecsek]

Most appropriate sections of the p5.js website?

Other (specify if possible)

What is your operating system?

Linux

Web browser and version

Chrome 124.0, Firefox 128.0, Brave 1.16.76

Actual Behavior

Hi.
I like the organization of the new P5js.org site, but I see it "blurred". Jumping to the old one the text is clean and perfectly readable. I tried with multiple browsers (Chrome, Firefox, Brave, Edge) on both Ubuntu 20 and Windows 11, and also on different monitors.

There is something off, like the antialias not working properly: Characters shows spurious artifacts (shadows) and give a bad look to the page.

Is it due to a poor font choice or to my hardware/settings?

Expected Behavior

Possibly change the font.

Steps to reproduce

No response

Would you like to work on the issue?

I don't have the skills to work on this problem.

[limzykenneth]

@Nemecsek Are you on X11 or Wayland?

[Nemecsek]

Ubuntu 20.04.6 LTS, Gnome 3.36.8, X11.
I also tried on Windows 11 and the effect is the same.

[limzykenneth]

Ok, that is odd, I can vaguely see this on my machine as well but only when I view it on a 1440p monitor and not on my 4K monitor. @Nemecsek Can you perhaps also provide your screen resolution as well?

I think font choice probably isn't the problem here as I feel like I'm seeing it still when turning off the selected fonts.

[Nemecsek]

Thank you for the time you are taking to analyse this issue.

I have a Fujitsu Celsius laptop with native resolution of 1920x1080 (16:9).
I connected a couple of Benq monitors, both 1920x1080 too. I also tried on Windows on the same laptop model.
In all my systems the issue is quite visible even if in screen snapshots it is not so obvious.

I am not a font expert but I tried with other fonts to check what's going on, editing the html in the original page.

My observations:

1. The original font (National Park) is 18.75px. The fractional size introduces artifacts that are not so visible when we use a "standard" 16px. Some characters, such as lowercase e and a, are in this font "closed" and this introduces unpleasant shadows after rendering due to antialias.

2. The font is so big, and I was zooming the page to 70% without thinking about it (sorry, I missed this fact as it is done not consciously). This action lowers text quality.

3. Some fonts are definitely better than National Park (all 16px to avoid the page zoom). I personally find Calibri and Garamond 16px a lot more readable. Alas Github blurs my screenshot:

To see better the artifacts we can zoom this image:

[davepagurek]

I mention this in #545 but I wonder if this is because we add a thin stroke to all body text to make it slightly thicker. Might be worth seeing how things look without that extra stroke, or if it's better if we use a thicker font instead of doing this.

[Shahmaz0]

i am using macos and its working fine.

[cweagans]

macOS (15.1.1 (24B91)) Safari (Version 18.1.1 (20619.2.8.11.12)) looks pretty rough at the moment:

[davepagurek]

Maybe we can remove uses of text stroke to see how that looks?

p5.js-website/styles/global.scss

Line 75 in 366aaf1

-webkit-text-stroke-width: 0.2px;