How to derive an Italic TTF from the current Slant axis?

[davelab6]

I'm posting these notes that @dberlow made from the FB/Google meeting (with DB and DC only) Thursdays February 17, 2022.

@davelab6 informed FB, developers of Roboto Flex, that CSS has still not implemented font-style property linking to the slant (slnt) axis (see https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests etc), and so FB should prepare source files or build code for being or outputting two variable fonts, one regular and one italic.

To review how the “Italic” is currently enabled, the max slant axis contains, at the default location, (opsz14-wght400-wdth100…), an obliqued from the regular source, that then serves as the default style from which all other slanted styles are derived.

This includes slanted sources for weights, widths, optical sizes and grades, all of which inherit deltas from their corresponding regular styles. So the largest and boldest style of the regular, and the slant axis, combine to form the largest boldest slanted style. This combination may then have additional deltas applied just for its design space requirements.

Separating the regular from the slant has the upside of being deployable soon, leaving the issue of whether the two will need to be rejoined later as the main issue .

If we separate the slant axis in our source files, and then we then make changes to the regular, they will no longer be transferred to the slant. Any of those changes that do need to transfer to the slant axis would need to be undone if the two were ever combined again. In addition, of course, any changes we make to slant sources after separation would need to be carefully handled in a later merge.

So, if this separation happens in source files, it would be better to do so after all the regular reviews have been completed. Then we can split the two and only make changes to the slant from there on. Santiago and I can look into, and provide the two new designspace files fairly easily, and make an example pair of vfs including the review edits on regular by 2/23/22.

I leave the reorganization of the repository up to Marc and Santiago.

I proposed an alternative, to keep the source files with a single design space, but adjust the build script to derive from the current single design space TTF two children "subspace" or "partial instance" TTFs, a Roman which is simply dropping the slant axis, and an Italic which is all the axes with a single fixed Slant axis value instantiated. I think the fonttools subsetter has been capable of outputting such subspaces for a few years and should be very reliable at doing this. Then, going forward as changes are made to the regular, they will be transferred to the full range of the slant axis as intended, and therefore to the Italic subspace output.

But I am not sure the fonttools subsetter can make a subspace for the Italic this way. @anthrotype wdyt?

[davelab6]

Actually I tested it, sorry @anthrotype for the noise asking :)

This works for me:

$ fonttools varLib.instancer -o test.ttf -v RobotoFlex\[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght\].ttf slnt=-10

The name table etc need updating, I expect @m4rc1e can confirm exactly what.

[davelab6]

And then to make the Roman, I pin the slnt axis to 0 to eliminate it:

$ fonttools varLib.instancer -o test.ttf -v RobotoFlex\[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght\].ttf slnt=0

[davelab6]

Also, Cosimo explained offline,

What won't work is, you start with a min,default,max of 0,0,10 and want to go to 0,5,10 or 0,10,10

[dberlow]

Looks good to me. We just need to look at the file size.
I didn’t realize you just wanted to make it so that the system could find an italic font, and was assuming that we want to make italic that was not the same file size as the original combined file.

I think this is going to be twice the download size to gain that ability, that way, the other way is maybe 1.85 times as large;)

[davelab6]

bytes     file
1,717,148 original.ttf
1,197,472 test-roman.ttf
1,247,248 test-italic.ttf
2,444,720 test total
3,434,296 original x2

Well, its not x2, its 1.4x. But yes, the lack of proper VF support in CSS has really screwed us :(

[dberlow]

This is excellent!

[davelab6]

@rsheeter had some ideas about how a slnt axis could work with current CSS, based on a misunderstanding I had explained... it turns out on a closer reading of @thundernixon 's test page that CSS is actually good for slnt and its just Safari still hasn't implemented it correctly as Chrome and Firefox have. Alas!

I also note that, sadly, fonts with an ital axis and font-style: italic are working "the worst" in practice today, since both Chrome and Safari do it wrong, while with slnt only Safari is doing wrong...

Still, I hacked up a version of Stephen's page to see about the ital axis idea @ https://jsbin.com/peloperami/edit?css,output - but sadly this doesn't work as hoped and in fact turns off the auto slanting which is arguably worse...

I also thought that, since the GF CSSv2 API has italics requested the same way if there is actual ital axis or there are 2 files, roman and italic, then, if we turn slnt axes into ital axes in a VF project source design space, we could then initially offer ital@0,1, as 2 separate design spaces, now, and then upgrade the family and API 'in place' to offer ital@0..1, as a range between roman and italic as was initially intended with the slnt axis... but, that is impractical until the ital axis can be used at all via font-style in Chrome and Safari (and the CSS specs updated to make all this explictly documented behaviour.)

[davelab6]

So, I was going to say, nothing to do here, it seems we should proceed with the 40% hit, unless... How many rvrn features does Roboto Flex have in the slnt sector of the design space? If it was zero, then perhaps, we could ship Roboto Flex with a slnt axis, because the situation in Safari would be that font-style: italic would paint an auto-slanted-roman style, not the 'true' slanted gvar style, but this would be VERY similar....?

But alas, this is also not good, according to my experiments with Recursive in the API today @ https://jsbin.com/ticige/edit?html,output

It seems that the underlying CSS bug here is that both Chrome and Safari auto/faux-slants font-style: italic instead of using the slnt axis, and if you apply font-variation-settings this is ADDED to the faux slant, so you get a double slanting effect, once from the gvars and once from the faux treatment.

So users who set font-variations-settings to create the slant effect desired would Yikes :)

Safari:

Chrome:

So, I think we ought to proceed as planned, where FB works on polishing the Roman design space this week(end) then next week switches mode to the Slant-max masters (27?), and then in the build process you fontmake your 54 masters to a single TTTF with slnt, and then subspace 2 TTFs out of it.

[sannorozco]

Here’s the Slant recipe I follow for every master,

• Select master, rename it and add slnt-10
• Using open source extension ItalicBowtie by Cyrus Highsmith
• Italic Angle: -10 degrees, Cross Height: Mid UC, Italic Slant Offset: 0
• Run script to select all base glyphs to be slanted (no composites)
• Then italicize all selected glyphs
• Edit manually the below glyphs to fix the visual design of diagonals that can not be auto slanted satisfactorily:

Edit (diagonals)
----------------

graveacute
KMNVWXY
kvwxy

Delta Lamda Sigma Kaisymbol
kappa lamda chi

Zhe Ka Zhedescender Kadescender Kaverticalstrokecyr Kabashkircyr Ustraightstroke Hadescender Hastroke-cy De.bgr Zhe.bgr El.bgr
zhe ka em zhedescender kadescender kaverticalstrokecyr ustraight ustraightstroke hadescender hastroke-cy zhe.bgr el.bgr 


Check positioning
-----------------
percent pertousand onequarter onehalf threequarters
dotbelowcomb diresisbelowcomb commaaccentcomb brevebelowcomb macroncombbelow
Odieresismacron odieresismacron Otildemacron otildemacron Odotaccentmacron odotaccentmacron

[davelab6]

I am still going back and forth on this; the other 2 families in this situation are Recursive and Inter (eg google/fonts#2386 (comment)) and it may be best to just grin and bear the bad Safari situation because Apple will eventually fix Safari (and GF can fix the specimen page to show the slant styles) then everything is good.