Muutuva fontidega tüpograafia areng: sissejuhatus

Õhuke, paks ja kõik vahepealne: FF metamuutuja monotüübist

Sõnadel on jõud ja tüpograafia on nende hääl

Sajandeid on tüüp olnud see, kuidas me kuuldut loeme. Samuti mõistetakse üldiselt, et kirjatüübid ja tüpograafia on brändingu, väljendusoskuse ja häälevahemiku keskne element. Suur tüpograafia mõjutab lugematul viisil mõistmist, meeleolu ja tähendust ning on disaini oluline osa. Kahjuks ei suutnud me aastaid pärast veebi tulekut rakendada veebisisule kõike muud, kui kõige põhilisemat tüpograafilist disaini. Võimalusega kasutada päris fonte ja OpenType'i funktsioone - nagu ligatuurid, konkreetsed kujundikomplektid, fraktsioonid ja tõeline sisselõige - paranes tüpograafiline maastik tohutult. Kuid reaalajas veebis sisu vaatamise tulemusel on kiirus disaini kõige kriitilisem aspekt - seega oleme lehe kiiruse jaoks kaubitsenud tüpograafiliselt „häälevahemiku” järgi. See tähendab vähem fondi kaalu ning vähendatud brändi truudust ja häält.

Paljude seast üks (paradigma: nihutatud)

Muutuv font on üksik font, mis toimib sama palju
- John Hudson

Muutujate fondide tulek muudab kogu selle dünaamika. Nagu kirjeldas John Hudson, on muutuv font üksik font, mis toimib nii palju: kõik laiuse ja kaalu variatsioonid, kaldus ja isegi kaldkiri võivad paikneda ühes, väga tõhusas ja kokkusurutavas fondifailis. Veelgi enam: vorming (mis on tehniliselt osa OpenType 1.8 spetsifikatsioonist) on täiesti laiendatav. Tüübi kujundajal on täielik kontroll kasutatavate telgede, nende vahemike ja isegi uute telgede määratlemise üle. Praegu on 5 registreeritud telge (laius, kaal, kaldus, kaldkiri ja optiline suurus), kuid kujundaja võib varieerida mis tahes telge, mille nad valivad. Mõned näited hõlmavad tõusuteede ja laskumiste kõrgust, tekstitaset, isegi serifi kuju. Võimalused on peaaegu piiramatud. Eemaldades jõudlustõkke, avame ukse huvitavamaks ja dünaamilisemaks kujunduseks ning märksa suuremaks võimeks väljendada brändi tõelist häält. See kõik säilitab truuduse kirjatüübile endale: muuta saab ainult telje kujundaja paljastatud telgi. Lubatud pole kunstlikud moonutused.

Veebikujundus, leiutatud

Kuigi tehnoloogia alles küpseb ja tüübikunstnikud töötavad selle uue tööviisi ladusamaks muutmise nimel, on veebi disaini lubadus murranguline. Tüüpiline stsenaarium oleks piirata mis tahes kujundus 3–5 erineva fondiga, mis esindavad saidi kujunduskeele ja hääle kõiki aspekte, sealhulgas kõiki kehakoopia ja pealkirjade permutatsioone. Selle lihtsaimal rakendamisel annaksid muutuvad fondid meile vabaduse kasutada rubriikide igal tasemel erinevaid kaalu - suurendades oluliselt nende selgust ja loetavust.

Massivahemik 100–900

Pealkirjades või andmetihedal teabeekraanil võiks kasutada ka pisut kitsamat tähemärglaiust. Tegelikult võiks kogu tüpograafilise süsteemi kujundada proportsionaalseks: mass ja laius võivad saada korpusteks tavalistes kehakoopia sätetes. See võimaldaks neid aspekte hõlpsasti skaleerida koos kehakoopiaga, kui selle sätted muutuvad vastavalt ekraani suurusele või kasutaja eelistustele. Kõik see koos sellega kaasneva jõudluse suurenemisega, mis on tingitud vähemast HTTP-taotlusest (vähem fondifaile) ja allalaaditavate andmete kokkuhoiust (ehkki see sõltub kasutatavast fondist ja tihendusest).

Kuid kuigi need vabadused võimaldavad meil olla väljendusrikkamad, aitavad mõned tõeliselt huvitavad võimalused lugemiskogemust ise muuta. See leht (noh, tegelik demoleht ise) on üles seatud uue muutuva fondi versiooniga FF Meta, Erik Spiekermanni klassikaline sans-serif-kujundus, mis ilmus esmakordselt 1991. aastal. Isegi kui mõlemal on ainult üks variatsioonitelg (kaal) romaani ja kaldkirja variatsioonide korral saab suurepärase häältevahemiku saavutada tohutu jõudluse suurendamisega: 18 faili ja üle 288 k faili asendatakse ühe failiga, mille maht on ainult 84 kB.

Uuendatud lugemine ekraanil

[Meta] peab tegema midagi enamat kui ilus välja nägema: see peab päris kõvasti tööd tegema
—Erik Spiekermann

Mõned suuremad väljakutsed hea lugemiskogemuse loomisel on seotud proportsionaalsuse ja peente detailide puudumisega. Kaasaegsete CSS-i ja OpenType'i funktsioonide ja variatsioonide kombinatsioon on võimas kombinatsioon. Funktsiooni, näiteks ligatuuride ja sidekriipsude seadistamine keele põhjal, sidekriipsude sisse- ja väljalülitamine ekraani suuruse põhjal ja isegi tähemärkide laiuse kohandamine väikseimatel ekraanidel, et mahuks reale rohkem tähemärke ilma fondi suurust vähendamata, võib dramaatilisi parandusi teha lugemiskogemuse sujuvus ja mugavus.

Valmis lähivõteteks

Garamondi 18. sajandi lõige optilistes suurustes. Esimese pildi suurus on 6pt, teise suuruse 72. Pange tähele löögikontrasti erinevust. Suuremas suuruses on see palju rafineeritum.

Teine funktsioon, mis oli metallitüübis tavaline, kuid kadus tõlkimisel fototüüpimiseks ja digitaalseks, oli optiline suurus (noh, mõned disainerid loovad ikkagi erinevatele vahemikele eraldi optilisi suurusi, kuid see on haruldane ja mõnevõrra piiratud). Mitte nii sageli sans-serif-kujundustel, kuid möödunud aastakümnete jooksul (tõsi, sajandeid) oli üsna tavaline, et kirjatüübi füüsiliselt väiksemaid suurusi lõigati pisut raskemate löökidega, avatumate kausside ja loenduritega ning mõnel juhul loetavuse säilitamiseks isegi laiemad avad. Eriti ajalehed pidasid seda kriitiliseks tagamaks, et read ei eksiks ega kirjad ei kannataks tindikasvu tõttu liiga palju.

Optiline suurus on muutuvate fondide tagastamise teinud ja neid saab võimaluse korral automaatselt rakendada või veebidisainer või arendaja selgesõnaliselt määrata. Nagu mainitud, pole see sans-serif-tüüpi kirjatüüpides nii sagedane funktsioon, nagu see on, kuid seda saab kasutada suurejoonelise kontrastiga serifide kujunduses üsna dramaatilise efektina.

Poola ja rahulik

Juba arutatud eeliste puhul on muutuva fondi puhul see üsna kaalukas. Kuid hea tüpograafia pole veel suurepärane disain. Telgede vahemik, näiteks laius ja kaal, annab meile tohutu vabaduse omada veebis toimetuslikumat kujundust ilma, et peaksime laadima ülikõrgeid failivarasid. Ja kuna meil on need vähesed nõutavad muutuvad fondid juba paigas, on võimalus paljastada need sisu avaldajate endi jaoks kasutamiseks. Kujutage ette disainerite rolli sisuhaldussüsteemis (või CMS-is), kus veebisait asub. See disainer võiks kasutada mõnda CMS-i sisseehitatud lihtsat juhtelementi, mis võimaldaks neil tippida konkreetseid pealkirju või tõmmata jutumärke, võimaldades täiesti uue kujundustasandi, mis sarnaneb meie prinditavale, ilma et oleks vaja iga kord kohandatud koodi kirjutada.

Võib-olla oleme selle uue ajastu algusjärgus, kuid tulevik on kindlasti helge

Alates 2018. aasta maist toetab 3 peamist 4 veebibrauserit lisaks mõlemale domineerivale mobiilplatvormile ka muutuvaid fonte (kontrollige saidi caniuse.com tuge). Seda silmas pidades oleme valmis juba täna veebi valgustama.

Siin on CodePeni terve leht. Vaadake kogu seda asja koos ja uurige CSS-i, mis seda juhib. See hõlmab skaleerimise tüpograafilist süsteemi, mille lõin mõne idee põhjal, mille õppisin Jen Simmonsilt ja Tim Brownilt, kasutades vaateava ühikuid, CSS-i kohandatud atribuute (aka muutujaid) ja palju arvutusi. Saate seda vaadata otse CodePenis või kontrollida seda allpool manustatud kujul.

Mõned mõtted kirjatüübi ja projekti kohta

Olen alati olnud Erik Spiekermanni tööde fänn ja arvan, et Meta, Officina ja Fira kronoloogia ja ajalugu on tõesti huvitavad ning moodustavad minu jaoks viimase 25 aasta jooksul väga suure osa digitaalse disaini kangast. Võimalus kasutada sellist ajalugu ja mõju disainimaailmas kirjatüüpi ning töötada sellega uhiuue tehnoloogia kontekstis oli tõesti põnev. Eriti hindasin seda, et sain sama faili osana töötada nii kaalu kui ka kaldkirjaga: see näitab muutuva fontivormingu väärtust tõesti hästi.

Otsustasin, et ei hakka isegi lehte kujundama, kuni kirjutan ise artikli. Tahtsin kirjutada hea sissejuhatuse, mis oleks mõeldud disaineritele ja brändide omanikele, et tutvustada neile muutuva fondi eeliseid nende mõistes: kujunduskeel ja brändi väljendus. Kui ma tundsin, et mul on hea mustand, lisasin natuke täpsemat kirjatüüpi ja selle kohta meie kujundusleksikonis. See andis mulle mõned ideed, kuidas näidata nii kirjatüüpi kui ka ajalugu.

Põhimõttelise trügimise osas mõtlesin skaalale: tahtsin mängida kaalu ja suuruse äärmustega viisil, mida te veebis nii tihti ei näe, kuna enamik disainilahendusi on kasutatavate raskuste osas piiratum. Sel juhul olen kasutanud tervet rida kaalu vahemikus 100 kuni 900 nii rooma kui ka kaldkirjaga. Kui mulle hakkas meeldima paigutus, hakkas mulle silma, et võimaluste illustreerimise asemel on huvitavam teha illustratsioone tüübist välja: tõmmata jutumärke ja natuke 'infographic' stiilis fondi andmeid.

Ampersand üles ülaosa viimane puudutus oli tegelikult inspireeritud tüübi näidislehel FontFont saidil: seal on olemas glüfiks võetud proovivõtja, mis näitab kõiki üksteise peal asetsevate ampersandide kaalu. Algselt olin nad kõik ühte moodi virnastanud, koos silmuses animeerimisega - kuid see oli mõneti mõne brauseri jaoks, kes rakendas endiselt muutuvaid fonte ja võtmeraami animatsiooni. Kui tabasin kattuvat paigutust esituse / pausi valikuga, meeldis mulle see, kuidas nad välja nägid (eriti mobiilis). Niisiis libistasin selle ringi ja kui see hakkas staatiliselt muutuma, siis mängisin üks kord animatsiooni ja naasesin hajutatud / kihilise paigutuse juurde.

Kokkuvõttes olen tõesti rahul nii sisu kui ka kujundusega ning meeldib mulle, kuidas see erinevates ekraanisuurustes ka liigub ja areneb. Loodetavasti on see inspiratsiooniks ja juhendajaks ka teistele.

[Monotüüp pani mind hiljuti demonstreerimislehte kirjutama ja kujundama, et esitada klassikalise Erik Spiekermanni disainilahenduse FF Meta uus muutuva fondi väljalase. See on selle lehe tekst ja mõned visuaalid. Terve reaalajas leht on majutatud CodePenis ja manustatud ülaosas. See on kõigile avatud, nii et tehke julgelt ise koopia ja mängige seda. Näete ka nende tehnoloogia tutvustamist.]

Minu blogisse postitatud originaalsisu