Text rendering: weight and consistency across OSes

[DavidOliver]

@josevalim, further to #1668, I've tested in Safari in Mac OS (Safari 16, Mac OS Ventura), and using the following CSS does seem to make all text thinner, contrary to what you found the other day:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

(I find that I often need to empty the _build directory for newly-built assets to be included in newly-generated docs; perhaps this prevented you from seeing the change?)

This results in type rendering being very closely matched in Mac OS and Linux. Left Safari/Mac OS with new props, right Linux (with new props, but unaffected and so as before):

Now that I have both rendering the same/similarly, I should be able to adjust the weights of text in the sidebar (light to regular), and some other places as appropriate, to bring both into line with the current rendering in Mac OS.

One thing to note before I proceed, however, is that the serif font used for the main text (Merriweather, 400/normal) does not have a 500 weight that we can move up to - only 700/bold, which is not an option as that does not render well in either Mac OS or Linux. So the main text would look slightly thinner than you've been used to in Mac OS:

Is this acceptable to you? I imagine it may initially feel a little thin to you, but I believe this rendering to be a little clearer and nearer a normal, not semi-bold, weight.

Although applying the above approach across the board is my preference to maximise simplicity and consistency, if you don't like the lighter serif font for the main text, we could limit the new properties to the sidebar and allow the main text to be different (but readable) across OSes.

[josevalim]

Awesome find! Indeed, I was testing it the wrong way. Would it be possible to apply these changes only to the sidebar? This way we don’t have to concern about other fonts.

[DavidOliver]

Ah, thanks for confirming.

Yes, as mentioned, we can limit the application of the alternative anti-aliasing method to the sidebar. This comes with the disadvantage of the main content continuing to be inconsistent across OSes, and so I recommend we only take this approach if you don't like the lighter rendering of Merriweather for the main text.

I appreciate we're most concerned with Lato at small sizes in light on dark, which is mostly/all(?) the sidebar, but, nonetheless, it seems like a good opportunity to get everything as consistent as possible. But if you confirm the light rendering of Merriweather in Mac OS as in the last screenshot above is not desired, I'll proceed and limit to the sidebar.

[josevalim]

Can you please send a PR? I am unable to make these configurations have an effect and I think I am missing something up.

I am also happy to change the font if we think it is too thin and there isn't an increased weight. :)

[DavidOliver]

Is that a PR to apply the alternative anti-aliasing to everything, so that you can test the effect? I'm happy to do that, perhaps in a couple of stages so that you can test the main effect before I tweak details here and there or scale back to just the sidebar if necessary.

Edit: now I read your last sentence again I think that is what you meant - sorry. But if you could confirm/clarify so that we're definitely on the same page, that would be great.

Hopefully we can keep the same fonts and character as at present. :)

[josevalim]

A basic PR you used to validate and generate the screenshots is perfect.