#33878: Use system font stack in the admin
-------------------------------------+-------------------------------------
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 <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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/010701825a4311dc-d7ec0994-5e41-44cd-9af2-0f5b1781d6bb-000000%40eu-central-1.amazonses.com.
