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;

[limzykenneth]

I can't replicate this on macOS and on Linux I think in my case it is more to do with my specific setup as when i inspect other sites zoomed in, it does seem to have blurs on my 1440p monitor, which led me to suspect in my case it may be some fractional rendering quirk on my OS.