3

On Windows, and to a certain degree also on Mac OS, with different browsers (Firefox, Chrome, Safari), our menu bar has rather pixelated/blurry font-rendering. This is on an ASP.NET Core 2.1 site that uses Bootstrap 4.1.3 but it's easy enough to reproduce with just simple HTML: https://jsfiddle.net/2tgc9r84/

<html>
  <body style="background-color:#e72c87;">
  <p style="font-size:20pt;">
    This is some text that looks terrible.
  </p>
  </body>
</html>

Interestingly, the same font renders just fine in other areas of the site. I have noticed this on a 4K monitor that has 150% scaling activated but the issue also shows up with 100%. I have also tried this with different fonts, so apparently it's not an issue with the font, either.

Originally I thought this was an issue with transparency or transformations but finally, I tried simply changing the background color - and it turns out this blurriness is very obvious with red and dark blue (and of course, combinations of those, like magenta), and pretty much invisible with most other colors. Also, by changing the main background color, I can reproduce the issue for the other areas.

You can directly have a look at the site where this occurs here: https://beat-the-rhythm-vr.com/Home/Social (the navigation with the blurry text shows up after accepting the cookies).

Here's an image that shows the effect with different backgrounds, and also rendered on Mac OS (the Mac OS screenshots appear smaller in the image):

Image illustrating the issue of blurry / pixelated font-rendering

As far as I can tell, this does not happen at all on iOS. On the Mac, I don't quite see the issue on the screen but it does become obvious when making a screenshot. This could, however, also be an artifact due to scaling on the screenshot.

This is what it looks like on iOS (I get the same blurriness on Windows when making the Window small enough to get the same layout as on mobile, so that's also not the issue causing this / fixing this):

enter image description here

The obvious question: Is there any way to fix this, and if so, how?

EDIT: This is in addition to the comment on Porter's answer (I can't add screenshots in comments, so I'm posting this here):

Comparing screenshots on my PC and Porter's PC

EDIT 2: While this article is about a slightly different issue, my guess is that what I'm seeing is really just a limitation of ClearType that is related to what the article outlines: Color-aware ClearType requires access to fixed background pixels, which is a problem if you don't know what the background pixels are, or if they aren't fixed

ClearType apparently doesn't work when the background color isn't known, and from what I'm seeing, it seems to be designed primarily for black text on white backgrounds, also works well with light colors on dark backgrounds but not really so much for red/blue/magenta backgrounds (and any font-color).

Jashan
  • 220
  • 2
  • 9

1 Answers1

1

I am unable to reproduce this on a 1080p or 4K display, with either mobile or web view on Firefox and Chrome. Fonts do tend to blend with the background color, so not every pixel of the font is going to be the same color; It'll blend on the edges. The smaller the font, the less pixels it has to work with for blending. If you use a larger font, does the same problem occur?

enter image description here

Porter Lyman
  • 343
  • 2
  • 10
  • With larger fonts, the same problem does occur - it's just not as obvious and ugly. My first thought was that it's due to Windows' scaling for the 4K monitor. "Scaling done wrong" does look very similar but with other background colors it looks crystal clear. Your screenshot also looks better than what I see on my screen - except when I review your and my screenshot side-by-side, then yours actually looks a tiny bit worse. I'll add the comparison to the original posting at the end. – Jashan Sep 07 '19 at 13:50
  • After reviewing the light grey text on dark background, which looks perfectly clear on my screen, zoomed in a bit, my guess is that it's really an issue with perception and how ClearType uses the color pixel arrangement on this screen and that just not working well when blue and red are dominant in the background color. Interestingly, "Adjust ClearType Text" only has black text on white background options. Maybe my only option with current technology is using another background color :-( ... EDIT: And yeah, ClearType on/off only makes a difference with black on white text. – Jashan Sep 07 '19 at 14:07
  • That's interesting. ClearType is new concept for me, but a fascinating read. You have a good eye, I never would have noticed the issue. Hopefully with ClearType in mind, you can find a color combination that works well. – Porter Lyman Sep 08 '19 at 14:10