Use system-ui as default font

[veyndan]

I'm on Ubuntu, and the font that's currently shown for me on matrix.org is Nimbus Sans. The font in the existing font list that is causing this is the font "Helvetica", which I do not have installed.

From my cursory understanding of font matching, when running fc-match helvetica in the terminal, I get NimbusSans-Regular.otf: "Nimbus Sans" "Regular", which explains why I'm being shown Nimbus Sans.

As it appears from the existing font list, the desired result was to use the font of the system the user is on. By using system-ui, we can achieve this. In my case, I would be shown the Ubuntu Font, as that's my default on my system.

[HarHarLinks]

Nimbus Sans is a clone of Helvetica (https://en.wikipedia.org/wiki/Helvetica#Nimbus_Sans) so this might be working as intended. Is Helvetica free? (Can we default to free fonts for our free standard's website?)

[veyndan]

Ah, TIL about the purpose of Nimbus Sans.

Is Helvetica free?

Nope. It's proprietary.

The issue with defaulting to free fonts is that we're either assuming that the user has one of the listed free fonts already installed on their computer, or we increase the footprint of the website by having the user download a font.

Is the suggestion to use a free font because of a perceived issue or deficiency in the usage of system-ui?

[thibaultamartin]

Thanks for the PR! We are missing system-ui for sure, but I would go with https://systemfontstack.com. Also please don't remove Helvetica Neue from the list and keep it in the first position since it's part of Matrix' branding :)

[veyndan]

We are missing system-ui for sure, but I would go with https://systemfontstack.com/.

system-ui isn't mentioned on https://systemfontstack.com at all, indicating that the site's recommendations perhaps predate system-ui (or at least predate it having strong cross-browser support). I was using https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#system-ui as a reference, which seems to have much more up-to-date advice.

Also please don't remove Helvetica Neue from the list and keep it in the first position since it's part of Matrix' branding :)

Added back!

[veyndan]

Not sure why CI is failing. Running zola build locally passes 🤷

Edit: I just noticed that main is failing with the same error, so the CI failure is unrelated to this PR.

[MTRNord]

Edit: I just noticed that main is failing with the same error, so the CI failure is unrelated to this PR.

oops thanks for noticing. my fault :D

[veyndan]

Rebased onto main and CI is now passing :)

[thibaultamartin]

Sorry we're just reviewing it right now, and it looks like using system-ui is a rather bad idea. Let's use https://systemfontstack.com/ but with Helvetica Neue on top

[veyndan]

I don't mean to be a bother about this, but the article you linked is from 2017, and the advice has significantly changed since then. The article points to Bootstrap getting rid of system-ui in April 2017:

Apr 10 update: Bootstrap has also removed system-ui from the font-family stack as of this pull request.

However, Bootstrap later added back system-ui to its font stack with seemingly no issues as system-ui has remained in their stack for the past 4 years (twbs/bootstrap#30561). The mentioned issue on Chinese Windows appears to be a bug of the distant past (twbs/bootstrap#22377 (comment)).

I've not heard any recent (i.e., last 2 years) complaints about system-ui, as all prior issues appear to have been fixed quite a while ago.