search

python / python-docs-theme

Sphinx theme for Python documentation
Other
74 stars 58 forks source link

Modernise font: use system font stack to improve text readability and webpage performance #176

Closed hugovk closed 5 months ago

hugovk commented 5 months ago

The primary font used for by this theme is Lucida Grande.

By default, this is only used on macOS:

macOS macOS

On other platforms, the browser uses the more common Arial:

Windows, Linux, Android, iPhone | Windows | Linux | Android | iPhone | | - | - | - | - | | ![Windows](https://github.com/python/python-docs-theme/assets/1324225/3a0e906d-778a-4e49-b465-e0fea896ffd3) | ![Linux](https://github.com/python/python-docs-theme/assets/1324225/4e14fcf7-dca3-4228-aad9-ae376949d608) | ![Android](https://github.com/python/python-docs-theme/assets/1324225/fd97db03-290d-4aff-a745-e21e540641bf) | ![iPhone](https://github.com/python/python-docs-theme/assets/1324225/a211d643-0336-4952-a5c6-f4278f6668e3) |

History

Lucida Grande used to be the system font on Macs from 1999 to 2014, and was used by websites such as apple.com, facebook.com and twitter.com.

I can't think of any other big websites still using Lucida Grande. To me it looks dated, and I find it hard to read.

System font stack

I recommend we update to the so-called "system font stack".

Benefits according to https://systemfontstack.com:

Many sites use a system font stack:

See more on the history and rationale.

Preview

macOS image

https://python-docs-theme-previews--176.org.readthedocs.build/en/176/

hugovk commented 5 months ago

The 3.8 and 3.9 failures are unrelated, see https://github.com/python/python-docs-theme/pull/177 for a fix.

ronaldoussoren commented 5 months ago

Apple supports https://drafts.csswg.org/css-fonts-4/#ui-serif-def for this, with 'ui-serif', 'ui-sans-serif' and 'ui-monospace'. The last one allows using the system monospace font (SF Mono) without explicitly naming it.

These aren't supported by other browser at this time (according to caniuse)

hugovk commented 5 months ago

Thanks, I didn't know about those! The caniuse link: https://caniuse.com/extended-system-fonts, shows 17.33% availability.

The resources tab links to the Chromium and Firefox issues, but there's not been movement for 1-2 years. Webkit (Safari) has supported it for 4 years.

The "CSS Fonts Module Level 4" spec is still draft, but was updated last month.

We could put first in font-family, and non-Safari browsers would fall back to the other fonts. But perhaps we should play safe and not use them until more browsers support it or the spec is approved? Or are they already widely used by other sites?

willingc commented 5 months ago

🚢 @hugovk Thanks!

pradyunsg commented 5 months ago

The "CSS Fonts Module Level 4" spec is still draft, but was updated last month.

I would prefer to wait until this spec was implemented in more browsers. If we go down this route, it's worth deciding if we would prefer to be stylistically consistent based on the OS + available fonts vs aligned with the user's OS font configuration (which is likely more varied on Linux and Android compared to iOS, macOS and Windows).

I suggest we take on things from the updated font stack in a follow up, since this is a meaningful improvement over status quo!

Privat33r-dev commented 5 months ago

Looks great, thanks for the PR

ronaldoussoren commented 5 months ago

Thanks, I didn't know about those! The caniuse link: https://caniuse.com/extended-system-fonts, shows 17.33% availability.

The resources tab links to the Chromium and Firefox issues, but there's not been movement for 1-2 years. Webkit (Safari) has supported it for 4 years.

The "CSS Fonts Module Level 4" spec is still draft, but was updated last month.

We could put first in font-family, and non-Safari browsers would fall back to the other fonts. But perhaps we should play safe and not use them until more browsers support it or the spec is approved? Or are they already widely used by other sites?

I don't know.

I was primarily triggered by the list of fonts for "copybutton", which includes Apple's previoius preferred monospace font (Menlo), but not the current one (SF Mono). Using "ui-monospace" there would future proof us a little for Apple's platforms, although I'd assume that they'll keep using the San Francisco font suite for the foreseeable future.