Thin or small text in browser is semitransparent (compared to Windows)

wfd · 2024-06-15 12:41:34

Greetings!

Windows Firefox:

Linux Firefox:

Windows Steam settings:

Linux Steam settings:

The problem is that they are difficult to read on linux in some cases.
I read https://wiki.archlinux.org/title/font_configuration and tried different options.
Only FREETYPE_PROPERTIES="cff:no-stem-darkening=0 autofitter:no-stem-darkening=0" made text thicker (not enough) but broke icon rendering on some electron apps (like vscode).
Please advise how to configure fonts so that they are displayed approximately like in Windows (if possible).

Upd: edited topic subject after clarifying the problem.

Last edited by wfd (2024-06-16 18:02:22)

seth · 2024-06-15 13:15:15

Only FREETYPE_PROPERTIES="cff:no-stem-darkening=0 autofitter:no-stem-darkening=0" made text thicker (not enough) but breaked icon rendering on some electron apps (like vscode).

"broke", irregular verb
You could just not export the variable to the clients it has detrimental effects on.

Other than that what should™ have relevant impact is:
1. https://wiki.archlinux.org/title/font_c … on#Hinting - also see https://wiki.archlinux.org/title/font_c … E_settings ff.
2. https://wiki.archlinux.org/title/font_c … _rendering

The windows screenshot btw. looks blurry?

wfd · 2024-06-16 17:27:58

seth wrote:

"broke", irregular verb

Oh, excuse me, fixed

seth wrote:

You could just not export the variable to the clients it has detrimental effects on.

For some strange reason I thought this variable only works at the system wide level. Thank you. In this case, that completely solves my problem with Steam (and similar apps).

seth wrote:

The windows screenshot btw. looks blurry?

Yes, but on my monitor it's more readable. Maybe on bigger screens linux version doesn't create such problems)

seth wrote:

Other than that what should™ have relevant impact is:
1. https://wiki.archlinux.org/title/font_c … on#Hinting - also see https://wiki.archlinux.org/title/font_c … E_settings ff.
2. https://wiki.archlinux.org/title/font_c … _rendering

Some options has impact, but not enough, except FREETYPE_PROPERTIES="truetype:interpreter-version=35" with hintmedium or hintfull hintstyle.

Here is a comparison of different configurations:

Windows Firefox (default settings)

Linux Firefox "truetype:interpreter-version=40" hintslight

Linux Firefox "truetype:interpreter-version=40" hintfull

Linux Firefox "truetype:interpreter-version=40 cff:no-stem-darkening=0 autofitter:no-stem-darkening=0" hintslight

Linux Firefox "truetype:interpreter-version=40 cff:no-stem-darkening=0 autofitter:no-stem-darkening=0" hintfull

Linux Firefox "truetype:interpreter-version=38" hintfull

Linux Firefox "truetype:interpreter-version=38 cff:no-stem-darkening=0 autofitter:no-stem-darkening=0" hintslight

Linux Firefox "truetype:interpreter-version=35" hintslight

Linux Firefox "truetype:interpreter-version=35" hintmedium

Linux Firefox "truetype:interpreter-version=35 cff:no-stem-darkening=0 autofitter:no-stem-darkening=0" hintslight

If you look at these images with zoom (Alt + mouse scroll) you will see that in every linux config (except ttiv:35) text symbols become semitransparent in some places and less readable. It's become problem if site use small font size or font weight.

Here is more practical example:

Windows Firefox

Linux Firefox "truetype:interpreter-version=40" hintslight

Linux Firefox "truetype:interpreter-version=38" hintfull

White text become grey because big part of every symbol become semitransparent in linux version.

Only "truetype:interpreter-version=35" (with hintmedium) makes the text not semitransparent, but it also makes text look "outdated" and too bold

Chromium browsers have the same problem, just with different text look.

Last edited by wfd (2024-06-16 17:35:09)

seth · 2024-06-16 21:41:43

Did you try to use the lcdlegacy filter?

wfd · 2024-06-17 13:15:36

seth wrote:

Did you try to use the lcdlegacy filter?

Yes, lcdlegacy makes text more "sharp", but it's still semitransparent...

("truetype:interpreter-version=38" hintfull)

seth · 2024-06-17 13:52:16

That's actually identical w/ https://i.postimg.cc/1RnXhcHv/2-linux-f … ntfull.png
BCI 38 and 40 are identical, you don't have to switch between them and should mostly seek to control this w/ the LCD filter and the hinting strength

TheFrostyFungai · 2024-06-17 14:12:49

https://s3-alpha.figma.com/hub/file/126 … -cover.png

Moderator edit: Changed pointless image to url. See our policy on posting large images. Especially true when they convey practically zero information.

Last edited by ewaller (2024-06-17 17:04:54)

wfd · 2024-06-17 15:54:59

seth wrote:

BCI 38 and 40 are identical, you don't have to switch between them and should mostly seek to control this w/ the LCD filter and the hinting strength

Oh, I will known now) (I thought this option exists based on the reddit posts)

seth wrote:

That's actually identical w/ https://i.postimg.cc/1RnXhcHv/2-linux-f … ntfull.png

It seems I messed something up with the files...
I sure lcdlegacy option was applied because text became "colorful" in some cases. And, unfortunately, this did not have a significant impact to text "transparency" regardless hintstyle value (compared to lcddefault).

I replaced freetype2 package with freetype2-macos (from AUR) and that made light text very close to windows version and enough readable (event better in some cases)

But it also made dark bold text less readable (not ready to draw conclusions yet)...
Upd: This package makes standard text less readable (more "fuzzy").

Last edited by wfd (2024-06-17 19:08:04)

Arch Linux

#1 2024-06-15 12:41:34

Thin or small text in browser is semitransparent (compared to Windows)

#2 2024-06-15 13:15:15

Re: Thin or small text in browser is semitransparent (compared to Windows)

#3 2024-06-16 17:27:58

Re: Thin or small text in browser is semitransparent (compared to Windows)

#4 2024-06-16 21:41:43

Re: Thin or small text in browser is semitransparent (compared to Windows)

#5 2024-06-17 13:15:36

Re: Thin or small text in browser is semitransparent (compared to Windows)

#6 2024-06-17 13:52:16

Re: Thin or small text in browser is semitransparent (compared to Windows)

#7 2024-06-17 14:12:49

Re: Thin or small text in browser is semitransparent (compared to Windows)

#8 2024-06-17 15:54:59

Re: Thin or small text in browser is semitransparent (compared to Windows)

Board footer