Page MenuHomePhorge

Added cross-platform default fonts
ClosedPublic

Authored by vedranmiletic on Sep 22 2021, 23:00.

Details

Summary

system-ui is provided by modern browsers as a cross-platform default font. Using this font was a controversial choice back in 2017. because it did not address i18n well and therefore it was removed from Bootstrap twbs/bootstrap#22377. However, it was added back in Bootstrap v5 twbs/bootstrap#30561 since it got better over time.

Fixes T15049.

Test Plan

Tested locally for now.

Diff Detail

Repository
rP Phorge
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

vedranmiletic retitled this revision from Remove variants of Segoe UI except default from fonts list and add more useful defaults to Added cross-platform default fonts.
vedranmiletic edited the summary of this revision. (Show Details)

This revision only adds cross-platform default fonts and doesn't remove any of the existing ones.

Could you describe in more detail what this change is doing? - Because I am not familiar with celerity, I did read through https://secure.phabricator.com/book/phabdev/article/celerity/ for some background.

And specifically, does this impact any other browsers other than the one you mentioned having an issue? (e.g. Will this revision change any fonts on any other platforms where this problem does not exist?)

Apologies for the late response, my open source work has been on the sidelines for some time.

Could you describe in more detail what this change is doing? - Because I am not familiar with celerity, I did read through https://secure.phabricator.com/book/phabdev/article/celerity/ for some background.

Celerity is automatically regenerated when files are changed. The important changes are in the other files.

And specifically, does this impact any other browsers other than the one you mentioned having an issue? (e.g. Will this revision change any fonts on any other platforms where this problem does not exist?)

The idea here is, instead of picking arbitrary fonts, is to go for the platform recommendations (basically what Bootstrap is doing) while only minimally changin the set of existing fonts used. Let's go one by one:

  • -apple-system - Apple's system font
  • system-ui - cross-platform and cross-browser standard for specifying the system font, supported by modern browsers, selects Segoe UI on Windows and whatver font you use on Linux (DejaVu Sans, Ubuntu, Fira Sans)
  • BlinkMacSystemFont - older specification for system font on Mac, doesn't exist on other platforms
  • 'Segoe UI' etc. - if Windows browser you use doesn't know about system-ui
avivey subscribed.

I've re-applied this patch and uploaded with arc diff, just to normalize it.

I've ran this locally, and it looks the same to me (Chrome on Windows).

Can someone with a Mac check that it looks ok?

Also, @vedranmiletic - why did you choose -apple-system before system-ui?

I use Edge on Windows 11 with the browser font set to Segoe UI and it shows me that font.
The Ubuntu font is not used and looks to me terrible.

Looks good on my Mac. Screenshots attached.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:107.0) Gecko/20100101 Firefox/107.0 ID:20220929093914

Screen Shot 2022-09-29 at 5.34.13 PM.png (1×2 px, 625 KB)

Screen Shot 2022-09-29 at 5.34.18 PM.png (1×2 px, 756 KB)

Chrome Version 105.0.5195.125 (Official Build) (x86_64)

Screen Shot 2022-09-29 at 5.32.31 PM.png (1×2 px, 496 KB)

Screen Shot 2022-09-29 at 5.32.41 PM.png (1×2 px, 615 KB)

Safari Version 16.0 (17614.1.25.9.10, 17614)

Screen Shot 2022-09-29 at 5.33.01 PM.png (1×2 px, 247 KB)

Screen Shot 2022-09-29 at 5.33.06 PM.png (1×2 px, 362 KB)

This revision is now accepted and ready to land.Oct 9 2022, 10:16
This revision was automatically updated to reflect the committed changes.

The Ubuntu font is not used and looks to me terrible.

For what it's worth, I think this is probably true for most Linux platforms.
I'm not sure yet if that is due to our system font just not being configured, or configured to a font that doesn't lend itself to the web, but it looks really bad to all of us here at the office (all Debian machines).
We all preferred the previous configuration which was ending up being Lato for us.

I've tried sort of reverting this diff on my system, but not knowing how to make celerity regenerate what is finally being served to clients, had little to no success.
We have also tried to change the font used for system-ui but cannot figure out which system setting to change to make it have any effect.

A setting to toggle on or off the use of system fonts would have been the more satisfying approach for us.

...but it looks really bad to all of us here at the office (all Debian machines).
We all preferred the previous configuration which was ending up being Lato for us.

I've tried sort of reverting this diff on my system, but not knowing how to make celerity regenerate what is finally being served to clients, had little to no success.

(To regen the celerity maps, you can use ./bin/celerity map if your code is new enough - I think it's 2-3 months old).

We have also tried to change the font used for system-ui but cannot figure out which system setting to change to make it have any effect.

We probably can't expect users to figure this out, and looking "really bad" is bad for us, even if it's hard to quantify.

A setting to toggle on or off the use of system fonts would have been the more satisfying approach for us.

We'd much prefer a single CSS selector that works ok for everyone then a toggle. Do you think you can come up with something that would look ok?

Looks like the original request was because things looked extremely bad on Garuda Linux which was picking Segoe UI Symbol for everything. I guess it's also possible that it was a single bad install, because why would anyone do that?

Googling on "why is system-ui ugly on debian" drops me right in the thick of css-font-rabit-hole, and I'm reminded why I don't do front-end.

I've tried sort of reverting this diff on my system, but not knowing how to make celerity regenerate what is finally being served to clients, had little to no success.

(To regen the celerity maps, you can use ./bin/celerity map if your code is new enough - I think it's 2-3 months old).

Thanks, that was successful (and appeasing to our eyes).

Googling on "why is system-ui ugly on debian" drops me right in the thick of css-font-rabit-hole, and I'm reminded why I don't do front-end.

;) Yeah, well, several of us tried to figure it out, looked at fontconfig, fc-match, gsettings, chromium settings… none had any effect on the rendered font.

Looks like the original request was because things looked extremely bad on Garuda Linux which was picking Segoe UI Symbol for everything. I guess it's also possible that it was a single bad install, because why would anyone do that?

That's not a bad install, but a bad font list. Why would Segoe UI Symbol have higher priority than system-ui?

Googling on "why is system-ui ugly on debian" drops me right in the thick of css-font-rabit-hole, and I'm reminded why I don't do front-end.

I surely agree with that.

In any case, Phabricator now has roughly the same font list as Bootstrap 5. Does Bootstrap 5 look bad on Debian?

In any case, Phabricator now has roughly the same font list as Bootstrap 5. Does Bootstrap 5 look bad on Debian?

While I don't think that it's a fair comparison since there is more at play (font-weight, etc), here's a comparison on my machine using Chromium.

With system-ui:

Introduction-·-Bootstrap-v5-0.png (851×1 px, 212 KB)

Without system-ui:

Introduction-·-Bootstrap-v5-0-wo.png (851×1 px, 206 KB)

My humble opinion is that the the version that uses system-ui does not look good (The kerning is off, some fonts look too heavy, etc).

Here's a set of screenshots to show the difference on phorge (this very page):

With system-ui

with-system-ui.png (1×1 px, 250 KB)

Without system-ui (Lato)

⚙-D25021-Added-cross-platform-default-fonts.png (1×1 px, 227 KB)

My humble opinion is that the the version that uses system-ui does not look good (The kerning is off, some fonts look too heavy, etc).

So you would prefer system-ui to mean Roboto instead of, I presume, DejaVu Sans Condensed? Have you tried setting ~/.config/fontconfig/fonts.conf like:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "urn:fontconfig:fonts.dtd">
<fontconfig>
  <!-- Default system-ui font -->
  <alias binding="strong">
    <family>system-ui</family>
    <prefer>
      <family>Roboto</family>
    </prefer>
  </alias>
</fontconfig>

So you would prefer system-ui to mean Roboto instead of, I presume, DejaVu Sans Condensed? Have you tried setting ~/.config/fontconfig/fonts.conf like:

<?xml version="1.0"?>
[…]

No, I did not, I didn't find that being suggested anywhere, turns out I didn't look well enough. I had found https://github.com/microsoft/vscode/issues/10144 but I guess I just hadn't scrolled down far enough.
I also visited https://wiki.debian.org/Fonts#Configuration, but unless you click on fontconfig, there is no mention on how to actually use it.

In any case, I created it now, I restarted Chromium, but there's been no change for me. Maybe I need to restart Wayland for this to take effect?

I had found another approach that would be using gsettings but wouldn't work for me either:

kwisatz@thufir:~$ gsettings set org.gnome.desktop.interface font-name 'Lato 11'

Also, if you guessed that my current system-ui could be DejaVu, then that would be what I get from the fc-match command:

kwisatz@thufir:~$ fc-match
DejaVuSans.ttf: "DejaVu Sans" "Book"

And it matches what Chromium indicates is indeed being rendered.

But, if I compare /etc/fonts/conf.d/45-latin.conf:

<!--
  system-ui
-->
        <alias>
                <family>Cantarell</family>
                <default><family>system-ui</family></default>
        </alias>
        <alias>
                <family>Noto Sans UI</family>
                <default><family>system-ui</family></default>
        </alias>
        <alias>
                <family>Segoe UI</family>
                <default><family>system-ui</family></default>
        </alias>
        <alias>
                <family>Segoe UI Historic</family>
                <default><family>system-ui</family></default>
        </alias>
        <alias>
                <family>Segoe UI Symbol</family>
                <default><family>system-ui</family></default>
        </alias>

</fontconfig>

to what gsettings returns, then I'd say it would be Cantarell:

kwisatz@thufir:/etc/fonts/conf.d$ gsettings get org.gnome.desktop.interface font-name
'Cantarell 11'

@kwisatz maybe file a new task / re-open the old one? the screnshots are not unreadable, but if its bad enough that people complain then maybe we can find a solution.
Didn't somebody invent "webfonts" or something, so we can just package Segoe-UI and know that everyone is getting a decent view?

@kwisatz maybe file a new task / re-open the old one?

Yes, I can do that.