google / fonts

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

Bidirectional slant axis support for variable fonts #2400

Open eliheuer opened 4 years ago

eliheuer commented 4 years ago

@Gue3bara recently updated the upstream repository for the the typeface Cairo with a bidirectional slant axis. See the FontGoggles preview below.

font-goggles-demo

The reasoning behind this was posted in the Cairo PR.

I thought it might be unusual but I want the font to support both slanting directions to be available as an option depending on the main language of the paragraph if it's Latin featuring Arabic words or Arabic featuring Latin words I think it is essential to support both directions for bi-script font families like Cairo

I know that Google Fonts is not able to serve slnt axis fonts yet, due to lack of browser support, but when more support for the slnt axis is added I want to suggest that bidirectional support is included in that.

arrowtype commented 4 years ago

I recently made a set of browser tests for slnt and ital axes, which is relavent here:

https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests/index.html

Once browsers support these, I think Google Fonts won't have to really do anything special to also support it ... but it's still probably important for the team to keep this possible case in mind so they don't design something that can't work with positive and negative slnt values.

tiroj commented 4 years ago

I wonder how a bi-directional slant axis for different scripts would work in terms of nomimal 'Italic' named instances? We don't have a mechanism to differentiate left and right slant as a feature of italic for, respectively, Arabic and Latin in the same font. There's one slant axis, applying to both scripts, and only one concept of Italic as a style in applications.

Now wondering if we should have defined slant in variable fonts not as absolute counter-clockwise or clockwise but as relative to text direction? So, e.g. a positive value would be right for Latin and left for Arabic. Of course, one could easily build a font that works in that way, but it wouldn't be conformant with the current slnt axis spec.

arrowtype commented 4 years ago

I wonder how a bi-directional slant axis for different scripts would work in terms of nomimal 'Italic' named instances?

@tiroj This gets at the meaningful difference between slnt and ital axes, beyond just their different names and possible values.

A family that slants different scripts differently should probably use the ital axis, where 0 is "normal" and 1 is fully "italic" (a more apt name for this style in multi-script typefaces would probably be "cursive" or perhaps "secondary"). The value of 1 could easily have different directions of slants between Latin & Arabic characters. An example of a typeface that does something like this is Greta Text, by Typotheque, which changes the slant much less in Hebrew characters for the secondary style:

Typotheque Greta Text Latin vs Hebrew

(Michal Sahar wrote a great blog post on Typotheque's site going into more detail on this)

On the other hand, a multi-script family that changes slant in a geometrically similar way between different scripts should probably use the slnt axis, where positive values are negative values are approximately clockwise slant angles and approximate counter-clockwise slant angles. Typically, this might be done more for overall layout / stylistic purposes than for a "secondary" setting in running typography. For example, some layouts have slanted typography that is upright, but runs diagonally from one side to another. A multi-script typeface with a matching slnt axis could allow for this type of "poster" typography to have a mix of English & Arabic.

gig poster showing slanted typography

from fonts in use

I wrote about this subject in more depth while taking notes for Recursive, where I am trying to use just slnt or ital, then move the cursive-alts control into a custom axis CRSV.

One thing I have recently realized that is an advantage of the slnt axis is that it works with the CSS rule font-style: obqlique XXdeg. For this reason, I am now leaning towards (pun intended) using the slnt axis for Recursive, to encourage users to animate this axis in CSS.

In general, I think that the majority of text-oriented fonts, where italics are mostly about secondary text hierarchy and less about special effects – should use the ital axis for user simplicity.

Evertype commented 4 years ago

Maybe you can make text slant both this way / and that way \ but practically speaking in any setting where a RTL like Latin or Cyrillic and LTR like Hebrew or Arabic co-occur (and do remember the formerly-Soviet Turkic languages) the italic slope really does have to be the same for both types of script. If you are quoting, for instance, both Latin and Hebrew italics/obliques in a paragraph of Hebrew text and they don't slope the same way it looks terrible. In my Yiddish Alice I have the poems set in italic as Carroll does, sloping thisaway / not thataway \ and it works fine. I think because of the accident of faux-italics most readers of RTL scripts are used to it anyway.

Having said that there was once a tradition of \ left-leaning italics in Latin script, for some sort of legal text — not just to grab attention. as suggested at https://en.wikipedia.org/wiki/Italic_type#Left-leaning_italics — maybe the legal use has been replaced by all caps now.

tiroj commented 4 years ago

@arrowtype Consider the possibility of a font that contains both ital and slnt axes, and in which the ital axis 1 setting produces a left leaning Arabic and a right leaning Latin. That still leaves open the question of how the slant axis might apply to each of those italics, and how the notion of slant should be interpreted. As currently spec'd movement on the slnt axis would make the Arabic italic less slanted and the Latin italic more slanted, or vice versa. And maybe that is the correct interpretation, but I can also imagine an interpretation in which an increase in the slnt axis value should mean increase the slant, regardless of direction.

Of course, both interpretations may be valid, and could be accommodated with a second slant axis (probably best implemented as a meta axis that reverses the direction of the slnt axis). :)

arrowtype commented 4 years ago

Caveat: you both probably know more than me about the things I'm about to say, but I'm also trying to be clear for others who may come along and read this later on. :)

@Evertype my knowledge of multi-script graphic design is pretty lacking, so thanks for giving that perspective. How common would you say it is for a paragraph to actually mix RTL and LTR text inline? My vague notion was that multi-script documents more typically separate things by chunks like paragraphs or blocks of text. Are there any visual examples that you happen to know of that mix things inline? By Alice, you probably mean your Yiddish version of Alice in Wonderland, correct? It appears that it mostly uses Latin script rather than a mix of Hebrew and Latin, but are there pages that mix the two?

@tiroj Plenty of people have interpreted the slnt axis differently than the spec (negative is clockwise, positive is CCW), but my impression is that interpreting the spec differently than it is written is inherently a misinterpretation of the spec, and such uses have a negative overall impact on software & browser support for variable fonts. From the OpenType doc for slnt:

Note that the scale for the Slant axis is interpreted as the angle of slant in counter-clockwise degrees from upright. This means that a typical, right-leaning oblique design will have a negative slant value. This matches the scale used for the italicAngle field in the 'post' table.

I'm not trying to be dogmatic – I for one wish that the slnt axis had reversed negative/positive guidance in order to be more intuitive, especially due to the prevalence of sliders to control axes in UIs. But, now that it's published, font designers can't really be justified in interpreting their own rules for it. Or, at the least, it would be a "hacky" implementation that may leave users more confused in the aggregate.

Of course, one could create a non-registered axis like ANGL that would work to just increase slant angle in whatever direction each italic goes, and that would be fine. (However, it wouldn't be supported directly with CSS's font-style property, and I don't think it should be expected to be).

thlinard commented 4 years ago

Alongside Greta Text for Hebrew, FF Amman is an example of a Arabic typeface with a real Italic (as opposed to slanted uprights): the upright contains a Naskh script, the italic contains a Ruqʿah script (see one of the last illustrations on https://yanone.de/fonts/amman/: the same Arabic text in Naskh style and in Ruqʿah style). FF Amman

laerm0 commented 4 years ago

(Ooh, that's a fine Ruq'ah, @yanone .)