[Django] #33878: Use system font stack in the admin
Django
-----------------------------------------+------------------------
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.
Django
Reporter: Tom Carrick | Owner: Tom Carrick
Type: Uncategorized | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Tom Carrick):
* owner: nobody => Tom Carrick
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:1>
Django
Reporter: Tom Carrick | Owner: Tom
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Tom Carrick):
* type: Uncategorized => Cleanup/optimization
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: Tom
Type: | Carrick
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by 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 –
[https://github.com/wagtail/wagtail/issues/7724#issuecomment-1039171723
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
[https://github.com/wagtail/wagtail/blob/8cda62471da6a180d16f0bd513333783eb44430f/client/src/tokens/typography.js#L11
code implementation, with comments for each family within the stack]. And
the
[https://github.com/wagtail/wagtail/blob/8cda62471da6a180d16f0bd513333783eb44430f/client/src/tokens/typography.js#L38
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 [https://github.com/w3c
/csswg-drafts/issues/3658 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: Tom
Type: | Carrick
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Unreviewed => Accepted
Comment:
OK, this seems reasonable to take a look at if we can. Thanks
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: Tom
Type: | Carrick
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/15960 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:5>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: Tom
Type: | Carrick
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_docs: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: Tom
Type: | Carrick
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_docs: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: Tom
Type: | Carrick
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: Tom
Type: | Carrick
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"d46cc15c51219c3418e0287bf018c5ba1346f825" d46cc15]:
{{{
#!CommitTicketReference repository=""
revision="d46cc15c51219c3418e0287bf018c5ba1346f825"
Fixed #33878 -- Switched to system fonts in CSS.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/33878#comment:9>