Gatsby: [www] Replace monospace font "Space Mono" used for code (inline and block)

[fk]

I've been thinking about this for a while now, and finally got around to try a first set of alternatives.

First let me say that I __love__ _Space Mono_ — the font we are currently using for all code examples/references on gatsbyjs.org — and which this issue/discussion is about.
I do think it does a good (enough) job and certainly adds a lot of personality to our code examples.

Over time however, the impression that our documentation might benefit from a different monospace typeface grew stronger: _Space Mono_ doesn't hide that it was "[d]eveloped for editorial use in headline and display typography", and IMO this (negatively) shows at the font-size(s) we are using it — I feel other alternatives perform better, are more readable.

The following images show _Space Mono_ as currently in use on gatsbyjs.org, as well as my two first shots at trying to replace it:

• __Space Mono__ — as-is on gatsbyjs.org
  
  
  
  
  • I feel both round and curly brackets are a little _too_ playful (and might even confuse people who are relatively new to programming), the lowercase a, < and > throw me off while reading.
  
  
• __Menlo__ — exemplary for using the (monospace) "system font stack"
  
  
  
  
  • no additional webfonts need to be loaded
  
  
  • no consistent look across operating systems
  
  
  • balancing out the latter, we're using fonts that people are likely to already be familiar with because they are a default on their respective OS
  
  
  • see e.g. http://markdotto.com/2018/02/07/github-system-fonts/, https://css-tricks.com/snippets/css/system-font-stack/ and https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
  
  
• _IBM Plex Sans_
  
  
  
  
  • the only webfont (as opposed to "system stack") alternative I tried up to now
  
  
  • compared to SF Mono, I like the proportion of black/white more here — SF Mono is quite "dark"
  
  
• Here's a video of the three side-by-side, 1st tab is Space Mono, 2nd SF Mono, 3rd IBM Plex Sans: https://www.dropbox.com/s/b8pwqhppv6bjhl8/space_mono.mov?dl=0
• I have to admit that I'm watering down this comparison by slightly having altered the code block styles:
  
  
  
  • removed surrounding border
  
  
  • slightly decreased "code block title" (file name) font-size and fiddled around with its vertical whitespace a bit
  
  

How do you feel about these alternatives?
Do you have other font suggestions?
Do you think there's a benefit in replacing "Space Mono" at all/do you share my impressions?

[KyleAMathews]

I do like the playfulness of Space Mono a lot (I did pick it after all haha) but I'm not at all opposed to switching. The other alternatives are quite a bit "cleaner" and likely as you say more readable.

[lipis]

System font stack FTW!

[NickyMeuleman]

Is Consolas a system font on Windows?

Would
font-family: SF Mono (for mac), Consolas (for win), other fallbacks, monospace
fit you idea @fk?

edit: woops, it's already in here https://github.com/gatsbyjs/gatsby/blob/master/www/src/utils/typography.js#L24-L33

[lipis]

font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

Source: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L255

[josswright]

@fk: Apologies for an off-topic comment in an old thread, but what is the serif font used in the normal text in the images above? I can't quite place it, and it's beautiful.

[fk]

@josswright 👋 No need to apologize, no worries! 🤗
(Thank you for bringing back some nice memories!)

That serif font is Spectral by Production Type (for Google). More info here:

• https://design.google/library/spectral-new-screen-first-typeface/
• https://spectral.prototypo.io/

[josswright]

Wonderful. Thank you so much!