arrowtype / recursive

Recursive Mono & Sans is a variable font family for code & UI
https://recursive.design
SIL Open Font License 1.1
3.3k stars 53 forks source link

Glyphs with `rvrn` substitutions don't respond to letter-spacing changes with variable font in Safari (macOS & iOS) #307

Closed arrowtype closed 4 years ago

arrowtype commented 4 years ago

Bug submitted to WebKit: https://bugs.webkit.org/show_bug.cgi?id=206898

Description of the problem

In Safari on macOS & iOS, some glyphs keep a fixed advance width even if letter-spacing is changed significantly (up or down). This problem does not occur in Chrome or Firefox. This problem is not changed by any combination of variable axis values (e.g. by placing non-registered axes above their min value). Rather, it is present whenever a glyph has been substituted with rvrn (Required Variation Alternates).

Examples:

Screenshots

Issue first noticed in l.sans, which is subbed in for MONO = 0 styles:

image

Issue also impacts added tracking, e.g. letter-spacing: 0.3em:

image

Also present in l.mono and g.mono, which also have glyph substitution (GSUB) from rvrn:

image

Problem in a.italic, b.italic, n.italic (and other italic GSUBs), but not in c or z (which have no italic GSUB):

image

Problem is not in Firefox or Chrome:

image

image

To reproduce

Useful short test string:

ala blb clc dld ele flf glg hlh ili jlj klk lll mlm nln olo plp qlq rlr sls tlt ulu vlv wlw xlx yly zlz

Useful long test string:

aaa   bab   cac   dad   eae   faf   gag   hah   iai   jaj   kak   lal   mam   nan   oao   pap   qaq   rar   sas   tat   uau   vav   waw   xax   yay   zaz   aba   bbb   cbc   dbd   ebe   fbf   gbg   hbh   ibi   jbj   kbk   lbl   mbm   nbn   obo   pbp   qbq   rbr   sbs   tbt   ubu   vbv   wbw   xbx   yby   zbz   aca   bcb   ccc   dcd   ece   fcf   gcg   hch   ici   jcj   kck   lcl   mcm   ncn   oco   pcp   qcq   rcr   scs   tct   ucu   vcv   wcw   xcx   ycy   zcz   ada   bdb   cdc   ddd   ede   fdf   gdg   hdh   idi   jdj   kdk   ldl   mdm   ndn   odo   pdp   qdq   rdr   sds   tdt   udu   vdv   wdw   xdx   ydy   zdz   aea   beb   cec   ded   eee   fef   geg   heh   iei   jej   kek   lel   mem   nen   oeo   pep   qeq   rer   ses   tet   ueu   vev   wew   xex   yey   zez   afa   bfb   cfc   dfd   efe   fff   gfg   hfh   ifi   jfj   kfk   lfl   mfm   nfn   ofo   pfp   qfq   rfr   sfs   tft   ufu   vfv   wfw   xfx   yfy   zfz   aga   bgb   cgc   dgd   ege   fgf   ggg   hgh   igi   jgj   kgk   lgl   mgm   ngn   ogo   pgp   qgq   rgr   sgs   tgt   ugu   vgv   wgw   xgx   ygy   zgz   aha   bhb   chc   dhd   ehe   fhf   ghg   hhh   ihi   jhj   khk   lhl   mhm   nhn   oho   php   qhq   rhr   shs   tht   uhu   vhv   whw   xhx   yhy   zhz   aia   bib   cic   did   eie   fif   gig   hih   iii   jij   kik   lil   mim   nin   oio   pip   qiq   rir   sis   tit   uiu   viv   wiw   xix   yiy   ziz   aja   bjb   cjc   djd   eje   fjf   gjg   hjh   iji   jjj   kjk   ljl   mjm   njn   ojo   pjp   qjq   rjr   sjs   tjt   uju   vjv   wjw   xjx   yjy   zjz   aka   bkb   ckc   dkd   eke   fkf   gkg   hkh   iki   jkj   kkk   lkl   mkm   nkn   oko   pkp   qkq   rkr   sks   tkt   uku   vkv   wkw   xkx   yky   zkz   ala   blb   clc   dld   ele   flf   glg   hlh   ili   jlj   klk   lll   mlm   nln   olo   plp   qlq   rlr   sls   tlt   ulu   vlv   wlw   xlx   yly   zlz   ama   bmb   cmc   dmd   eme   fmf   gmg   hmh   imi   jmj   kmk   lml   mmm   nmn   omo   pmp   qmq   rmr   sms   tmt   umu   vmv   wmw   xmx   ymy   zmz   ana   bnb   cnc   dnd   ene   fnf   gng   hnh   ini   jnj   knk   lnl   mnm   nnn   ono   pnp   qnq   rnr   sns   tnt   unu   vnv   wnw   xnx   yny   znz   aoa   bob   coc   dod   eoe   fof   gog   hoh   ioi   joj   kok   lol   mom   non   ooo   pop   qoq   ror   sos   tot   uou   vov   wow   xox   yoy   zoz   apa   bpb   cpc   dpd   epe   fpf   gpg   hph   ipi   jpj   kpk   lpl   mpm   npn   opo   ppp   qpq   rpr   sps   tpt   upu   vpv   wpw   xpx   ypy   zpz   aqa   bqb   cqc   dqd   eqe   fqf   gqg   hqh   iqi   jqj   kqk   lql   mqm   nqn   oqo   pqp   qqq   rqr   sqs   tqt   uqu   vqv   wqw   xqx   yqy   zqz   ara   brb   crc   drd   ere   frf   grg   hrh   iri   jrj   krk   lrl   mrm   nrn   oro   prp   qrq   rrr   srs   trt   uru   vrv   wrw   xrx   yry   zrz   asa   bsb   csc   dsd   ese   fsf   gsg   hsh   isi   jsj   ksk   lsl   msm   nsn   oso   psp   qsq   rsr   sss   tst   usu   vsv   wsw   xsx   ysy   zsz   ata   btb   ctc   dtd   ete   ftf   gtg   hth   iti   jtj   ktk   ltl   mtm   ntn   oto   ptp   qtq   rtr   sts   ttt   utu   vtv   wtw   xtx   yty   ztz   aua   bub   cuc   dud   eue   fuf   gug   huh   iui   juj   kuk   lul   mum   nun   ouo   pup   quq   rur   sus   tut   uuu   vuv   wuw   xux   yuy   zuz   ava   bvb   cvc   dvd   eve   fvf   gvg   hvh   ivi   jvj   kvk   lvl   mvm   nvn   ovo   pvp   qvq   rvr   svs   tvt   uvu   vvv   wvw   xvx   yvy   zvz   awa   bwb   cwc   dwd   ewe   fwf   gwg   hwh   iwi   jwj   kwk   lwl   mwm   nwn   owo   pwp   qwq   rwr   sws   twt   uwu   vwv   www   xwx   ywy   zwz   axa   bxb   cxc   dxd   exe   fxf   gxg   hxh   ixi   jxj   kxk   lxl   mxm   nxn   oxo   pxp   qxq   rxr   sxs   txt   uxu   vxv   wxw   xxx   yxy   zxz   aya   byb   cyc   dyd   eye   fyf   gyg   hyh   iyi   jyj   kyk   lyl   mym   nyn   oyo   pyp   qyq   ryr   sys   tyt   uyu   vyv   wyw   xyx   yyy   zyz   aza   bzb   czc   dzd   eze   fzf   gzg   hzh   izi   jzj   kzk   lzl   mzm   nzn   ozo   pzp   qzq   rzr   szs   tzt   uzu   vzv   wzw   xzx   yzy   zzz

Environment

Other details

Issue spotted in live websites & reproduced at wakamaifondue.com and axis-praxis.org.

Issue is not shown in static fonts, reinforcing the theory that this is a problem related to rvrn/GSUB.

Also happens in other variable fonts, such as Fraunces (which uses rvrn to sub-in alternate versions of glyphs like n, s, m.

image

arrowtype commented 4 years ago

Observation:

Adding the CSS 'font-feature-settings' and any stylistic set makes the spacing respond as expected (even if the stylistic set doesn't affect the characters in a given piece of text).

webkit-bug-report-css-hack_fix-206898

arrowtype commented 4 years ago

Closing this issue as it's not an issue in Recursive, but rather in WebKit. This was just a good spot to write things down, and a good place to point people to for more information about this bug.