Skip to content
This repository has been archived by the owner on Jul 10, 2018. It is now read-only.

Readability issues with new code block font #441

Closed
loilo opened this issue Jun 21, 2018 · 2 comments
Closed

Readability issues with new code block font #441

loilo opened this issue Jun 21, 2018 · 2 comments

Comments

@loilo
Copy link

loilo commented Jun 21, 2018

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

  • 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:

    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.

@loilo loilo changed the title Readability of new code block font Readability issues with new code block font Jun 21, 2018
@sgruetter
Copy link

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
Copy link
Author

loilo commented Jul 6, 2018

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!

@loilo loilo closed this as completed Jul 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants