npm / www

community space for the npm website
https://npm.community
69 stars 48 forks source link

Readability issues with new code block font #441

Closed loilo closed 6 years ago

loilo commented 6 years ago

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:

image

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 commented 6 years ago

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:

screen shot 2018-06-21 at 12 37 20 (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 commented 6 years ago

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!