Improve consistency of type rendering weight across OSes #1677
Conversation
Fixes elixir-lang#1675 As the sidebar type is thinned in Mac OS via the alternative anti-aliasing, its weight can be increased from light to normal to avoid overly thin type in Linux and Windows. The thin weight is preserved/used in places where differentiation from normal/bold is warranted. Additionally, the normal/400 weight font was not being loaded, which resulted in type set to normal being rendered light. We're now loading light/300, normal/400 and bold/700 for the Lato sans serif font.
|
Thank you @DavidOliver ! Yeah, unfortunately the regular text appears to thin on Mac now :( So we have two options:
|
|
I think second option may be simpler. If Mac, we set font-weight in the sidebar to 300, otherwise 400, and we don't modify font smoothing in any case. |
|
Screenshots in Safari/Mac OS for reference follow. Before:
After:
I'm also having doubts about grayscale anti-aliasing now. The subpixel anti-aliasing (the default, as before) seems to result in more refined tracking/spacing between letters, as well as better letter shapes, in the sidebar in Mac OS. It seems a shame to resort to UA string sniffing, but maybe that's the only way we're going to get the results we'd like. It looks like we should check whether or not 'Macintosh' is in the string. So:
Does that look right to you? |
|
Yes! I am also fine to be safe and render with heavy font by default and convert to 300 if MacOS. I think we will only need this change on the sidebar. Can you think about any other place we may need to change? Thank you! ❤️ |
|
No, as far as I've seen it is just the sidebar where the light weight is an issue in Linux. There are some other uses of the light weight here and there, but they're either large enough or minimal enough to not be a problem in my opinion. I was thinking about asking which the default should be. There may be a visual change after the initial render once the JS UA detection has run. I don't suppose you happen to know which OS is most commonly used for Elixir/Erlang documentation? |
|
If we can use the Elixir website as representative:
Which reminds me we likely want to detect for iOS as well. |
|
Amendment: hexdocs has very similar numbers. |
|
Ha! About 50/50 Apple/others then. Thanks for the info. I think iOS is covered by 'Macintosh', but I'll check. |
…sidebar based on OS Grayscale-only anti-aliasing, which we set in order to lessen the difference in type rendering across OSes, resulted in suboptimal type rendering in Mac OS. We now use normal/400 instead of light/300 in the sidebar if the UA string indicates a non-Apple OS.
|
New approach as discussed pushed. Safari/Mac OS:
Firefox/Linux (representing non-Apple):
|
|
Amazing, thank you so much! ❤️ |
Fixes #1675
As the sidebar type is thinned in Mac OS via the alternative anti-aliasing, its weight can be increased from light to normal to avoid overly thin type in Linux and Windows.
The thin weight is preserved/used in places where differentiation from normal/bold is warranted.
Additionally, the normal/400 weight font was not being loaded, which resulted in type set to normal being rendered light. We're now loading light/300, normal/400 and bold/700 for the Lato sans serif font.
Screenshots
All Firefox/Ubuntu, before followed by after. (@josevalim to make sure he's happy with Safari/WebKit in Mac OS.)
Light: Sidebar
Light: Settings
Dark: Sidebar
(Same as light theme sidebar.)
Dark: Settings