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

[towerofnix]

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.

[mrjacobbloom]

A while back there was a conversation in the forums about the ideal 3.0 color palette: https://scratch.mit.edu/discuss/post/2761039/ -- that conversation was more about the block colors in general (#995 and #1032) but text contrast was something a number of them considered so I thought it might be relevant

[Kenny2github]

The best solution, in my opinion, (used by the Wiki) is to use webfonts, either from Google or from a file. That way it's guaranteed that every computer has the font, since they download it, and any fallbacks are only used while the font isn't loaded.

[Alzter]

My font shows up as standard Heveltica and it's barely legible because of how thin it is. You should make the font bold like in Scratch 2.0, make it bigger to fill the block more (you have all this padding space but half of it isn't used), and perhaps make the text have a shadow or an outline. I agree with Kenny, we should use Google Webfonts.

[Alzter]

Also it would help if the block colours were darker, or more saturated. I made a suggestion here at #3914

[Kenny2github]

A shadow would work too, come to think of it, you're right.

[Alzter]

It'd also help if the text was bold like 2.0

[Alzter]

Expected Behavior

The font for block text should be bold like in the 3.0 mock-ups (But preferably bigger to fill the block).

Actual Behavior

My computer displays the font for block text really thin.

[towerofnix]

You should make the font bold like in Scratch 2.0, make it bigger to fill the block more (you have all this padding space but half of it isn't used), and perhaps make the text have a shadow or an outline.

A shadow would work too, come to think of it, you're right.

Small bump on this, just with a screenshot of my dark theme, which adds a text shadow:

It's still not exactly perfect, but the text-background contrast is at least a bit better!

[ComplexGaming4321]

My text isn't showing up. As you can see, it looks like there is no text at all. but there is. it is either white or non-existent. it still works, but I cant see the text please help. ![Uploading image_2024-03-04_130414241.png…]()