scratchfoundation / scratchfoundation/scratch-blocks

Block text is hard to read (perhaps depending on system)

Open
#1,492 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

design needs-discussion
Dominant language
JavaScript
Stars
2.8k
Forks
1.6k
Avg merge
4h 51m
Merged PRs (30d)
12

Description

I recommend you open these screenshots in a new tab, so they're at 100% zoom level.

Here is a screenshot of a script with lots of blocks in it in Scratch 2.0 (Chromium on Debian -- Firefox isn't running Flash for me right now but I remember it looking basically the same):

Here is a screenshot of the same script in Scratch 3.0 (Firefox on Debian):

Note that control and event blocks are especially difficult to read - white on light orange doesn't have much contrast when the font is this thin.

(For good measure, here's the same script in Scratch 3.0, but on Chromium instead of Firefox. The text is identical.)

Here's a clip from the latest design docs for Scratch 3.0 blocks, plus part of the above screenshot for comparison:

As you can see, the text is quite a lot harder to read on my computer than in the design docs (and certainly harder to read than in Scratch 2.0 on the same system).

This is almost certainly caused by Helvetica being used, instead of Helvetica Neue, which isn't installed on my computer.

In my opinion, all fonts in the font stack should look at least better than what I've shown in my screenshots. Helvetica Neue isn't supported on all systems!

Here's what Scratch 3.0 looks like when I force font-weight 800:

Besides some block alignment being messed up (which isn't relevant), the text is obviously easier to read.

It should be noted that the current font-weight is 500, but this is no different from 300 on my system (i.e. 500 is the lightest the font can get). I'm pretty sure this issue is effectively an instance of LLK/scratch-www#1563 (note this comment comparing font-weights across fonts).

Operating System and Browser

Firefox 60.0b16 and Chromium 62.0.3202.89 on Debian (testing). The font "Helvetica" is installed, but "Helvetica Neue" is not.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the block-text rendering on Debian with Firefox and Chromium, comparing the available Helvetica fallback with the design screenshots. Start by locating the block text font and weight settings; done means readable text, especially in control and event blocks, without relying on Helvetica Neue or breaking block alignment.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.