Use system font stack in the admin

[Tom Carrick]

I'd like to propose using a system font stack in the admin, perhaps using ​system-ui or perhaps not.

The benefits:

• Every user gets a font they're comfortable with using for a UI - an accessibility win
• We don't have to send fonts over the network

On the first point, this can be especially useful for users that have picked a more legible font for themselves. Some fonts are more legible for people with dyslexia for example.

One drawback: On Windows, system-ui can cause problems for some i18n users. The commonly cited example is that Windows when in the Chinese locale will give a font that works well for Chinese characters, but looks bad when rendering latin characters when using different font weights.

I went through some research on this. GitHub used system-ui but removed it later. They still use a system font stack, they just use one that avoids this problem (but causes others). Bootstrap used system-ui, removed it later because of this issue, then added it back again. The best "one stop shop" to read about the issue is probably from when it was ​added to vscode.

So I can think of two possible options:

Use system-ui with the current fallbacks

font-family: system-ui, "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;

With the possible caveats listed above.

Use a more complex stack

This one is modelled after GitHub's with a few changes:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;

On Mac, this will use the system font correctly. On Windows it'll use Segoe UI as that'll always be installed and is the default system font. On Linux, it'll use the system font, and older browsers will fall through the stack until it hits something.

Problems:

• BlinkMacSystemFont is deprecated. I'm not sure offhand which browsers support this and which support -apple-system, and both are non-standard.
• Windows users that have changed their system font will still see Segoe UI. This is probably lower than the number of people with Chinese locale set using the Django Admin in a latin language (or with say, objects using latin script).
• Linux users that have Segoe UI installed (fairly common, comes with Ubuntu it seems) will also see this instead of their system font.

I'm not sure which is the better option, I'm leaning towards option 1 slightly as it seems more future proof. But I think either of these are an improvement over not using system fonts at all.

[Thibaud Colas]

Sounds like a good idea to me, though I don’t know Django’s current font very well. We’ve recently switched to a system font stack for Wagtail, and did a fair bit of research – ​here’s what we arrived to. The stack is very similar to your complex example for the reasons you outlined, just with fewer sans-serif fallbacks, and the emoji fonts included:

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

BlinkMacSystemFont is for Chrome on macOS (relatively old releases?), -apple-system is for other browsers on macOS/iOS.

And here is the ​code implementation, with comments for each family within the stack. And the ​monospace stack we landed on.

---

On the benefits – to me it’s first and foremost about performance, where this is clearly a win no matter how you look at it. For font legibility, note that for some people Django’s current font might well be more legible (for example Chinese users using the default YaHei UI font, hence why most font stacks hard-code Segoe UI). Picking a good stack goes a long way, though I still have doubts about the legibility of some of the system Linux fonts (I forget which).

I would agree system-ui with fallbacks is the future-proof option, just not sure how future-proof it is (see for example ​this CSS-WG issue), and how long until it’s what works best for enough people.

If you want to decide for sure, best would be to run something like ​https://trusting-dijkstra-7e2ca3.netlify.app/ with Django users who use CJK languages and ideally other non-latin scripts (anything RTL, Arabic / Farsi / Urdu / Hebrew in particular), and get them to say which option looks best to them between system-ui and Segoe UI on Windows & Linux.

[Carlton Gibson]

OK, this seems reasonable to take a look at if we can. Thanks

[Tom Carrick]

​PR

[Carlton Gibson <carlton@…>]

In d46cc15:

Fixed #33878 -- Switched to system fonts in CSS.