Increase font size in Django debug views (404, 500, etc)

[Eliana Rosselli]

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 ​this example page.

[Thibaud Colas]

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.

[Natalia Bidart]

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!

[Thibaud Colas]

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 ​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

[Natalia Bidart]

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!)

[Thibaud Colas]

Font sizes are defined, for example see ​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).

[Natalia Bidart]

Replying to Thibaud Colas:

Font sizes are defined, for example see ​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!

[Mariusz Felisiak <felisiak.mariusz@…>]

In cfecac2:

Fixed #35140 -- Increased font size in debug views.