Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
pradyunsg merged 2 commits intopython:mainfromhugovk:sfs
Mar 16, 2024

Conversation

hugovk
Copy link
Member

@hugovkhugovk commentedMar 16, 2024
edited
Loading

The primary font used for by this theme isLucida Grande.

By default, this is only used on macOS:

macOSmacOS

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

Windows, Linux, Android, iPhone
WindowsLinuxAndroidiPhone
WindowsLinuxAndroidiPhone

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 toHelvetica Neue (much closer to Arial).
  • In OS X El Capitan 10.11 (released in 2015), Apple changed it toSan 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 tohttps://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:

See more on thehistory and rationale.

Preview

macOSimage

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

@hugovk
Copy link
MemberAuthor

hugovk commentedMar 16, 2024
edited
Loading

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

@ronaldoussoren
Copy link

Apple supportshttps://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
Copy link
MemberAuthor

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 theChromium andFirefox 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 infont-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?

Copy link
Contributor

@willingcwillingc left a 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.

hugovk reacted with rocket emoji
@willingc
Copy link
Contributor

🚢@hugovk Thanks!

hugovk reacted with thumbs up emoji

@pradyunsg
Copy link
Member

pradyunsg commentedMar 16, 2024
edited
Loading

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

@pradyunsgpradyunsg merged commit9916043 intopython:mainMar 16, 2024
@hugovkhugovk deleted the sfs branchMarch 16, 2024 20:43
@Privat33r-dev
Copy link
Contributor

Looks great, thanks for the PR

hugovk reacted with thumbs up emoji

@ronaldoussoren
Copy link

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 theChromium andFirefox 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 infont-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.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@willingcwillingcwillingc approved these changes

@pradyunsgpradyunsgpradyunsg approved these changes

@JacobCoffeeJacobCoffeeJacobCoffee approved these changes

Assignees
No one assigned
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

6 participants
@hugovk@ronaldoussoren@willingc@pradyunsg@Privat33r-dev@JacobCoffee

[8]ページ先頭

©2009-2025 Movatter.jp