Some text looks odd...

[DexrnZacAttack]

Not sure why but atleast on the How to Join page, there is a ton of text that looks off, such as green outlines around text (as if it was like a greenscreen or something)
and some text being purplish and hard to read.

Opening console or resizing the viewport and/or browser does nothing.

Moving the browser window to another screen also doesn't fix anything, in this case I tested it on both Disp. 1 and Disp. 2...

Display 1:
Resolution: 1920x1080 (144hz)

Display 2:
Resolution: 1600x900 (60hz)

I am using Firefox 121 under Windows 10 19044.3031

Here is a screenshot taken on 100% zoom on Display 1.

And here's another taken on Display 2.

The green-screen thing is a lot less noticable (or it's completely gone) but some of the blur and purplish color is still there.

If I use Chrome, the only issue is that the text looks kinda blurry (atleast to my eyes).
(Screenshot taken on Disp. 1)

The page I was on is https://www.legacyminigames.net/join

[PixeoGames]

Seems to be a pixel alignment error causing text to either be aligned to Whole pixels, or in between two pixels, causing oddities in the color rendering. Attaching some images showing the difference in the two.
In the Proper Text Rendering image, the black spans one whole pixel across RGB, and at least at 1080P width on my LCD monitor, aligns with 2 whole pixels per "text pixel"
Attached Images are with Proper Text Rendering

But, if i shrink the window size by one pixel, as shown in the Misaligned Pixel Rendering image it causes the text to start on the B subpixel, Rendering the font with 5 subpixels instead of
6, causing the leading and ending edges to be weirdly dimmed causing a color gradient that leaves a purple ish hue
This is with Misaligned Pixels

Possible and easiest fix would to only snap text elements to whole pixels, and not between pixels.

Also, this DOES vary between text boxes, as seen, when i shrink the window size by one pixel and screenshot the same area
In this image, the Bottom text has the purple color fringing

and in this image where the browser window is shrunk by one pixel, the top text has it

[PixeoGames]

Also while researching it, it seems this "purple color" varies on browser. Firefox uses true subpixel rendering causing the purple, yet on chrome, the text just becomes stretched and blurry

[Pedro270707]

I'm pretty sure that this is impossible to fix with normal HTML/CSS text, since I've looked and looked and never found any solution. Every website that uses a pixel art font just blurs it. It would be fixable by using canvases to draw the text instead of using text directly in the page, but firstly, that would require drawing to a lot of canvases, and secondly, you'd need a bitmap font

If someone somehow finds a solution please tell me

[Pedro270707]

Alternatively you could just make everything blurry instead