Font rendering: Thin fonts in macOS Catalina

Discussions for the Apple Mac OS builds of Pale Moon

Moderator: dbsoft

Forum rules
Important note:
The old Mac OS versions of Pale Moon were provided by various people and not official or in any way organized. Please make sure you check the date of topic threads to know if the topic is current or relevant! We are using this board for both old discussions and new development of Pale Moon on Mac.

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.
avalos

Font rendering: Thin fonts in macOS Catalina

Unread 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 2508 times
Firefox context menu
Firefox context menu
firefox-context-menu.png (48.88 KiB) Viewed 2508 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: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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.

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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 2396 times

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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?
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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?

New Tobin Paradigm

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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.

dbsoft
Project Contributor
Project Contributor
Posts: 405
Joined: 2020-02-21, 17:35

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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.

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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?

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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
Keeps coming back
Keeps coming back
Posts: 815
Joined: 2017-10-10, 21:20

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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.

avalos

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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: 46
Joined: 2015-07-31, 04:53
Location: Clown World

Re: Font rendering: Thin fonts in macOS Catalina

Unread 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:

Locked