[QuickOpenModal] Bold font of highlighted <mark>'s are blurry on Windows

[gerdneuman]

Similar as #5584 (comment)

On Windows the bold font when Ctrl+P are "blurry", just look at the letter a in bold react (you might need to middle-click on the images to have them open full width on a new tab):

Compare to Linux where it is crystal clear:

I guess the used font on Windows is just not particular suited for bold? But I am not a fonts expert.

Pinging @fvsch who already helped fixing https://bugzilla.mozilla.org/show_bug.cgi?id=1457086#c9 with great analysis.

FWIW, here are too screenshots of VSCode and Chrome Debugger, also both on Windows, and both look fine:

[fvsch]

First thing that comes to mind is that box-shadow should probably be black in the dark theme, and not some shade of medium gray.

But on the current topic: I'm not sure we can do much better without bumping the font-size. And we're already at 12px, which is our "big" font size, used for tabs and panel headers, so I'm reluctant to go for a bigger font-size. Not sure if Chrome is getting better results here because they're using 13px or if they're using a different font.

It would be interesting to check what font is effectively used here on Windows. Can someone check using the Browser Toolbox ("Fonts" tab in the Inspector)?

One possible solution would be to avoid bold altogether. It doesn't work for fuzzy matches anyway, when we make every other letter bold. (See the "replaceWith" example.) We're discussing search highlights in firefox-devtools/ux#14, maybe we should use the same style here?

Quick test:

[gerdneuman]

Can someone check using the Browser Toolbox ("Fonts" tab in the Inspector)?
Here's what the fonts tab says (Windows 10):

One possible solution would be to avoid bold altogether.

Yeah, though personally I find changing the background color a bit "too much". VSCode and Chrome (also) seem to use brigther font colors. Highlighted is blue (VSCode) or white whereas the unhighlighted text is a bit more greyish.

[darkwing]

@mcroud @violasong Any ideas to add to @fvsch 's?

[violasong]

Ah that's unfortunate - aren't we using the system sans-serif font for this kind of text? I'm a fan of the bold white look and am hoping we can keep that but fix the bold.

[fvsch]

I personally dislike the bold style because it just doesn't work for fuzzy matching (where we highlight several isolated characters in a string, rather than a continuous fragment of that string). (Edit: but maybe fuzzy matching is a very secondary use case. ^^)
Looks like VS Code handles that by using bold + color.

Not sure what is happening re. the bold font, but that kind of imprecision is bound to happen for bold + small size (12px) + 1x rendering + some combinations of fonts and operating systems.

It looks like the difference between Windows and Linux in @gerdneuman's screenshots is that their Windows setup uses very strong subpixel (color) antialiasing:

While the Linux screenshot shows grayscale antialiasing, and some subtler subpixel antialiasing for some of the text.

Subpixel antialiasing tends to make text look "fatter", since it adds light to the neighboring pixels to create an effect of higher resolution.

One solution might be to try to use font-weight: 600 on Windows instead of font-weight: 700, if the font we use on Windows supports this weight. Then we'll get a semi-bold font.

[DPX-designer]

Which ever method we pick, I'm guessing we can perhaps just target standard res screens on Windows? Perhaps bumping up the font size in just this scenario? I know it creates another stress case but an extra px upsize might solve the issue without having to alter the highlight method.

I think @fvsch suggestion of looking at semi-bold weights is a good start. If the change in font weight substantially reduces the contrast with the normal text, maybe we could use in addition to text highlighting?

Just voicing another suggestion, I know we don't use this pattern anywhere else so likely not a contender, but using an underline would remove interferance with most of the letterforms (g,j,p,q exceptions). Again, perhaps only targeting the standard res/windows scenario.

[darkwing]

@derek-li Would you be able to try this out? You're on Windows, correct?

[derek-li]

@darkwing I'm having trouble reproducing the issue. I don't see the blurry effect on Nightly or Chrome.
I'm on Windows 10.

Firefox Nightly:

Chrome:

[darkwing]

I just tested locally on a Windows PC and the font does look a bit yucky.

font-weight: bold (current):

font-weight: 600 (@fvsch's suggestion)

Here's what bold looks like in the Net Monitor:

The bolding looks yucky but it's at least consistent. I'm closing for now but please open if you have more ideas for improvement!