Readability issues with new code block font

[loilo]

While I love the new design of npmjs.com, I've recently been having trouble with the readability of the new font for code blocks ("Space Mono").

I generally really like the font, its uniqueness and overall appearance. However even though I have good eyesight, I find it really hard to differentiate between different types of brackets at first glance.

Please take a look at this code block:

• Do you as well find it hard to differentiate between square brackets and curly braces?

• While parentheses are designed pretty uniquely, if there are no parens present, curly braces and square brackets may easily be confused with parens due to their rounded design:

  

Of course as a webdev it would not be hard for me to just override the font in my browser, but I wanted to share my experience to maybe consider if this could be a broader accessibility issue.

I'd love to hear feedback on this, and whether others have experienced similar problems.

[sgruetter]

I agree and also wanted to file this issue. The font is IMO unnecessarily poor to read and scan through (with the eyes).

When scanning through a README of a package, I noticed that I read characters that weren't even there.

For example this snippet:

(https://www.npmjs.com/package/react-scrollchor)

When scrolling over this part, I always notice prominently an 'a' although it's not there (I'd expect it in 'beforeAnimate'). However, the '@' in the comment looks similar to a typewriter lower-case 'a'. When scrolling, this might cause the mix-up.

I have a FullHD screen, if that's relevant.

On a personal note (thus, feel free to ignore): the font is also, how to put this..., not an ease on the eye ;-)

[loilo]

This seems to have been adressed. The font for code blocks changed to Fira Mono with way better punctuation readability.

Thanks to whoever took care!