Design help with typography

[amorey]

1. font-smoothing

   I've been debating whether or not we should turn on font-smoothing by default. The css property makes text look better on webkit/mozilla browsers but it also results in some changes that might not be desirable (e.g. white text on dark backgrounds is more faint). For an end-user it's easier to add it than remove it in custom CSS so I've been hesitant to make it a MUI global property but it's frustrating when the default text with MUI doesn't look great out of the box.

   So far I've been considering 1) making font-smoothing a global property of MUI 2) making font-smoothing a local property for certain elements (e.g. buttons) 3) documenting the issue and letting the developer decide.

   Any thoughts?

2. letter-spacing

   The current letter-spacing in MUI is based on Google's recommendations for Roboto but it isn't necessarily ideal for other fonts. Here's the difference between turning on/off MUI letter-spacing for buttons using MUI's default font (Helvetica Neue):

   And here's the difference with font-smoothing turned on:

   In keeping with the lightweight/minimalist spirit of MUI, I've been considering turning off the custom letter-spacing and leaving it up to the developer to choose the letter-spacing that works best for their font choice. Any thoughts?

[Reubend]

This is just my personal opinion, but since no one else has responded, I'll throw in my two cents. I much prefer the extra spacing of the top button in your example, and I think that it works fine with Helvetica even if it wasn't designed for it. I would keep the font spacing.

As for the font smoothing, I was about to say skip it, but after looking at the comparison images you posted I have to say it looks much nicer in some ways. I think that the 3rd button down is the best looking one, but I'm worried about ti making text look too thin. I don't have a strong opinion either way on that.

[WhatFreshHellIsThis]

Personally I think the smoothed fonts look worse for some reason and the wider spacing looks better. Can you not use Roboto?

[amorey]

Adding a custom font to the CSS affects the load time of the app and the choice of font will have big effects on the look and feel of the site so we wanted to hand over control of that decision to the developer.

Also, it's easy for developers to add a custom font themselves so we didn't feel that we were adding much value by embedding it in the CSS. Here's an example of how to add Roboto: https://www.muicss.com/docs/v1/css-js/boilerplate-html