Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use system-ui as default font #2355

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Conversation

veyndan
Copy link
Contributor

@veyndan veyndan commented May 22, 2024

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
Copy link
Contributor

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
Copy link
Contributor Author

veyndan commented May 22, 2024

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
Copy link
Contributor

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
Copy link
Contributor Author

veyndan commented Jun 6, 2024

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
Copy link
Contributor Author

veyndan commented Jun 6, 2024

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
Copy link
Collaborator

MTRNord commented Jun 6, 2024

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

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.
@veyndan
Copy link
Contributor Author

veyndan commented Jun 18, 2024

Rebased onto main and CI is now passing :)

@thibaultamartin
Copy link
Contributor

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
Copy link
Contributor Author

veyndan commented Jun 20, 2024

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.

@mirabilos
Copy link

It’s still a cross-platform concern. On Linux with no desktop environment, there is not even a way to set that.

Please do not use system-ui.

@veyndan
Copy link
Contributor Author

veyndan commented Oct 15, 2024

@mirabilos Your concern makes no sense. If system-ui doesn't resolve to a font for some reason, then the website will just resolve to the next font in the font stack.

If you want to expand on this claim or link out to someone else that explains it, I'd be happy to reconsider my position.

@mirabilos
Copy link

The problem is that it does resolve to a font, but to one that is shit and that users cannot configure, unlike the standard serif, sans-serif and monospace.

@veyndan
Copy link
Contributor Author

veyndan commented Oct 20, 2024

That sounds like an issue with your very specific set up, not an issue with system-ui. I admittedly use Linux with a desktop environment, but looking around online, it doesn't seem like setting a default font for Linux without a desktop environment should be a problem.

You're making a lot of claims without backing them up. If you could link to something that backs up your claims, I'd be happy to give it a read.

@mirabilos
Copy link

mirabilos commented Oct 20, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants