Variable fonts er en af de mest markante nyskabelser i moderne skriftteknologi. I stedet for at hver vægt og bredde kræver sin egen fil, kan en enkelt variabel font rumme et helt kontinuerligt spektrum af variationer.

I denne artikel forklarer vi, hvad variable fonts egentlig er, hvordan deres akser fungerer, hvilke fordele de giver for både design og ydelse, hvordan det står til med browserstøtte, og hvordan du kommer i gang med at bruge dem i praksis. Teknologien lyder teknisk, men grundidéen er faktisk ganske enkel.

Hvad er en variable font?

Traditionelt er en skriftfamilie sammensat af mange separate filer: en til regular, en til bold, en til kursiv, en til light og så videre. Hver af disse er en selvstændig font med sin egen fil. Vil du bruge fem vægte på en hjemmeside, skal browseren hente fem filer.

En variable font gør noget fundamentalt anderledes. Den pakker et helt spektrum af variationer ind i én enkelt fil. I stedet for at gemme adskilte, færdige udgaver definerer den nogle ekstremer – for eksempel den tyndeste og den tykkeste vægt – og interpolerer så matematisk alle mellemliggende værdier. Det betyder, at du ikke er begrænset til de faste vægte som light, regular og bold, men kan vælge en hvilken som helst værdi derimellem, for eksempel en vægt på 437.

Teknologien blev introduceret som en udvidelse til OpenType-formatet og er i dag en veletableret del af skriftlandskabet. Den passer godt ind i den bredere forståelse af skriftteknologi, som vi tegner i den komplette guide til typografi.

Akserne: designets skydeknapper

Kernen i en variable font er begrebet akser (axes). En akse er en dimension, langs hvilken skriften kan varieres kontinuerligt. Man kan forestille sig hver akse som en skydeknap, du kan trække frem og tilbage for at ændre bogstavernes udseende. En variable font kan have en enkelt akse eller flere, der kan kombineres frit.

Der findes fem registrerede standardakser, som har faste navne og firebogstavskoder, samt mulighed for skræddersyede akser defineret af den enkelte skriftdesigner. De registrerede akser er de mest udbredte og understøttes bredt.

Vægt (Weight)

Vægtaksen, med koden wght, styrer stregtykkelsen fra tynd til tyk. Det er den mest anvendte akse og svarer til det, vi kender som light, regular, bold og så videre – blot i en kontinuerlig skala i stedet for faste trin. I CSS styres den typisk gennem font-weight-egenskaben.

Bredde (Width)

Breddeaksen (wdth) justerer, hvor brede eller smalle bogstaverne er, fra kondenseret til udvidet. Det er nyttigt, når tekst skal passes ind i et bestemt rum, eller når man vil skabe visuel variation. En smallere bredde kan spare plads i overskrifter, mens en bredere kan give et mere åbent, monumentalt udtryk.

Optisk størrelse (Optical Size)

Den optiske akse (opsz) er særligt elegant. Den justerer bogstavformerne, så de fungerer optimalt ved forskellige størrelser. Ved små størrelser gøres bogstaverne typisk lidt kraftigere med større x-højde og mere åbne former for læsbarhedens skyld, mens de ved store størrelser kan have finere detaljer og skarpere kontrast. Dette efterligner en praksis fra blysatsens tid, hvor skrifter blev tegnet individuelt til hver størrelse.

Hældning og kursiv (Slant og Italic)

Hældningsaksen (slnt) hælder bogstaverne, typisk til en oprejst eller skråtstillet position, mens italic-aksen (ital) skifter mellem opret og en egentlig kursiv med anderledes bogstavformer. De to er beslægtede, men ikke identiske: en ægte kursiv er ikke bare en hældet udgave af den oprette skrift, men har ofte helt andre bogstavformer.

Fordele ved variable fonts

Den mest håndgribelige fordel er ydelse. Hvor du før skulle hente en separat fil for hver vægt og stil, kan en enkelt variabel fontfil dække hele spektret. Selvom den variable fil er større end en enkelt statisk font, er den ofte betydeligt mindre end summen af de mange statiske filer, den erstatter. Det reducerer antallet af netværksforespørgsler og kan gøre en hjemmeside hurtigere – en central overvejelse, når man skal vælge skrifttype til hjemmesider.

Den anden store fordel er fleksibilitet i designet. Med den kontinuerlige adgang til alle mellemværdier kan du finjustere typografien præcist, som du ønsker, i stedet for at nøjes med de få faste snit, en skriftfamilie tilbyder. Det åbner også for dynamiske og responsive effekter, hvor teksten kan tilpasse sig skærmstørrelse, brugerens præferencer eller endda animeres jævnt fra en tilstand til en anden.

Endelig giver variable fonts nye kreative muligheder. Animerede overskrifter, hvor vægten øges, eller finmasket kontrol over den optiske størrelse på tværs af et layout, var tidligere besværligt eller umuligt og er nu inden for rækkevidde.

Named instances

Selvom en variabel font teoretisk giver adgang til uendeligt mange mellemværdier, definerer skriftdesigneren ofte en række named instances – navngivne forudindstillinger, der svarer til de klassiske snit som Light, Regular, Bold eller Condensed. Disse gør det nemt at bruge den variable font på traditionel vis, hvis du blot ønsker de velkendte vægte, uden at skulle angive numeriske akseværdier. Named instances er også det, mange programmer viser i deres skriftmenu, så en variabel font kan optræde med flere valgmuligheder, selvom den fysisk er én enkelt fil.

Browserstøtte

Variable fonts nyder i dag bred understøttelse i alle moderne browsere. Både de førende desktop- og mobilbrowsere gengiver variable fonts og deres akser korrekt, så teknologien kan bruges i produktion uden væsentlige forbehold. For ældre eller meget specielle miljøer kan man som altid definere en fallback, men i praksis er dette sjældent et problem længere.

Bemærk dog, at graden af kontrol via CSS kan variere en smule. De registrerede akser som vægt og bredde er godt understøttet via velkendte CSS-egenskaber, mens man tilgår mere specielle eller skræddersyede akser gennem den lavniveau-egenskab, der hedder font-variation-settings.

Fordi variable fonts bygger videre på det etablerede OpenType-format, behandler ældre systemer, der ikke forstår variationerne, typisk fonten som en almindelig statisk skrift i dens standardtilstand. Det betyder, at teksten stadig vises korrekt – blot uden adgang til det variable spektrum. I praksis er dette en robust form for graceful degradation, som gør det trygt at tage teknologien i brug uden at frygte, at indholdet bliver ulæseligt for nogen.

Sådan bruger du variable fonts i praksis

Rent teknisk indlejrer du en variabel font på en hjemmeside stort set som en almindelig webfont via @font-face, blot peger du på den variable fontfil. Du kan derefter styre akserne på to måder. De registrerede akser kan ofte styres gennem de velkendte CSS-egenskaber: font-weight til vægt, font-stretch til bredde og font-style til hældning.

Til finere kontrol og til skræddersyede akser bruger du egenskaben font-variation-settings, hvor du angiver aksens firebogstavskode og en værdi, for eksempel vægtkoden efterfulgt af den ønskede talværdi. Denne metode giver dig direkte adgang til hele registret af akser, som skriftdesigneren har inkluderet.

Når du vælger en variabel font, så tjek altid, hvilke akser den faktisk indeholder – ikke alle variable fonts har alle akser, og nogle har kun en enkelt vægtakse. Og for danske projekter gælder som altid: kontroller, at skriften gengiver æ, ø og å korrekt i hele det variable spektrum. Nogle akser, især optisk størrelse, kan påvirke, hvordan disse tegn ser ud. Læs mere om de særlige danske hensyn i artiklen om æøå-problemer og løsninger.

Husk licensen

En variabel font er stadig et licenseret softwareprodukt, og det er vigtigt at sikre sig, at licensen dækker den måde, du vil bruge den på – herunder til webbrug. Nogle udbydere behandler den variable udgave som et selvstændigt produkt. Du kan læse mere om, hvordan du navigerer i licensforholdene, i vores guide til licensering af skrifttyper.

Kom godt i gang

Variable fonts er ikke længere en eksotisk nyhed, men et modent og praktisk værktøj, der både kan forbedre ydelsen og udvide dine designmuligheder. Vil du prøve dem af, så start med at finde en variabel font, hvis akser passer til dit projekt, og eksperimentér med at trække i vægt- og breddeaksen for at fornemme spændvidden.

Byg din typografi op med et gennemtænkt hierarki, udnyt den kontinuerlige vægtkontrol til at skabe fine forskelle mellem overskrifter og brødtekst, og glem ikke at teste ydelsen og de danske tegn. Med variable fonts får du mere fleksibilitet i én fil – og ofte en hurtigere side i købet.