Font rendering: Thin fonts in macOS Catalina

Support and discussions for the Apple Mac OS X builds of Pale Moon
Forum rules
Important note:
The Mac OSX version of Pale Moon is provided by various people and is not official or in any way organized at this moment. Your assistance in bringing this build to fruition is greatly appreciated, but you can expect there to be bugs and problems as long as we don't have a maintainer or official builds!

Any specific bugs you find that don't have their own topic yet: please make a new topic; one bug per topic please to keep things organized.

Please also note that these builds are currently created by various independent Mac OS X people and not by our core team; core devs will likely not be able to provide insight or assistance due to lack of Mac hardware and OS/build knowledge for Mac. You'll have to solve the issues among yourselves.
Post Reply
User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-11, 23:19

I've been using Pale Moon browser for most things, for more than a week now, and it's working fine. Significantly slower than Firefox at times, but usable enough for most tasks. The only real complaint I have is font rendering: fonts look thinner than they should under macOS, and the letter spacing is low. This problem comes from pre-Quantum Firefox, and I think bolder fonts are a key for consistency. I'm using the latest unofficial macOS build 28.15.0. Here are some screenshots, to show you what I mean:
Pale Moon Wikipedia article in Pale Moon
Pale Moon Wikipedia article in Pale Moon
Pale Moon Wikipedia article in Firefox
Pale Moon Wikipedia article in Firefox
Pale Moon context menu
Pale Moon context menu
palemoon-context-menu.png (38.6 KiB) Viewed 743 times
Firefox context menu
Firefox context menu
firefox-context-menu.png (48.88 KiB) Viewed 743 times
Is there some setting I can make to improve font rendering? If so, I think it should be enabled by default on macOS builds.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 29343
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by Moonchild » 2020-11-12, 11:15

I don't see anything wrong with the font rendering in your Pale Moon screenshot - in fact the rendering in Firefox is "too bold" as it almost starts to fill in the inner spaces of letters with bold-formatted text.
For reference, your Mac screenshot's Wikipedia page is already considerably more bold than my Windows rendering.
Attachments
wiki-win1.png
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-12, 13:46

Native font rendering is bolder because macOS font rendering has always been thicker and smoother than Windows. Just look at the barely readable URL bar and the barely readable UI text in general… letters need more spacing and thickness! Thinner fonts in websites are not bad, but they don't match the overall macOS look, and slightly thicker fonts are not less readable, imo. I think spacing doesn't affect websites as much as it affects UI.
Barely readable UI text
Barely readable UI text

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 29343
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by Moonchild » 2020-11-12, 16:22

Well that explains the bolder look compared to windows then.

As for your UI: Looks perfectly readable to me.

I don't know if there is a system-wide tool that you can use to tweak cg font parameters to be more to your liking, but on the browser side this looks like it's doing things as-intended. If that's "barely readable" for you and you want tons of whitespace, then I'm afraid I can only suggest you use a browser that suits you better.

Perhaps you can tweak some things with userChrome.css -- e.g. selecting a different font face for the UI
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-12, 16:35

Not everyone has perfect sight, there's a lot of people who find it difficult to read such thin and tightly spaced characters. Besides, the UI font Pale Moon is using is not optimized for such small font sizes. Even though not impossible, it's harder to read. From what I can tell, the UI is using SF Pro Display, which is seriously not optimized for small text; not sure about macOS, but iOS automatically switches to SF Pro Text when text is small enough. Firefox, and practically every decent and modern browser, seem to be using SF Pro correctly.

Take a lot at this:
https://old.reddit.com/r/web_design/com ... _pro_text/
Perhaps you can tweak some things with userChrome.css -- e.g. selecting a different font face for the UI
OK, I'll try to switch to SF Pro Text.

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-12, 16:55

OK, so, I tweaked the font to SF Pro Text in userChrome.css, and it definitely looks more readable! It would be really nice if macOS builds came with SF Pro Text by default. I don't know you, but I think this makes a huge improvement in usability.
Pale Moon screenshot with SF Pro Text
Pale Moon screenshot with SF Pro Text
Pale Moon context menu
Pale Moon context menu
Screen Shot 2020-11-12 at 10.52.03 am.png (35.4 KiB) Viewed 631 times

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-12, 17:12

The same problem applies to websites, SF Pro Text should be used instead of SF Pro Display, when

Code: Select all

-apple-system
is set in CSS. That's the correct way of using SF Pro. If you won't be using SF Pro correctly, please don't set it as default on macOS, and use any other that is optimal at any size.
Attachments
Pale Moon screenshot of GitHub repo
Pale Moon screenshot of GitHub repo
Firefox screenshot of GitHub repo
Firefox screenshot of GitHub repo

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 29343
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by Moonchild » 2020-11-12, 18:32

Apple made the specific distinction between text and display fonts in 10.11 -- and what we're doing here is following the apple specification as to what is used where (display fonts used for UI). I'm not comfortable going against that guideline unless we have full concensus from the Mac people here.

So, @dbsoft, @KlarkKentThe3rd, @Goodydino and other Mac users.... What say you? Should this become an official desired change?
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-12, 19:11

Here's Apple's typography specification: https://developer.apple.com/design/huma ... ypography/

Ideally, Pale Moon should somehow implement Dynamic Type, which automatically adjusts text for legibility and adapts to system-wide accessibility settings. Or simply apply the thumb rule:
In interface mockups, use text size to determine when to use SF Pro Text and Display, SF Compact Text and Display, or NY Small, Medium, Large, and Extra Large. If you use these discrete optical sizes in an interface mockup, you need to use different variants at different text sizes. Use the values listed below for guidance. For tracking values, see Apple Design Resources.
  • For SF, use Text for text that's smaller than 20 points; use Display for text that's 20 points or larger.
  • For NY, use Small for text that's smaller than 20 points, Medium for text between 20 and 35 points, large for text between 36 and 53 points, and Extra Large for text that's 54 points or larger.
But I'm not sure what does Apple mean exactly with "interface mockups", is it talking merely about design mockups, or does it also apply to the final UI?

User avatar
New Tobin Paradigm
Knows the dark side
Knows the dark side
Posts: 8982
Joined: 2012-10-09, 19:37
Location: Seriphia Galaxy

Re: Font rendering: Thin fonts in macOS Catalina

Post by New Tobin Paradigm » 2020-11-12, 19:26

Yeah we are only willing to make changes to a point when it comes to the Macintosh. Adding some overcomplicated dynamic bullshit because apple wants to be a special snowflake is pushing it so don't hold your breath unless YOU want to take up the responsibility for making this happen.

Then we might have something to talk about regarding this.
As a young boy, I dreamed of being a baseball.
But tonight I say, we must move forward, not backward; upward, not forward; and always twirling, twirling, twirling towards freedom!

Image

User avatar
dbsoft
Project Contributor
Project Contributor
Posts: 105
Joined: 2020-02-21, 17:35

Re: Font rendering: Thin fonts in macOS Catalina

Post by dbsoft » 2020-11-13, 02:18

Moonchild wrote:
2020-11-12, 18:32
So, @dbsoft, @KlarkKentThe3rd, @Goodydino and other Mac users.... What say you? Should this become an official desired change?
I am fine either way, honestly didn't notice a difference until it was pointed out in this thread.

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-18, 18:28

New Tobin Paradigm wrote:
2020-11-12, 19:26
Yeah we are only willing to make changes to a point when it comes to the Macintosh. Adding some overcomplicated dynamic bullshit because apple wants to be a special snowflake is pushing it so don't hold your breath unless YOU want to take up the responsibility for making this happen.

Then we might have something to talk about regarding this.
Fair enough. Dynamic bullshit would be kinda complex, indeed. But at least changing the default UI font to SF Text (which can also be used for UI, according to Apple Guidelines), I think would be enough.

Websites should use Helvetica as default instead of SF Pro, or follow the guidelines: SF Text for text smaller than 20pt and SF Pro for text bigger or equal than 20pt. No need for dynamic bullshit! :)

If the modification is easy enough, maybe I can do it myself and then share the changes with you. What do you think?

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-22, 08:30

I created a little Stylem script to replace -apple-system with SF Pro Text, in order to make text more readable. But I believe you need to have SF Pro installed manually. In case it doesn't work because of that, I also created a script to replace -apple-system with Helvetica. This is only a temporary workaround, and I'm not even sure if the script was necessary.
Screenshot with default -apple-system
Screenshot with default -apple-system
-apple-system to SF Pro Text

Code: Select all

@font-face { font-family: -apple-system; src: local('SF Pro Text'); }
Screenshot with -apple-system set to SF Pro Text
Screenshot with -apple-system set to SF Pro Text
-apple-system to Helvetica

Code: Select all

@font-face { font-family: -apple-system; src: local('Helvetica'); }
Screenshot with -apple-system set to Helvetica
Screenshot with -apple-system set to Helvetica

Goodydino
Astronaut
Astronaut
Posts: 643
Joined: 2017-10-10, 21:20

Re: Font rendering: Thin fonts in macOS Catalina

Post by Goodydino » 2020-11-23, 20:53

Moonchild wrote:
2020-11-12, 18:32
Apple made the specific distinction between text and display fonts in 10.11 -- and what we're doing here is following the apple specification as to what is used where (display fonts used for UI). I'm not comfortable going against that guideline unless we have full concensus from the Mac people here.

So, @dbsoft, @KlarkKentThe3rd, @Goodydino and other Mac users.... What say you? Should this become an official desired change?
I am quite happy with Apple font rendering. If letters look too close together, maybe the problem there is with harfbuzz. I changed the setting in about:config:
gfx.font_rendering.harfbuzz.level = 0
I do not like letters being joined together.
As for Pale Moon's interface, I changed the font to Trebuchet MS and increased the size because I have a high-resolution screen.

User avatar
avalos
Moongazer
Moongazer
Posts: 12
Joined: 2020-11-11, 22:59
Location: Mexico
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Post by avalos » 2020-11-23, 22:15

Goodydino wrote:
2020-11-23, 20:53
I am quite happy with Apple font rendering. If letters look too close together, maybe the problem there is with harfbuzz. I changed the setting in about:config:
gfx.font_rendering.harfbuzz.level = 0
I do not like letters being joined together.
As for Pale Moon's interface, I changed the font to Trebuchet MS and increased the size because I have a high-resolution screen.
I don't see gfx.font_rendering.harfbuzz.level in about:config. I added the preference and set it to 0, but it doesn't seem to do anything.

User avatar
plushkava
Apollo supporter
Apollo supporter
Posts: 45
Joined: 2015-07-31, 04:53
Location: Clown World

Re: Font rendering: Thin fonts in macOS Catalina

Post by plushkava » 2020-12-08, 00:28

avalos wrote:
2020-11-12, 13:46
Native font rendering is bolder because macOS font rendering has always been thicker and smoother than Windows.
Curiously enough, macOS renders fonts overweight by default. This is made all the more odd by the fact that, as of Mojave, the "Use font smoothing when available" option found at System Preferences > General does not, in fact, have anything to do with font smoothing (anti-aliasing) as it did in previous releases where its effect was to enable sub-pixel anti-aliasing. In both Mojave and Catalina, this option instead has the effect of rendering fonts in a manner whereby they have an unnaturally high weight. As a side effect, it also makes it impossible to accurately render bitmap fonts encapsulated by container formats primarily intended for vector fonts. There is more information on this here and also here.

Meanwhile, in Big Sur, the option appears to have been removed completely, though it may well be that it's still possible to control by using the defaults(1) utility.

Granted, this information is unlikely to be of immediate use, as the complaint is already one of the fonts being too thin. Unless, of course, the option in question was disabled (which is not its default state).

EDIT: removed reference to "OP" as I was replying to the OP. :roll:

Post Reply