Variable fonter, forklart for designere

Variable fonter er fontfiler som inneholder et sammenhengende spenn av stiler i stedet for et fast sett. I stedet for egne filer for Regular, Medium, Semibold og Bold inneholder én variabel fil hver vekt mellom den letteste og den tyngste, og ofte andre spenn også, som bredde eller optisk størrelse. Du velger et hvilket som helst punkt langs hvert spenn, som kalles en akse, så en overskrift kan stå i vekt 680 og en bildetekst i 430 hvis det er det som leses best.

Formatet kom som en del av OpenType-spesifikasjonen i 2016 og støttes nå av alle de store nettleserne og de viktigste designverktøyene. Denne guiden dekker hva aksene gjør, når variable fonter er verdt å bruke, og hvordan du setter dem opp i CSS. For det større bildet av å velge skrift, se grunnleggende typografi og merkevarefonter.

Aksene i variable fonter og hva hver av dem gjør

En akse er en designdimensjon som skriftdesigneren har tegnet i ytterpunktene, og fonten interpolerer alt imellom. Fem akser er registrert i OpenType-spesifikasjonen og har standardkoder på fire bokstaver. Skriftdesignere kan legge til egne akser, som skrives med store bokstaver.

Egendefinerte akser er der fonter får personlighet. Roboto Flex har en grade-akse (GRAD) som endrer strekvekten uten å endre bokstavbredden. Fraunces har SOFT for rundere avslutninger og WONK for de mer egenrådige bokstavformene. Recursive har aksene MONO og CASL, som flytter den fra sans til monospace og fra lineær til uformell. Du kan utforske alle på Google Fonts, som lar deg filtrere på variable familier.

Hvorfor optisk størrelse betyr mest

Vekt får oppmerksomheten, men optisk størrelse er ofte den nyttigste aksen. Blysats ble skåret separat for hver størrelse: små størrelser hadde kraftigere streker, større x-høyde og løsere avstand, mens store størrelser var finere, med mer kontrast og tettere avstand. Digitale fonter mistet det da én kontur ble skalert til alle størrelser. En opsz-akse henter det tilbake.

Med font-optical-sizing: auto (standard i nettlesere) tilpasser en font med opsz-akse seg skriftstørrelsen du setter. Du trenger ikke gjøre noe annet enn å velge en font som har aksen. Det er særlig nyttig i design med en stor overskrift og liten støttetekst i én familie, altså de fleste innlegg til sosiale medier og landingssider.

Når variable fonter er verdt å bruke

Filstørrelsen er den ærlige avveiningen. En variabel fil bærer dataene for hver stil, så den er som regel større enn én statisk vekt, men mindre enn flere. Laster et nettsted bare Regular og Bold, kan to statiske filer godt være lettere. Laster det fire vekter og en kursiv, vinner som regel én variabel fil, og du får hver vekt imellom på kjøpet.

Mellomvekter er nyttigere enn de høres ut. Lys tekst på en mørk eller fargerik grunn ser tyngre ut enn samme vekt på hvitt, så du kan sette hvit tekst på en gradient i 460 i stedet for 500 for at den optisk skal matche en mørk-på-lys-versjon. Effekten er diskret, men det er den som får et typografisk system til å føles finstemt. Tekst på gradient forklarer det større lesbarhetsproblemet.

Slik bruker du variable fonter i CSS

Deklarer fonten én gang med et spenn for hver akse, og bruk deretter vanlige egenskaper som font-weight og font-stretch. Grip til font-variation-settings bare for egendefinerte akser, fordi den overstyrer alle akser på én gang og ikke arves på en vennlig måte. MDNs guide til variable fonter dekker detaljene.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

Sette opp et variabelt skriftsystem

1. 1

   Sjekk aksene

   Åpne prøvesiden til fonten og noter hver akse og spennet dens. Bekreft at språkene og tegnene du trenger, er med i den variable versjonen.

2. 2

   Definer roller, ikke vekter

   Bestem vekter per rolle: brødtekst, utheving, underoverskrift, overskrift, etikett. Et system med fem finstemte verdier slår ni standardverdier brukt på måfå.

3. 3

   Juster for grunnen

   Lag en litt lettere vekt for lys tekst på mørk grunn, og sjekk begge mot hverandre i ekte størrelse.

4. 4

   La optisk størrelse jobbe

   Behold font-optical-sizing: auto med mindre du har en grunn til å låse den, og sjekk overskrifter og bildetekster side om side.

5. 5

   Skriv det ned

   Noter fontfilen, aksespennene og verdiene for hver rolle i merkevarehåndboken, så ingen må bygge dem opp igjen etter hukommelsen.

Variable fonter belønner tilbakeholdenhet. Poenget er ikke å bruke hver verdi, men å velge de få nøyaktige som får skriften din til å leses godt overalt der den dukker opp, fra et avsnitt på 16 px til en displayoverskrift på 200 px.