id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
33878	Use system font stack in the admin	Tom Carrick	Tom Carrick	"I'd like to propose using a system font stack in the admin, perhaps using [https://caniuse.com/font-family-system-ui 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 [https://github.com/microsoft/vscode/pull/96948 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."	Cleanup/optimization	closed	contrib.admin	dev	Normal	fixed			Ready for checkin	1	0	0	0	0	1