Decrease boldness of main menu buttons

[lognaturel]

As of the changes from #5531 (comment), the main menu buttons are bold.

It looks ok in screenshots but when navigating the app I find it distracting. The text feels harder to read to me (it's likely not just me Centre for Excellence in Universal Design, Vision Research) and in general it feels inconsistent with other text. It's particularly striking with a smaller device like the Moto G5.

Part of the reason I have trouble letting this go is that I really liked @grzesiek2010's first pass based on @alyblenkin's mockups at #5531 (comment). It feels like we reduced usability and attractiveness and it's not currently clear to me why given that the font style feels unique to this scale of button and is unlikely to be reused elsewhere in the app. I also think the previously-used font was a bit big but totally fine.

For example, textAppearanceTitleLarge (weight 400) with 18sp look readable and harmonious to my eye. I think I probably would feel like anything between 18 and 20sp with weight 400 would look "expected" to me (not distracting).

[seadowg]

It feels like we reduced usability and attractiveness and it's not currently clear to me why given that the font style feels unique to this scale of button and is unlikely to be reused elsewhere in the app.

Currently the text style is using a new custom appearance "Label Extra Large" (discussion about that here) which is just Material 3's "Label Large" with a boosted font size (18sp). Material 3's "Label" appearances (generally used for controls like buttons) all use 500 font weight so that's why we end up with that. I could totally see there being an argument for dropping the font weight (like in your example) given the font size and is so much larger than it is for other controls. I'm interested to hear from @alyblenkin and @grzesiek2010 on that.

Also, I do think we'll look at using this style for other larger (than Material 3 accounts for) buttons like the "answer" buttons on widgets.

[alyblenkin]

@seadowg - I spoke with @lognaturel about this on Friday, and we checked it on different devices. On smaller devices, without much white space, the text style appears to be dramatically more bold and harder to read because the text looks cramped. It looks good on my larger device, but seeing it on a smaller screen made me question it.

Another factor I was considering originally was sunlight. Bold text, when used in short sentences or as a highlight, tends to be easier to see when outside and there is a glare on your device, which I've seen in other work I've done in the past. However, bold text is less accessible in other ways, as those articles point out. Ideally, we would get feedback from people in the field so that we aren't going back and forth, but this is such a small change most people might need to see the difference between the two options, so it would be hard to get feedback (and it's often very subjective).

I feel confident that reducing it to textAppearanceTitleLarge (weight 400) with 18sp would make it a better user experience. It's also a good compromise because the text is larger, so it should work in many different environments.

I know we've had a lot of discussions around this, but it's great because we want to get it right, given how often users see this screen!

[seadowg]

Sounds like we're good to go ahead with textAppearanceTitleLarge 👍.