Switch to default system fonts (Helvetica Neue, Helvetica, Arial, etc.)
The Problem
For https://gitlab.com/gitlab-org/gitlab-ce when not logged in, here's how much of the page size (after compression) is Source Sans Pro at the moment (differs between browsers):
Browser | Source Sans Pro | Total Page Size | % of size going to Source Sans Pro |
---|---|---|---|
Chrome | 253KB | 800KB | 31.6% |
Safari | 462KB | 2260KB | 20.4% |
Firefox | 253KB | 800KB | 31.6% |
Note about Safari: Gzip seems to be broken in Safari, not sure what's up, but that's why the page size is 3x bigger for Safari compared to Chrome/FF.
Safari doesn't support WOFF2, so it doesn't get as much compression for the fonts. It also loads an extra font weight. So the site is even bigger on iOS than on desktop. This will be fixed with iOS 10, admittedly, but that's still months away from release and years from full adoption.
As transferred page size decreases further due to better compression algorithms, ripping JS and CSS assets out of the page, etc. the share taken up by fonts will only get worse. I would bet that Source Sans Pro will make up more than 35% of the page size in Chrome by the end of the year.
The Solution
Remove Source Sans Pro and use system-local fonts instead.
Benefits
- Less cruft to download to render the page, faster page render the first time the user visits the site.
- Smaller page size by ~30% (varies by page, whether the user is logged in, etc.)
- Better support for more languages (currently we have problems with Cyrillic, for example), an important step towards #4012 (moved)..
Drawbacks
- Fonts may vary in width across platforms, and cause bugs where text may overflow or not fit as-expected, arguably this is a feature.
- Linux distros differ with regards to included fonts.
- Less-strict control over the design of GitLab with regards to typography.
- People hate change.
- There are lots of places where text is wonky-looking if you don't use Source Sans Pro.
You're crazy, what sites wouldn't use custom fonts!
- twitter.com:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- google.com:
font-family: arial, sans-serif;
- facebook.com:
font-family: helvetica, arial, sans-serif;
- amazon.com:
font-family: Arial, sans-serif;
- apple.com:
font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
I love typography, I could argue with you for hours about what fonts are good and what are bad, but I think - in this case - there's not really any great reasons to use Source Sans when alternatives exist locally on the user's devices with significant performance advantages.
I'll gladly listen to disagreements if you have them :)
cc: @jschatz1 @alfredo1 @lbennett @annabeldunstone @fatihacet @iamphill @lukebabb @dzaporozhets @cperessini @tauriedavis @hazelyang