Thin Fonts depending on installed system fonts

[b-fein]

Describe the bug

The low contrast for the breadcrumbs with very thin blue font on dark grey background results in bad legibility.

See also my comment below for more context about thin fonts.

To Reproduce

1. Open some page within Artemis in dark mode and look at the breadcrumbs at the top.

Expected behavior

Breadcrumbs are easily readable in dark mode.

Screenshots

What browsers are you seeing the problem on?

Firefox

Additional context

No response

Relevant log output

No response

[bassner]

Hmm. It doesn't look that "thin" on my screen and is pretty readable, though ... 🤔

• The color is just the regular link color. Do you have the same problems with the links on the bottom of the page, e.g. "About us"?
• What OS are you on?
• Whats your screen resolution?
• It'd probably be good to know what actual font your system uses, as we have a bunch of fonts specified as fallbacks in our global font family declaration

Could be related to https://github.com/ls1intum/Artemis/issues/5045 where the font looks similarly thin

[b-fein]

I think this is an issue due to font selection if you have got multiple subfamilies (Regular, Thin, …) of the Noto Sans font that is used as default sans-serif on many Linux systems. Those systems also don’t have got Arial/Helvetica (is there even some explicit sans-serif font specified in the CSS of Artemis?) most of the time.

• OS: Firefox 100 on Linux, 1440p monitor without any scaling, looks the same on a 1080p one.
• Footer: Same colour, but the font is not as thin there (Noto Sans Regular; .footer-text specifies font-weight: 400), therefore it is fine.
• For the breadcrumbs some class in .breadcrumb, .breadcrumb-container, .breadcrumb-link seems to define font-weight: lighter. Therefore, the system selects the Noto Sans Thin subfamily of the font.
• The colour is the same in light mode. I suppose the bad contrast is more due to the very thin font rather than the colour itself.

The problem statement text of an exercise and the items in the code editor file browser as in the linked issue are also in a different weight: Noto Sans Light. I sometimes wondered why there are so many different font weights used in Artemis, but maybe the difference in weights is not that different/does not happen depending on the fonts you have got installed.

[bassner]

Seems like the solution would rather be to ship and force the same font on all systems rather than changing the font weight to make the web app appear consistent across all platforms

[ge65cer]

+1 on shipping the font with Artemis