search

google / fonts

Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
https://fonts.google.com
18.25k stars 2.62k forks source link

Pavanam rendering inconsistency between devices #1104

Open radar opened 7 years ago

radar commented 7 years ago

I'm seeing the Pavanam from Google Fonts rendering differently across two devices and I think that there shouldn't be such a difference of rendering. I was told to file an issue so here I am.

Here's a test page:

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Pavanam" rel="stylesheet">
  <style type='text/css'>
  body {
    font: 14pt Pavanam;
  }
  </style>
</head>
<body>
  <h1>This is a test of the Pavanam Font Rendering</h1>
</body>
</html>

Here's how I am seeing the font rendered on Chrome Version 59.0.3071.115 on macOS:

image

And here's how I'm seeing this same page rendered on Safari on iOS 10.3.2:

safari

And here's the two side-by-side:

side-by-side

m4rc1e commented 7 years ago

@radar thanks for the test.

I've thrown it into a jsbin, http://jsbin.com/dufujarife/edit?html,output

davelab6 commented 7 years ago

Thank you @radar

laerm0 commented 7 years ago

Well, this is fun. It's different in Chrome 61.0.3163.91, Safari 10.1.2, and FF 55.0.3. (All OS X 10.12.6.)

pavanam

I'm sorta not surprised: I know FF renders darker than Chrome and IE, but I didn't know Safari rendered darker yet. What is a surprise is how much shorter the string is in Chrome. The spacing is much tighter in Chrome and I think it's because of subpixels altering AW...? Flag 4 is not checked in the head table, so that's not it, but a closer look makes it look like something similar is going on. I think it's hinting, so I'm assigning myself and will investigate further.

laerm0 commented 7 years ago

I'm digging into this issue this afternoon and I wonder what Google's hinting procedure is for fonts like this (one non-Latin script with the default Latin). The raison d'être for a font like this is the Tamil; the Latin is essentially vestigial in a way as it is Google Fonts' requirement that all fonts should have Latin. It's my thinking that this should be hinted with the focus on the Tamil and if the Latin looks iffy, so be it, especially as the Latin here was taken from Pontano Sans and a user disappointed with the Latin's rendering in Pavanam could just switch to Pontano Sans.

In other words, I think we should, via hinting, prefer improving non-Latin rendering over Latin (and related: i.e. Greek and Cyrillic) rendering in non-Latin fonts. Therefore my desired outcome with this issue is to make sure the Tamil looks good across platforms and browsers and call the Latin acceptable as long as it is not broken.

Thoughts from @m4rc1e and @davelab6?

laerm0 commented 7 years ago

Ping @m4rc1e and @davelab6 for opinions on the above...?

davelab6 commented 7 years ago

I'm digging into this issue this afternoon and I wonder what Google's hinting procedure is for fonts like this (one non-Latin script with the default Latin).

ttfautohint has now got a handle on multilscript fonts.

The raison d'être for a font like this is the Tamil; the Latin is essentially vestigial in a way as it is Google Fonts' requirement that all fonts should have Latin. It's my thinking that this should be hinted with the focus on the Tamil and if the Latin looks iffy, so be it, especially as the Latin here was taken from Pontano Sans and a user disappointed with the Latin's rendering in Pavanam could just switch to Pontano Sans.

Agreed

In other words, I think we should, via hinting, prefer improving non-Latin rendering over Latin (and related: i.e. Greek and Cyrillic) rendering in non-Latin fonts. Therefore my desired outcome with this issue is to make sure the Tamil looks good across platforms and browsers and call the Latin acceptable as long as it is not broken.

Yes

laerm0 commented 7 years ago

Cool, I'm glad we agree @davelab6. So, well, let's look at the Tamil and see if it looks okay.

screen region 2017-11-06 at 13 19 11

Hm.

Chrome is the dark one there, with Firefox and then Safari below it. That doesn't look like a rendering issue to me, though: it looks like a darker weight altogether. Windows is fine except for IE, where it looks like a darker weight as well.

screen region 2017-11-06 at 13 23 39

I'll see what I can figure out about this.

laerm0 commented 7 years ago

A screen grab of OS X Chrome right now:

screen region 2017-11-09 at 13 05 12

¯_(ツ)_/¯

One wonders if jsbin has made some background change...?

IE still looks very dark, but it loads the same WOFF resource as Chrome does, so I am going to call that a rendering issue in IE.

As to the other browsers in OS X appearing subtly different, well, I'm inclined to call that those browsers as well. Hinting can't help us here. I think this is just the way it is.

Thoughts?

davelab6 commented 6 years ago

@laerm0 Hmm! :) Well, first thing I notice is that the Tamil design is actually different in some of these screenshots. Eg on the last glyph, the loop on the right does / does not connect; and the amount of white space inside the long tail of the second to last glyph is very big or rather small. The second thing is that you don't say exactly what we are seeing, or provide the URL to reproduce.

I guess this shows Chrome, Firefox and Safari on macOS? The first image's Tami is a different font to the second and third:

screen region 2017-11-06 at 13 19 11

I guess this is Windows IE - what version of Windows, what version of IE? :) The Tamil is a 3rd design, look at the proportions of the 3rd from last letter, it is very wide compared to the previous two.

screen region 2017-11-06 at 13 23 39

Same for this - its macOS Chrome, but what is the version of each? :) However, this looks much more like the 2nd and 3rd browser images, so I guess if you reproduce that first image with 3 browsers, they will now be the same... :)

screen region 2017-11-09 at 13 05 12

Well, overall, I suggest to provide the URL you are testing against, and a systematic set of screenshots from BrowserStack that show all the different rendering outputs of that URL. In particular, we need to see a reproduction of Safari on iOS and Chrome on macOS, both the versions that @radar mentioned and their latest versions.

BTW BrowserStack offers $0 pro accounts for people working on libre software if you email them :)

laerm0 commented 6 years ago

Yes, I thought the dark Tamil was different as well, different like not a rendering issue but a different weight of the same font (or different font!).

The URL I have been using is the jsbin mentioned further up in the thread.

Yes, the browsers I am using are all the newest versions of those. (I did say which is which, re-read my post. ;) ) In Windows' case, that's IE 11.0.47 on Win10. Looking at the Developer Tools inspector in IE shows that it is downloading the same WOFF resource as the browsers that are rendering it correctly.

I did email browserstack some weeks ago but their response was they would only give a free account if we put their logo somewhere on our site. I'm responded "I'm working for Google, I don't see that happening." 🤷‍♂️