How to make font rendering lighter?


#1

Below are two screenshots, the left from JUCE, the right from PhotoShop.

These are using the same font (Avenir Light), but as can be seen, JUCE’s rendering is significantly heavier. I experience this with all fonts, not just this one, and particularly on OS X.

Is there any way in JUCE to achieve a lighter rendering?

JUCEPhotoshop

This issue only applies to light text on dark background. JUCE renders, dark on light with a lighter weight.


#2

I’m guessing this got lost in the ADC week, but does anyone have any thoughts on this?

JUCE’s light on dark font rendering is consistently heavier than other OS X applications and this is a problem for us I can’t match the weight in any of our designs.


#3

The CoreGraphics renderer on OS X notoriously fattens up glyphs. The solutions are IIRC:

  1. use software renderer all the way to achieve consistent results.

In general, fonts look different on different rendering engines, see this comparison:

from this topic:


#4

Thanks @Mayae, I saw that thread before posting here and got hopelessly lost!

It wasn’t clear from me how much of the code proposed in the thread had made its way into JUCE, and looking at the JUCE code I couldn’t figure out, how to change font weight.

  1. use software renderer all the way to achieve consistent results.

What does that mean in practical terms?

Thanks.


#5

BTW, I’m not convinced that OS X is to blame here. Testing in Pages and Keynote, the text in my OP is just as light if not slightly lighter than Photoshop. From top to bottom below, JUCE, Photoshop, Pages

05
50
22

PhotoShop has a font rendering weight selector (below), and it would be amazing if JUCE’s rendering had similar capability to configure weight.

32


#6

@jamiebullock - I’d expect Pages and Keynote to render text using the macOS APIs, however Photoshop is likely using a custom approach and won’t rely on the same APIs as Pages, Keynote, or most native Mac apps.


#7

I think this is just an illusion based on the font hinting

image

They are the same size zoomed in, but it just looks different when viewed normally.

The difference is slightly less noticeable if you turn off font smoothing in the CoreGraphicsContext:

...
CoreGraphicsContext::CoreGraphicsContext (CGContextRef c, const float h, const float scale)
    : context (c),
      flipHeight (h),
      targetScale (scale),
      lastClipRectIsValid (false),
      state (new SavedState())
{
    CGContextRetain (context);
    CGContextSaveGState (context);
    CGContextSetShouldSmoothFonts (context, false);    //<---
    CGContextSetAllowsFontSmoothing (context, false);  //<---
    CGContextSetShouldAntialias (context, true);
...

image


#8

Thanks @martinrobinson good catch on the optical illusion. I just tried turning off font smoothing and it does make quite a big difference when viewed across an entire UI.

I still think it would be good to have more control over font weight in JUCE though. It feels a bit heavy-handed dipping right down into CG Context for things like this.


#9

Below link might be relevant. (I think the fix is to disable sub-pixel anti-aliasing).

“Mac OS X White/Light Text Sub-Pixel Antialiasing Bug”

http://www.lighterra.com/articles/macosxtextaabug/


#10

Have been looking into making text more legible at small font sizes. The second line is from Ableton, who I feel get it right in terms of correct font selection for legibility and also rendering (they are German after all). The first line is a similiar font to Ableton’s custom one (by https://lettersfromsweden.se), but with @martinrobinson recommendation of disabling font smoothing in the graphics context and finally in the last line, we have the same font with font smoothing enabled. To my eyes, font smoothing actually messes up legibility especially at small sizes. It is very apparent in the dot over the ‘i’ and the "L’ in Live.

Would be great to have a function added to the graphics context class that allows for disabling of smoothing, rather than editing the framework directly. @martinrobinson great find btw, have been annoyed by Juce’s font rendering for years, but seems it wasn’t really Juce all along!


#11

We turned off font smoothing as per above so we could have consistency between OS-X and Windows. From beta testing it seems to have solved a problem that some mac users were having (mac pros with ati radeon hd 5770). The plug-in interface was taking ~5 seconds to open, turn smoothing off and goes down to 1.5 seconds. Would be great to have font smoothing on/off as a settable parameter of the Font class so as to avoid hacking the framework.


#12

I would like to see this too. A general switch would do the job for me but it’s also ok if it’s part of the font itself. @roli is this something you can add? I don’t want to modify the framework code. I think font smoothing could be even switched off by default…


#13

That is really odd… Did you profile it? Would be really interesting to see which functions are using up all that CPU.

OK, good request, I’ll add a macro to let you turn it off, though I think making it off by default would probably change the appearance of existing apps too much for it to be something we could use as a default.


#14

@jules

A macro would be great. Turning font smoothing off on OSX allowed us to have unified font sizes between Windows and OSX, before we were checking the platform and using different font weights etc to get the two similar.

It is super odd, I haven’t been able to recreate it as I didn’t have access to a mac pro here. We just turned off font smoothing on OSX as the only change in a beta build and people came back saying the slow instantiation was solved. Also it was only instantiation of the editor that was slow, once created everything was fine. Don’t know if that helps in anyway!


#15

Well, presumably the smoothing algorithm must have to run on a font while it’s being loaded, and it must take some time. Just seems bizarre that it could take so long - I was wondering if perhaps you’ve got something weird your code that’s repeatedly forcing a typeface to be reloaded or something, because even 1.5 seconds seems a bit long just to get a window on screen.


#16

What are the plans for adding the macro? Can we expect this feature soon?


#17

We already added it: JUCE_DISABLE_COREGRAPHICS_FONT_SMOOTHING


#18

Nice. Which version of JUCE do I need to use it? Is it already in a stable release?


#19

It’s on develop. Don’t know if it’s made it onto master yet.