Becauseif I didn't, thingswouldgetveryconfusinglittle.
So I wantedtoexplainhow I fellinto, um, playingwithvariablefonts.
A coupleofyearsago, I startedmakingtexteffects.
We'vehateChanelandCSS, and, uh, I cameacrossbearablefundsas a resultofmakingtexteffectsanditbecamecleartomeveryquicklythatterriblefundsofferussomeuniqueopportunitiesthatstandardfundshaveneverbeenabletoprovideus.
Andthereasonforthatisthat a variablefundisonefrontfilethatactslikemultiplefunds.
Andwhat I meanbythatisitthemomentwhenyou'relightingfundsintoyourside, Sayyouhave I don't know.
Six.
Wantwhites.
Youwouldhavetheseasseparateindividualfiles, andyouwouldliketheminseparatelywith a variablefund.
Itwouldbereallyjunkiebecauseyoucouldn't getthosesmoothtransitions, butwe'renotjustlimitedto a singleaccessat a time.
A variablefuncancontainthousandsofaxes, andyoucaninterpretlatebetweenthecombinationsofftheaxesaswell.
Sowhetherit's whiteorwitstandardstufflikethatorifit's something a littlebitdifferent, this'lloneiscalledDecobar.
It's byDavidFellow.
It's anexperimentalvariablefund.
It's oneofmyfavoritesbecauseithas a lotoffcreativeaxesthatyoucanplaywith.
Now I'm goingtoshowyousomeexampleswithDeckerofourbitlater.
Butbefore I dothat, I wantedtogetthepracticalimplementationstuffoutofthewaythatpeoplealwaysask, besting, rathersupport.
Youcantotallyusethemnowunlessyouhavetoesupport.
InternetExplorer.
IfyoudohavetosupportInternetExplorer, youcan U.
C s s featuredetectiontopullbackto a standardform.
I'm soyouknowthattherearewaysaroundit.
TheonlycaveattothesegreentakesisthatallFirefoxyouneedtohavehighSierraandaboveon a Mac, forexample, becausefivefolksreliesontheoperatingsystemtorenderthevariablefundcrimedoesnot.
So I seehereis a coupleofoperatingsystemsagree, sothatshouldbelessof a problem.
Andifyou'redoingfancystuff, fundstretchonopticalsizesoitdon't changewhatyou'redoingalreadyjusttouse a differentproperty, keepeverythingthesame.
Andthenwhenit's custom, youspawnvariationcitiesforthat, sousingthemisprettymuchthesameaswhatwedoingnowwith a youknow, a coupleofslightchangeswhenitcomestofundsontheWeb.
There's a wholetalkingthatforperformanceonitsownor a variablefund.
There's a coupleofthingsaboutthemthatdoesmakehimquitegoodforperformance, buttheystillfund, soyoustillneedtohave a goodfunperformancestrategy, thingslikefrontdisplay, subsetting, compression, thatkindofstuff.
There's threethingsthat I wantedtomentionaboutvariablefundstorythat, um, goodforperformance, thekindofuniquetothefactthatthey'revariablefundsandthe 1st 1 isreducingthenumberoffrontrequests.
Sooneofthewaysthatwemaintaingoodfunperformanceistryingtonotrequestismanyfundstodownloadatthemomentwhenwethinkaboutreducingthenumberoffrontrequests, we'd weighupthecostofdesignoverthecostofperformance, andwe'd havetojustifythecostoffaddingnewfontsbeforeweaddanymorestylesinbecauseoftheimpactthatitwouldhaveontheperformanceofthesite, butwith a variablefund.
Becauseallofthedonnacanexistwithinonefilesimplybyusing a variablefunt, youreducethenumberoffrontrequestsjustbecausethat's whatitdoes.
Um, it's prettymuchjustwordsthatrhymewithGellaron a bluebitofstoryaboutabouthim.
Soyougettoletabouthimasyougo.
SpeakingofJell O, um, wecanembracethelearningsoffprintdesignrightwhenwesoughttodoiswecancombinevariablefundswiththingslikeSuzehasscrewedandblendmurdersandshapesandclippathandsectionatoursandallofthosebrightthings, andwecanrepresentourcontentinmoreinterestingandmoreengagingways.
Uh, I added a bitofextraCSSfor, um, textjobbought.
It's a backgroundimageinsometechshadows.
TheheavyliftingisreallydonebytheCIA.
They'vebeenkindofdidalltheworkforme, and I justhadtosweepingandout a bitofCSSandthenshareouttheseolddemoonTwitterandwaitforpeopletogo, whichtheydid, and I wasveryexcitedabout.
Um, Sowhen I startedmakingtexteffects, I eventuallygotboredofthefactthattheywerejustthere.
So I startedexperimentingwithalternateimports.
Ifthisdoesn't work, I have a backupoff a button.
Butthat's boring.
So I'm goingtosay a wordtomarshmallow, andheisgoingtobreathefireinthatwetusingmyawesomevariablephone.
Bye.
Hey, thisusesDeckerbaragain.
It's like a bunchofaxeson.
What I loveaboutthisDemoryinparticularisthat I alwayswantedtocreateviatext, but I couldnevergetittolooklikefire.
Soinstead, what I didis I madetherestofitlookedlikethefiretext I couldmake, um, but I likehowitkindofthetextitselfbecomespartofftheillustrationandtheinteractivityon.
Thisusesthewebaudio a p i onitlistenstothesoundofmyvoice.
What I'm gonnadobefore I explainwhythisiscoolisgetallofyoutogowoo.
Uh, okay.
Sowhy I thinkthisiscoolAsidefromthefactthat I likepeopletowooatmewhen I'm onstageisthatifyouthinkaboutspeechtotextap, eyeslikeorGoogleharmAlexathosekindsofthingswhentheyconvertourspeechintotext, youkindoflosethetorrentoftheintentofyourwords.
Oncecalledtiny, and I justthinkit's a gooddemonstrationoftheeffectsoyoucanmakethingsmoreusableandmoreaccessiblewiththesekindsoftechnologies, orbecausethisismay, youcanalsocreate a reallyinterestingstorytellingthisone's calledblooming G X bytype.
A chewupauthorwhomakesthisfontmakesthemostincrediblevariablefundsyoueverseeninyourlife.
Itactuallyrentisbetteronfivefolks, buttheambientlightsensordoesn't workinfive, so I couldn't couldn't showyou.
Um, butthere's a lotofopportunityhereforcreatingexperiences, whichallowuserstotoexperiencehowWebsitebasedontheirspecificcircumstancesintheirspecificexperience.
And I thinkthat's reallyexciting, likewedon't havetokeepdesigningthingsthatwork a specificwayforeverypersonthatevervisitourwebsite.
And I knowthatsomeoftheseexamplesmightseemtrivial, butwhattheyare a possibilitieswithdemonstratingtheoptionsthatyouhavebearablefundsarestillverynew, andthisis a levelofcontroloveraffrontsthatareunprecedented.
Amazingexperiencesfor I useissowiththeverylacedyoucouldcreate a moreperformancewebsitejustbyusing a variablefunThat's cool, butalso, youknow a littlebitboring, butatbestwecandoallofthesecool, amazingthingsandstarttocreatewebsitesthatarenotjustfor, um, everyonetofeelthesameexperience, buttogivethemsomethingthatsuitstheirneedsinthemomentthattheyinrightnow.
And I thinkthat's reallyexciting.
Andthat's why I getexcitedaboutthefutureoffWebtypographywithterriblefundsIfyouwantparablefunds B Dashwantsdotcomisthebestresource.
Mybloodvariablefundstart.
Devhasn't beenupdatedfor a while, but I willbedoingthatagainserene.