Use the system font for body type

[notriddle]

Design Feature Request

Summary

Change the font-family of all non-headline elements from "Fira Sans", Helvetica, Arial, sans-serif to the system font stack of -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol.

The headlines, which use the branded display face "Alfa Slab One", serif, should be left alone.

Motivation

Performance. You know, it's like four less things to download (Fira Sans Italic, Fira Sans ExtraBold, Fira Sans SemiBold, Fira Sans Regular).

Drawbacks

I'm not convinced that losing the custom typeface for tiny text would have much difference, but you would lose quite a bit of branding effect on big sub-headings like the "The programming language that..." tagline, which is currently set in a Humanist face but would end up with something more Helvetica-esque.

Rationale and alternatives

• Using "the system font", while it does mean giving up some amount of branding, should still leave you with a good, readable font.
• We could also just use font-family: sans-serif, but that tends to be an "Ariel compatible" font even when it's not necessary.
• The biggest improvement of using a stock font of some sort, instead of a web font, is that it removes janky re-layout-ing on things like the button as the page loads (try reloading the page after clearing your cache and watch the button).
• By not doing this, you require the browser to download two fonts, one of which is multiplied by having to be done in several different styles.

Maintenance

Using the GitHub system font stack shouldn't require any more maintenance than the woff you currently use.

Unresolved Questions

Segoe UI is significantly thinner than Helvetica at large sizes. Should something be done about that?

[notriddle]

For comparison's sake, here's Fira Sans:

And here's Segoe UI:

[chriskrycho]

Thanks for this writeup! It's extremely clear and well-articulated. A couple notes from my POV (which should not be taken as dismissing this at all; I think it's very much worth considering):

• The janky layout issues should largely be resolved by other things: getting some proper caching in place, and possibly doing some work to get "critical CSS" in place so that layout all does the right thing in all browsers. (The issue you're seeing is, unfortunately, much worse in Firefox than the others.) See Jumping / flickering on page load #452 and Not setting cache headers for images #319.

• Courtesy of the work done by @msmorgan on Reduce size of webfont payload #448, we should be getting a pretty small payload size for these (~90kb on the landing page).

[ashleygwilliams]

The previous site used Fira Sans, and it's the font that is used throughout the Rust Documentation and blog. Given the excellent work by @msmorgan on #448, I would suggest we don't change the current fonts.

[chriskrycho]

Yeah, I've been mulling on this over the last day. The combination of smart font-loading strategies and the careful optimization work we've done here (both before launch and now esp. with #448) means the cost is quite low, and Fira is pretty core to Rust's branding (across many sites, as @ashleygwilliams notes).

I'm going to close this accordingly, but I want to reiterate that I appreciate it as a careful and thoughtful proposal, thoughtfully presented!