Inconsistent line height in Safari

[epsil]

Italic text causes uneven line height when viewing the page in Safari (Mac and iPhone). The attached screenshot illustrates the problem.

(The text is from the article "General Parser Combinators in Racket".)

What's curious is that the standard web fonts do not have this problem. The problem occurred when I went to Font Squirrel to generate my own web fonts without subsetting. The problem also occurs if I disable web fonts altogether and let the browser use the Crimson version installed on the system.

I have tried to generate the web fonts with the default settings (in generator_config.txt), as well as other settings (enabling/disabling auto-adjusted vertical metrics, TrueType hinting, and x-height matching). No luck. I have also checked out earlier versions of the fonts.

The problem does not occur in Firefox.

[epsil]

Italic small caps are also behaving strangely:

[skosch]

Thanks for the bug report!

First off, that's an great article and one more reason for me to give Racket a serious look. Great styling too – my only suggestion would be to use a proper webfont for the headings, too; I'm on Linux and I get Arial as my fallback, which, meh …

Now, as for the line heights, I'm not sure what to do. The screenshots at http://levien.com/webfonts/vmtx/ seem to indicate that Safari only takes into account the hheaascent/descent values for line-height calculations. Unfortunately, other browsers do, too, and I'm not the right person to ask how all these settings affect one another across browsers and systems. Crimson's vertical metrics underwent a major overhaul a while ago under the aegis of @rainerschuhsler and I was under the impression that all problems had been fixed, but there have either been regressions since, or Safari just hasn't seen very extensive testing. I don't have a Mac, so I can't comment myself. Would you be willing to help dig a bit deeper?

Finally, I'm assuming you're referring to the Turkish İ in the small caps? I can't reproduce that either – another Safari issue? Weird … is that only with the Fontsquirrel-generated files or with the ones straight from this repo as well? Any difference between the desktop and web fonts?

[epsil]

I don't have a Mac, so I can't comment myself. Would you be willing to help dig a bit deeper?

Sure; I'd be happy to help out in any way I can.

It appears to be a Safari-only bug: it occurs in Safari on OS X, Safari on Windows (5.1.7) and Safari on iOS (e.g., iPhones and iPads). On the other hand, Firefox is okay, Chrome is okay and Internet Explorer is okay.

What's noteworthy is that Safari has no rendering issues whatsoever with the web fonts in the repo. It is only the desktop fonts, or web fonts generated from the desktop fonts, that trigger the bug. Thus, one line of inquiry would be to determine exactly how the repo's web fonts were generated.

I have been unable to figure this out for myself, however. I read through the Git comments and attempted to generate from the "v2013.12 release" that @rainerschuhsler mentions in commit d6a2d92 – I assume he refers to fe95931 (2013-12-19)? – but to no avail. I had no success in generating from other versions, either.

Finally, I'm assuming you're referring to the Turkish İ in the small caps? I can't reproduce that either – another Safari issue?

Yes, it only shows up in Safari. It occurs with the Font Squirrel-generated web fonts I made for myself, and with the desktop fonts in the repo. It does not occur with the web fonts in the repo, since those lack small caps, in which case the browser produces faux caps from the regular letters instead.

---

Great styling too – my only suggestion would be to use a proper webfont for the headings, too; I'm on Linux and I get Arial as my fallback, which, meh …

Thanks for the feedback! What would be a good fallback sans serif font on Linux, you think? Open Sans? Source Sans? Linux Biolinum?

[skosch]

What's noteworthy is that Safari has no rendering issues whatsoever with the web fonts in the repo. It is only the desktop fonts, or web fonts generated from the desktop fonts, that trigger the bug.

That's good news, I think. The webfonts seem to be generated from the source files using the two scripts in the bin folder, and then via Font Squirrel using the settings in generator_config.txt. The Desktop Fonts are over a year older – don't ask me why; but maybe that's the reason. I'll try generating a new set of Desktop Files.

I'll see if I can find and remove that misconfigured I → İ substitution as well.

Open Sans? Source Sans? Linux Biolinum?

If you're going for the Segoe look, you could look at Sora Sagano's Vegur; there's also Karla, Work Sans, or League Spartan ... or you could also go with an all-caps-and-tracked-out Montserrat or Raleway. So many options! :8ball:

[skosch]

Ahhh ... wait. Could this be a side effect of #20?

@katef HELP :flushed:

[epsil]

In #20, @katef identified, by bisection, commit 2d24623 (2015-04-12) as introducing problems. This bug, on the other hand, is way, way older: it goes all the way back to the first commit – f1a62c92 (2013-08-04). Generating from the OpenType fonts in that commit still produces the bug.

Which isn't to say that @katef wasn't on the right track, but this wasn't introduced by anything she did or didn't do.

[rschiang]

I bumped into a similar problem in LibreOffice. The roman text and italics won't align:

After tweaking font metrics for a bit, I patched the following bits in the OS/2 table of Crimson Text Regular:

• version: 3 → 4
• fsSelection: USE_TYPO_METRICS (bit 7)
• sTypoLineGap: 307 → 92

and the problem was fixed. It seems that the metrics in Roman style are inconsistent with the others; I don't have Glyphs installed, but maybe @skosch could patch this? :)