Increasing size of HTML text in django docs default theme

Django Internals Documentation
1

The default font size in the generated HTML documentation is currently 12px. Most accessibility guidelines these days advocate 16px as a minimum, especially for text heavy content.

I feel the current size makes the documentation look dated and pokey.

Changing the font size alone would make the page layout wider as well. My personal taste would be fine with this. However it would also be an option to keep the column widths roughly the same and have the lines wrap more quickly. Or something in between.

Three screenshots attached for comparison:

  1. current text size and layout
  2. larger text size and by implication wider layout
  3. larger text size and original layout

All screenshots were taken with the browser full width on a garden variety 13" laptop. Preferences?

djangodocs-1-current
djangodocs-1-current1425Ă—800 211 KB

djangodocs-2-larger-text
djangodocs-2-larger-text1425Ă—800 203 KB

djangodocs-3-larger-text-same-layout
djangodocs-3-larger-text-same-layout1425Ă—800 182 KB

3 Likes
2

Note that this is in the styles used for local and ReadTheDocs PR preview builds—not the styles used on docs.djangoproject.com.

If there’s a quick fix in the “old official theme” that’s included with Django’s source, that’s great. But if it starts getting complicated, it might be more productive to try to pull in the “new” styles from djangoproject.com instead. See related discussion in Why does local django docs have a different styling/theme than the official one? and ticket #37138 (Outdated docs CSS in local and preview builds) – Django.

5 Likes
3

Definitely a quick fix attempt. However also happy to park this in favour of a longer term effort like you’ve described in your linked discussion.

1 Like
4

Without knowing much on the topic, it is usually not a good practice to set the font size to a fixed number in pixels. Is it not set to 1rem by default?

2 Likes
5

You are totally right. It is bad practice to do that throughout the page. What I’m talking about here is increasing the size only of the root element. That is what defines the value of 1rem, which is then used everywhere else in the page.

What we’d probably do in practice would be to not set it to anything at all and let the browser provide a default. That way if the user has a larger browser font set it carries through from the browser to the text in the page. Essentially we’re “getting out of the way” as much as we can.

2 Likes