GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Modernise font: use system font stack to improve text readability and webpage performance by hugovk · Pull Request #176 · python/python-docs-theme

Conversation

@hugovk

@hugovk hugovk commented Mar 16, 2024 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Member

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 Linux Android iPhone

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.

  • In OS X Yosemite 10.10 (released in 2014), Apple changed the system font to Helvetica Neue (much closer to Arial).
  • In OS X El Capitan 10.11 (released in 2015), Apple changed it to San Francisco.

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:

  • Fast: No network request, no time to parse a font, no flash of an incorrect font.
  • Styles & unicode: System fonts have lots of styles and broad language coverage, unlike many webfonts.
  • Familiarity: Web apps feel more native when they use system font faces.

Many sites use a system font stack:

  • GitHub
  • Stack Overflow
  • Booking.com
  • Weather.com, Bootstrap, Medium, Ghost, PubMed, and the WordPress dashboard
  • Furo theme (used on the devguide)
  • PyData Sphinx Theme
  • https://peps.python.org/: python/peps#3132

See more on the history and rationale.

Preview

macOS image

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
@hugovk
Use system font stack
21ff0a2
@hugovk hugovk added the enhancement label Mar 16, 2024
@hugovk

hugovk commented Mar 16, 2024 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Member Author

The 3.8 and 3.9 failures are unrelated, see #177 for a fix.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ronaldoussoren

ronaldoussoren commented Mar 16, 2024

Copy link
Copy Markdown

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)

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@hugovk

hugovk commented Mar 16, 2024

Copy link
Copy Markdown
Member Author

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?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

willingc
willingc approved these changes Mar 16, 2024
View reviewed changes

@willingc willingc left a comment

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would really like to see the modernized font.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

hugovk reacted with rocket emoji
All reactions
  • 🚀 1 reaction
pradyunsg
pradyunsg approved these changes Mar 16, 2024
View reviewed changes
@hugovk
Merge remote-tracking branch 'upstream/main' into sfs
5f063bd
@willingc

willingc commented Mar 16, 2024

Copy link
Copy Markdown
Contributor

🚢 @hugovk Thanks!

hugovk reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

JacobCoffee
JacobCoffee approved these changes Mar 16, 2024
View reviewed changes
@pradyunsg

pradyunsg commented Mar 16, 2024 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Member

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!

hugovk and willingc reacted with thumbs up emoji
All reactions
  • 👍 2 reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@pradyunsg
pradyunsg merged commit 9916043 into python:main Mar 16, 2024
@hugovk
hugovk deleted the sfs branch March 16, 2024 20:43
@Privat33r-dev

Privat33r-dev commented Mar 16, 2024

Copy link
Copy Markdown
Contributor

Looks great, thanks for the PR

hugovk reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ronaldoussoren

ronaldoussoren commented Mar 18, 2024

Copy link
Copy Markdown

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@hugovk hugovk mentioned this pull request Apr 8, 2024
Use system font stack for all code #186
Merged
@drammock drammock mentioned this pull request Nov 3, 2026
Switch from “system-ui”-only font stack to custom (native) font stack pydata/pydata-sphinx-theme#2560
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@willingc willingc willingc approved these changes
@pradyunsg pradyunsg pradyunsg approved these changes
@JacobCoffee JacobCoffee JacobCoffee approved these changes

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

enhancement

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

6 participants

@hugovk @ronaldoussoren @willingc @pradyunsg @Privat33r-dev @JacobCoffee
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.