TrueType stems rendered way too thin

1

I’m seeing a very big difference in stem thickness between the following scenarios:

  1. Apple: Very dark stems.
  2. Windows 10, CFF: Somewhat lighter than Apple’s, and with more contrast between vertical and horizontals.
  3. Windows 10, TTF: Very thin stems, hinted as well as unhinted (using built-in TTFA). Same result in Edge and FF.

Both PS and TT stems have been set, and alignment zones have been set.

Halp. What do?

2

The Apple renderer will ignore your hinting. Rendering differences are to be expected.

How big is big? Can you post screenshot?

3

It’s a significant difference. The semi-bold TTF on Windows looks like the regular on the Mac. Is there any way I can tweak the stems in TTFA or do I need to VTT it all manually (not even sure that would help)?

4

You can so that in the CSS: make it detect the browser, and use different fonts accordingly. The point of hinting is not to make it look the same on every platform, you know. Why is that so important in this case?

5

I was just surprised to see the difference in this case. On this particular design the difference was just more jarring.

Since I am making the fonts, not the CSS, I’d like this to not be an issue. Alas – I guess.

6

Can you send me some screenshots?

7

Yup, will do.

8

The difference is indeed quite starring.

9

thanks for this discussion!
could you possibly upload for all to see?
These types of issues are a main concern for our customers and I’m fascinated by the rendering implications that were brought up here:
“The point of hinting is not to make it look the same on every platform, you know”

This is contradictory to what we (designers) are told by developers which point the blame over on the type design at all times.
As Claus stated - we’d like to deal with this issue since the design is just as important as the legibility and readability across platforms.

10

I wonder who told you otherwise…?

Rendering, the deriving of screen pixels from the vectors, is platform-specific. The hinting information we put in the font is to help each rasterizer achieve more consistent stems, x-heights, baselines, etc. The different rasterizers know nothing from each other.

There are some rasterizers (specifically on Apple devices) that discard (most of) the hinting info, and other rasterizers interpret it differently. You will see a lot of difference already between rendering modes on the same platform, e.g., whether Windows uses subpixels rather than grayscale, and if grayscale is used, how many shades of gray are employed, etc. Adobe apps employ no less than three different rasterizing strategies depending on the PPM. On Windows, the weightClass is taken into account, and values below 250 will be artificially boldened in some apps. All of which leads to situations where you have significant differences even between apps on the same platform.

Sure, but that does not imply that all renderers will produce a pixel-identical result.

What you can do from within the font is limited. Experiment with the settings, especially strong stems if they are too thin.

Cross-platform cross-browser consistency can only be achieved if you deliver specifically geared outlines to each browser/OS combo. This can be (and has been) done, but be aware that your job will never be finished if you do so, because every new version of the browser and some OS settings may have influence on the rendering result.

1 Like
11

I tried generating with strong stems but that did no difference at all. I also tried to set the TTFA stems to bigger values, but that also did not change anything. I only tested on Win10, so perhaps DW does not really care about those settings, I don’t know.

12

Can you send me the .glyphs file? To support (at) (this website without www), please. I will have a look.