[Django] #35140: Increase font size in Django debug views (404, 500, etc)
Django
-------------------------------------+-------------------------------------
Reporter: Eliana | Owner: nobody
Rosselli |
Type: | Status: new
Uncategorized |
Component: | Version: 5.0
Uncategorized | Keywords: accessibility font
Severity: Normal | size
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
The font size in Django's debug views (404 page, 500 page, etc) is quite
small (13px for the main body text). Ideally we would want this to be 16px
to improve readability (this font size was checked with Thibaud from the
Accessibility Team).
The issue can be seen in [https://static-django-
demo.netlify.app/django_admin_tests/v5.1/english/defaults/404/ this
example page].
--
Ticket URL: <https://code.djangoproject.com/ticket/35140>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
| Rosselli
Type: Bug | Status: assigned
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility font | Triage Stage: Accepted
size |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => Eliana Rosselli
* status: new => assigned
* type: Uncategorized => Bug
* stage: Unreviewed => Accepted
Comment:
Thank you Eli! Yes I believe a good minimum font size for Django would be
14px. For the main page copy on pages like these there’s no reason to go
below 16px.
I’ll assign you now, please make sure when working on this to review where
exactly the changes need to happen so this reflects across all desired
views. It’d be great if we also got the font sizes consistent even if each
view has its own separate styles.
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility font | Triage Stage: Accepted
size |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Hello Eliana, Thibaud!
I'm on the fence with this ticket, could you please explain a bit more the
issue with the font size? I see the debug page with font 14px but I also
see Google and other web sites to be 14px. I wouldn't want the 404 (or
500) pages to have bigger size because then users will have to scroll
more, and also increasing the font size is a shortcut away (ctrl +) or a
setting away ("minimum font size" in Firefox for example).
I'm not opposed but I'm not a fan either, so I'd like to know more before
proceeding. Thank you!
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility font | Triage Stage: Accepted
size |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
hi Natalia, sure! We reviewed the error pages and noticed the font size
used there was smaller than recommended minimums on the web. There isn’t a
hard and fast rule with what’s considered the bare minimum font size or
how to set a type scale, but general best practice is that the main "body"
copy of a page should be 16px. As you’ve noted some organizations are also
using 14px, which I think would make for a good minimum for Django – but
if we used that for the main copy, then it wouldn’t leave much room for
any other text to be smaller. So this is possible but would somewhat limit
design options.
I don’t know which debug page you’re referring to, the 404 page shared by
Eli uses 13px for the main text in my browser. For the [https://static-
django-demo.netlify.app/django_admin_tests/v5.1/english/defaults/500/ 500
page], my browser’s CSS overview says:
- 368 occurrences of 13px
- 14 occurrences of 15.21px
- 8 occurrences of 11px
- 7 occurrences of 19.5px
- 3 occurrences of 13.65px
- 2 occurrences of 26px
I don’t see any use of a 14px font size but it could be our browsers are
configured differently.
> I wouldn't want the 404 (or 500) pages to have bigger size because then
users will have to scroll more, and also increasing the font size is a
shortcut away (ctrl +) or a setting away ("minimum font size" in Firefox
for example).
Generally with web accessibility the idea is that the default experience
should be accessible to the widest audience. So it’d be better to provide
a legible font size by default, and as you mention if some people find it
too big or on the contrary not big enough they can still adjust.
Scrolling is certainly a consideration but it doesn’t seem like font size
would change things much on those pages?
- On the 404 and CSRF failure pages, the content has a small height as-is
and I don’t see how an increase in font size would cause scrolling
- On the 500 and 400 pages, making the Settings or Request information
"META" sections would help a lot more than keeping font size small
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility font | Triage Stage: Accepted
size |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Hello Thibaud, Eliana,
Thanks for the extra details. Now I feel silly because I can't find where
I saw the `14px`. In fact, I don't see any `font-size` defined, does this
match your view?
Now, assuming that no `font-size` is set (but then some relative units are
used, such as `1.5rem`), I think that's a good thing? In that whatever
browser setting gets in play? Would a potential fix for this issue set a
fixed `font-size` or how does it work? (Sorry for all the questions, I'd
like to understand more!)
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility font | Triage Stage: Accepted
size |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Font sizes are defined, for example see
[https://github.com/django/django/blob/d79fba7d8e7bbcdf53535a14d57ead5a6863cd8d/django/views/templates/technical_404.html#L11
technical_404.html line 11].
A fix for this would either involve removing those definitions, or
replacing them with more explicit ones, Eli and I haven’t investigated
yet. As far as browser settings, it will be equally good as long as we
appropriately use font size units that are relative. So in the case of
`1.5rem` – the value is fixed relative to the root (`html` element) font
size, which is where the browser settings would apply (as far as I know,
it’s not always explicit enough to
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:5>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility font | Triage Stage: Accepted
size |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* type: Bug => Cleanup/optimization
* version: 5.0 => dev
* component: Uncategorized => Error reporting
Comment:
Replying to [comment:5 Thibaud Colas]:
> Font sizes are defined, for example see
[https://github.com/django/django/blob/d79fba7d8e7bbcdf53535a14d57ead5a6863cd8d/django/views/templates/technical_404.html#L11
technical_404.html line 11].
>
> A fix for this would either involve removing those definitions, or
replacing them with more explicit ones, Eli and I haven’t investigated
yet. As far as browser settings, it will be equally good as long as we
appropriately use font size units that are relative. So in the case of
`1.5rem` – the value is fixed relative to the root (`html` element) font
size, which is where the browser settings would apply (as far as I know,
it’s not always explicit enough to check easily).
Thank you! This sound good. I would suggest we first try with the removal
of the `small` font definition, and see how that looks, but I trust your
guidance on this. Looking forward to review the patch!
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
Type: | Rosselli
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility font | Triage Stage: Accepted
size |
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* has_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
Type: | Rosselli
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
size | checkin
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/35140#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
Type: | Rosselli
size | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* resolution: => fixed
* status: assigned => closed
Comment:
In [changeset:"cfecac27dedc27b5e7f098273787994f49d40037" cfecac2]:
{{{#!CommitTicketReference repository=""
revision="cfecac27dedc27b5e7f098273787994f49d40037"
Fixed #35140 -- Increased font size in debug views.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35140#comment:9>