#33878: Use system font stack in the admin
-----------------------------------------+------------------------
Reporter: Tom Carrick | Owner: nobody
Type: Uncategorized | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-----------------------------------------+------------------------
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/33878>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/01070182540b99a9-67f084cb-0705-4dca-9ecf-8504ecf80d94-000000%40eu-central-1.amazonses.com.
