Variable font rendering issue: variable fonts have a white hairline where letter contours overlap
Reported by
stephen....@gmail.com,
Jun 21 2018
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36 Example URL: https://www.axis-praxis.org/specimens/__DEFAULT__ Steps to reproduce the problem: 1. View a variable font, especially in a bold weight, at a large scale, and on a high-contrast background 2. Sometimes, changing the font weight makes this more obvious 3. What is the expected behavior? I expect the overlaps of contours to be invisible, as they are in Safari or in desktop software such as Sketch or Adobe Illustrator. Interesting, I can mostly hide the issue with a text-shadow at 0px size and position, but this is a hack and it doesn't correct things entirely. What went wrong? Variable fonts show hairline "cracks" where there are overlapping contours/shapes in letters. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? No Firefox Nightly 62.0a1 (2018-06-21) (64-bit); *not* Safari Version 11.0.3 (13604.5.6) Chrome version: 67.0.3396.87 Channel: stable OS Version: OS X 10.13.3 Flash Version: I think this has been brought up before, but I've searched other issues and I can't find it. It's a small detail, but making typography right is all about small details, and this one can really destroy the look of larger headlines. Hope it's working better soon!
,
Jun 22 2018
,
Jun 25 2018
,
Jun 25 2018
As per comment #0 we have tested this issue on reported chrome version 67.0.3396.87 using Mac 10.13.3 and windows 10. Attaching screenshot for reference. Steps: -------- 1. Launched chrome 2. Navigated to this URL ""https://www.axis-praxis.org/specimens/__DEFAULT__"" We have not seen hairline ""cracks"" on variable font @Reporter: As we are unable to reproduce the issue from our end. Can you verify this issue with fresh profile that is not having any extensions and apps or reset all the flags. Let us know whether issue still persists.. Thanks.!
,
Jun 25 2018
Hi, thanks for taking a look at the issue! Based on your screenshot, it looks like you may have gotten a fallback font when visiting (it looks like Times New Roman), rather than the actual variable font. If you are getting a default font, it won't have the hairlines, because it will have no overlaps in its letters. When I click that URL, it takes me to a mostly-blank page. Can you try this URL, instead? https://www.axis-praxis.org/ I've attached an image of how the main headline should look. Do you see this chunky, sans-serif font, or do you still see Times New Roman? If you are still seeing a fallback font, you might also try https://v-fonts.com/. There, this issue is visible in the "Renner" font, especially if you increase the font weight and zoom in the browser a bit (View > Zoom In).
,
Jun 25 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 25 2018
Stephen, thanks for the report. I'm on Mac OS 10.13.5 and have trouble reproducing this. Do you have a particular font specimen page on Axis Praxis where you see this most strikingly? Could you make a codepen that shows this issue? Do you have any magnification set on the page (Looking glass icon visible in omnibar)? Do you have access to a Mac with 10.13.5 where you could check whether the issue still reproduces on the newer Mac OS version? The reason I ask is: We rasterize variable fonts on Mac OS 10.12 and 10.13 through CoreText.
,
Jun 25 2018
Ok, I see the hairlines on v-fonts.com for Renner and Quell for example. It seems to be only happening at certain font sizes. We'll take a look.
,
Jun 25 2018
Great, glad you're seeing it there! It's the kind of thing that can be easy to overlook but could also make a big collective difference in people's adoption of Variable Fonts. Thanks so much for helping figure it out!
,
Jun 28 2018
,
Oct 19
See also https://savannah.nongnu.org/bugs/?54371 for increasing internal interpolation precision in FreeType.
,
Oct 20
Is this FreeType issue or not? Please report this bug with us if you can see it with ftview.
,
Oct 20
I can't actually see the issue anymore. I suspect it must have been in a version of FreeType released with macOS Mojave. However, there is also a chance that I'm not seeing it due to my current monitor (I'm on a 4K monitor, and don't have a 1440p monitor around to connect to. Fingers crossed, it might be resolved! I'll report back if I see the issue again when I connect with a non-HD monitor. Thank you!
,
Oct 21
I was not able to reproduce the hairline problem with Jost-VF.ttf using FreeType. I actually doubt that FreeType rasterizer had ever had this particular problem at the overlapping contour boundaries. There is another problem with antialiasing gray accumulation at the overlapping and aligned edges. This one is really hard to fix short of resolution doubling. In general, fonts that use overlapping contours are asking for trouble. This was specifically advised against in TrueType specifications.
,
Oct 21
I'm not entirely sure what changed, but the hairline issue obviously did exist earlier, and now seems to be corrected. Nice! > There is another problem with antialiasing gray accumulation at the overlapping and aligned edges. This one is really hard to fix short of resolution doubling. > In general, fonts that use overlapping contours are asking for trouble. This was specifically advised against in TrueType specifications. This issue has been the second biggest thing bothering me in variable fonts. It can be seen in quite a few fonts, as sometimes overlapping contours are the best way to design flexible shapes. One such example is at https://fonts.google.com/specimen/Markazi+Text Other times, the problem shows up in type which doesn't have overlapping contours in individual letters, but which have overlapping portions of letters. For example, Arabic script requires overlaps in its connected letters, and many latin fonts have moments where letters slightly overlap from kerning (e.g. an "R" next to an "A" may have overlap at the baseline). I've reported this on the Apple bug tracker, as it happens across macOS, and therefore seems to be a problem in core text. That is helpful to see that it might require resolution doubling, however ... I assume this means that it may slow performance, and thus potentially raise more issues than it solves?
,
Oct 22
,
Oct 29
Is this FreeType at all? I'm fairly sure not. I'm guessing that it was CoreGraphics rasterizer, and is fixed now?
,
Oct 30
I don't yet have as much knowledge as I'd like about which rendering does what, but based on what I've read, CoreGraphics would make sense. In any case, I haven't been seeing the issue. So, I think it's closed! Thanks so much for the conversation here and for the rest of the work you're doing on Chrome.
,
Oct 30
Looks already fixed, potentially inside CoreText. stephen.thunder.nixon@ - thanks for the report. Please comment if you still see this issue occuring, and if so, please report the OS version and build number from the "About this Mac" dialog. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by stephen....@gmail.com
, Jun 21 2018