Variable fonts – fremtiden for den optiske typografi 16 min.

Optisk regulering af typografi er ikke komplet nye toner i typografiens historie, men måden du nu kan anvende variable fonts er alligevel en lille revolution. I dette blogindlæg fortæller jeg kort om hvad variable fonts er for en størrelse og hvad du kan bruge det til i dit arbejde med grafisk design.

Hvad er variable fonts?

De klassiske ikke-variable fonte er statiske fonte, som du kan vælge, men kun snit for snit, typisk som regular, bold, black, oblique osv. Det kender vi alt til.

Men Variable fonts er et relativt nyt Open Type format. Med bare én eller få variable font files kan du variere dit typografiske udtryk på mange måder. Det plejer man at skulle have mange fonte i en font family for at kunne gøre.

Du kan fx variere dit typografiske udtryk inden for bl.a. akserne:

• weight (vægt)
• width (bredde)
• slant (hældning)

Hvis du har en opdateret version af Adobe Illustrator, kan du teste det med fonten Acumin:

Her kombineres weight og width:

Her kombineres alle tre akser: weight, width og slant:

Slant (hældning) er ikke det samme som en ægte italic/kursiv. Herunder ses fx to skriftsnit i fonten Portada, hvor en af dem netop er en ægte italic. Både regular og italic kan varieres fra det fineste (thin) til det kraftigste (black) i både stamme (den vertikale grundstreg), diverse andre (hår)streger og ved seriffer (“fødderne” på serif fonte):

Det er ret vildt at der er så mange muligheder med kun to snit! Du skal jo huske, at man traditionelt skal bruge rigtig mange fonte/skriftsnit for at have mange variationer af én fontfamilie – se bare eksemplet her med Helvetica Neue, der har 109 snit!

Men det er ikke det vildeste ved variable fonts, for se nu bare her:

Der er ikke kun næsten uendeligt detaljerede præferencer for din indstilling af optiske størrelse på seriffer, streger og stammer, men også for selve designet af en font. Se fx her hvordan øret i “g” (“pinden” til højre i den øverste cirkel) i fonten Portada i dette eksempel flytter sig rundt i de variable former:

Det er her “magien” sker ved variable fonts!

Ja, det er ret vildt.

Historisk brug af optisk regulering i typografi

Optisk regulering kan betyde flere ting som typografisk begreb. Det betyder ikke kun selve designet på fonten/skrifttypen. Det kan fx også betyde den måde man arbejder med fx afstande mellem linjer, mellem tegnene og den måde man optisk justerer typografi i et layout, som det bl.a. kan ses her på en side i Charles Moegreens Lærebog i typografi fra 1958:

Jeg afgrænser dog i denne sammenhæng optisk regulering af typografi til kun at handle om selve designet af fonten og deraf de muligheder det giver for grafisk design, da emnet her specifikt er variable fonts.

Variationer af fontes snit og hvor kraftige, de skal fremstå, er således ikke noget nyt historisk set. Før variable fonts havde man allerede nede i 1990erne arbejdet med formatet multiple master fonts (MM fonts). I dette udsnit fra et af mine ældre “Adobe Type Products” kataloger kan MM font-teknologien ses demonstreret.

Optisk typografi var og er især velegnet til kontraster i skriftbilledet og til at sørge for store overskrifter får sit eget knap så voldsomme udtryk som hvis det bare var sat med en forstørret regular font (som jeg viser eksempel på senere). Det skal også sikre læsbarhed i f.eks. meget lille skrift via et særligt design af små skrifter. I mange hundrede år før MM fonts havde tidligere tiders gamle sættekasser på trykkerierne mange variationer til dette formål, som det ses her med fonten Bodoni:

Bodoni Six kan virke lidt grov i denne størrelse, men den er yderst læsevenlig til meget små størrelser på grund af sin bredde, sin store x-højde (i forhold til versalernes højde) og med sine kraftige stammer og seriffer. På denne måde havde man altid optiske og praktiske, særligt designede størrelser til fx avisspalter, fodnoter, paperbacks og telefonbøger.

Til trykte telefonbøger, der ofte havde meget små skriftstørrelser, lavede man endda specialiserede fonte, der fik såkaldte ink traps, så tryksværten, der altid vil brede sig lidt på papiret (kaldet punktbredde) ikke “splatter” for meget og ødelægger skriften på papiret.

Optisk regulering af skrifttyper fandt også vej til den digitale æra, dels som nævnt via MM fonts, men også i en variation af snit inden for skriftfamilier, som fx det ses her med Warnock Pro:

Kort sagt: den gode typograf-slash-designer vidste altså besked om typografiske regler for optisk design. Den moderne designer ved i vore dage også hvilke optiske snit der skal bruges til en bestemt størrelse til gavn for læsbarhed og typografisk æstetik (læs evt. mere om dette emne i et af mine andre blogindlæg) – og bare lige for at slå én ting fast: det der med bare manuelt at strække en font i procent, dét dur ikke!

Variable fonts kan mere end at “brede sig” i størrelser

Med variable fonts er det slut med udelukkende afgrænsede valg af statiske snit. Nu er der kommet en dynamisk, flydende rækkevidde og stil!

Det er altså ikke kun få akser (fx bredde/højde), variable fonts er bundet af. Se bare dette eksempel på v-fonts.com med fonten “Plastic”:

Som du kan se er det ikke alene bredde og vægt, der kan justeres, men også selve designet – se bare hvordan seriferne vokser frem alt efter hvilke indstillinger, der laves. Skulle lignende statiske indstillinger være mulige uden variable fonts i din font menu i f.eks. InDesign, ville det få de 65 statiske skriftsnit hos Minion til at blegne i antal!

Det vil også sige, at variable fonts også kan laves med indstillinger for farver, for skygger i baggrunden og meget mere!

Mathieu Triay siger det rammende således i sin blog:

“Because you don’t store the middle states but only the extreme ones, you save a lot of space. Variable fonts have a fixed weight cost, so if you’re using more than two weights from the same typeface, a variable font version with two masters might be able to save you quite a few kilobytes. You’re essentially getting all the intermediate weights with the same constant file size.” (Kilde)

Og se lige her – med variable fonts kan du ændre hattens højde på Mr Poo!

Det er jo dét verden har brug for ;D

Men spøg til side, så viser eksemplet med Mr. Poo jo tydeligt, at der vil komme mange websites i fremtiden, der vil kunne arbejde med ikke kun flydende responsiv typografi via variable fonts, men også med mere typografisk animation – og det endda uden at browseren indlæser mere end få skriftsnit!

Eksempler på brug af variable fonts i typografisk design

Jeg vil vise eksempler på brug af variable fonts via lidt enkel css-kode og ved at vise det i grafisk design af en plakat. Først lidt om webdesign.

Webdesign

Start med at finde den variable font, du skal bruge. Du kan se og teste mange variable fonts på v-fonts.com. Der er også mange gratis variable fonts derude, som fx Secuela eller Gingham her. De fleste almindelige browsere kan anvende variable fonts, men tjek progressionen på implementeringen ud.

Modsat statiske fonte, hvis snit man jo kan lære at kende gennem hyppig brug (bold, semibold osv.), så er det ikke lige sådan at man med det samme kan se for sig hvilke værdier man skal bruge, når man pludselig har hundredevis af valg. Det skal ses visuelt, før man kan bruge værdien i koden. Her kommer wakamaifondue.com til hjælp, så du visuelt kan skrue på værdierne.

De af jer, der i forvejen er meget gode til webdesign, kan sagtens implementere det i jeres kode med @font-face regler mm. (NB: jeg er ikke ekspert i css!) Læs mere i detaljer om css implementeringen her.

Er du bekendt med HTML og CSS kan du lege med det i koden her.

Grafisk design i øvrigt (det, der ikke kun er digitalt)

Jeg vil i det følgende vise et eksempel på brug af variable fonts i et design af en plakat (A3 mål). Lige allerførst: Da dette blogindlæg først blev skrevet var variable fonts endnu ikke implementeret i InDesign, men er siden blevet det i InDesign 2020. Så for eksemplets skyld viser jeg her nogle muligheder via Illustrator.

Jeg anvender den samme font i de to eksempler på plakatdesign – Minion – men i to versioner: først med statiske snit (Minion Pro), dernæst med en variable font version (Minion Variable Concept) .

Lad os komme i gang 🙂

Lidt om baggrunden for designet: Jeg laver her en typografisk plakat ved at bruge en del af omkvædet til sangen “Gå med i lunden” (af Müller/Normann Andersen) fra den gamle danske film Odds 777 fra 1932 med Liva Weel i hovedrollen. Jeg holder med vilje baggrunden i hvidt af hensyn til at du skal kunne se fontens detaljer helt rent.

Plakaten er komponeret efter de vertikale grids, der er primært ved fontens vertikale stammer og dermed ved at arbejde med layoutet optisk-typografisk:

Se f.eks. vertikale grid ved først “n” i “lunden”, danner venstre kant og stammebredde med “n” i “sang” og “k” i “kær”. Den venstrestillede mindre tekst står mod den store tekst via første stamme i “u” og delvist sammen med “l” i “lighed”, selvom det ikke er matematisk præcision, det handler om her. “d” i “lunden” danner venstre optisk kant med “g” i “sang”, “æ” i “kærlighed” og “h” i “lighed”. Der er mange andre detaljer i designet og det kunne selvfølgelig gøres på flere kreative måder og variationer end dette.

Den statiske font, jeg har anvendt her, er Minion Pro: den mindre del af teksten er sat med snittet Italic for at stå kontrastmæssigt afbalanceret mod den store del af teksten, der er sat med snittet Display. Display har meget fine – måske for fine i dette tilfælde – seriffer samt generelt tydelig kontrast i sit skriftdesign. Bare som eksperiment kan du se her hvordan det ville se ud, hvis jeg bare tankeløst brugte Regular i stedet for Display til de store tekstdele:

Det ser ret klodset ud! For Regular er jo skabt til læse-tekst i mindre størrelse.

Jeg kunne selvfølgelig også gå efter at bruge andre snit til de store tekstdele, som f.eks. Subhead. Det skal man eksperimentere med, især når man bruger farvet skrift, for så sker der også noget med perceptionen af størrelsesforhold og kontraster i forhold til sort skrift og de andre dele i ens layout.

Nu vil jeg redesigne plakaten ved at bruge variable font-versionen af Minion. Det kommer til at se sådan her ud:

Det kan jeg bedre lide! Det er ikke fordi jeg er utilfreds med min første plakat, dvs. med brugen af de statiske snit, absolut ikke. Men i dette tilfælde har jeg selv kunnet skrue – bogstavelig talt – på nogle knapper i “weight” og “optical size” i Illustrator, og det har skabt flere fordele for det typografiske design, som jeg ser det:

• Som nævnt er der optiske og perceptionsmæssige effekter ved at give en skrift en farve. I min første version havde serifferne på den store skriftdel en tendens til at blive en smule for tynde, ja, for “sarte” (synes jeg, basta-bum). Det er der nu rådet bod på ved at jeg har tweaket en smule på dem. Det samme gælder de finere hårstreger, ligesom der også skabt en lidt bredere stamme. Bemærk også at der er mere styrke i prikken over “i” end ved den statiske Display option.

• Den mindre italic skrift er reguleret så den har lidt af de gode kontraster, som der er i den store skriftdel, med god styrke, men samtidig har jeg justeret den så den er knap så bred, hvilket en italic sagtens kan bære i dette tilfælde, hvor skriften trods alt ikke er meget lille. Desværre havde mit “G” i “Gå” ikke en swash i sin variable font option, dvs. en lille klassisk skriveskrift-agtig “krølle” på sig, som du kan se i det første design, men det må jeg jo leve med 😉

Her er kan se nogle af detaljerne i forskellene på designet:

Det er da klart også et spørgsmål om temperament og stil i arbejdet med variable fonts, som i alt med design. Men der er ingen tvivl om, at teknologien har mulighederne for at kunne revolutionere optisk typografi og grafisk design som helhed – på alle platforme.