Variabla typsnitt förklarade för designers

Variabla typsnitt är typsnittsfiler som rymmer ett kontinuerligt spann av stilar i stället för en fast uppsättning. I stället för separata filer för Regular, Medium, Semibold och Bold innehåller en variabel fil varje vikt mellan den ljusaste och den tyngsta, och ofta andra spann också, till exempel bredd eller optisk storlek. Du väljer valfri punkt längs varje spann, kallat en axel, så att en rubrik kan ligga på vikt 680 och en bildtext på 430 om det är det som läses bäst.

Formatet kom som en del av OpenType-specifikationen 2016 och stöds nu av alla större webbläsare och de viktigaste designverktygen. Den här guiden går igenom vad axlarna gör, när variabla typsnitt är värda att använda och hur du sätter upp dem i CSS. För helheten kring att välja typsnitt, se typografins grunder och varumärkestypsnitt.

Axlar i variabla typsnitt och vad var och en gör

En axel är en designdimension som typsnittsformgivaren har ritat i sina ytterlägen, och typsnittet interpolerar allt däremellan. Fem axlar är registrerade i OpenType-specifikationen och har standardiserade taggar på fyra bokstäver. Formgivare kan lägga till egna axlar, som skrivs med versaler.

Egna axlar är där typsnitt får personlighet. Roboto Flex har en grade-axel (GRAD) som ändrar linjetjockleken utan att bokstavsbredden ändras. Fraunces har SOFT för rundare ändar och WONK för sina mer egensinniga bokstavsformer. Recursive har axlarna MONO och CASL som flyttar det från sans till monospace och från linjärt till ledigt. Du kan utforska dem alla på Google Fonts, där du kan filtrera på variabla familjer.

Varför optisk storlek spelar störst roll

Vikten får uppmärksamheten, men optisk storlek är ofta den mest användbara axeln. Blytyper skars separat för varje storlek: små storlekar hade kraftigare linjer, större x-höjd och luftigare avstånd, stora storlekar var finare, med mer kontrast och tätare avstånd. Digitala typsnitt förlorade det när en enda kontur skalades till alla storlekar. En opsz-axel ger tillbaka det.

Med font-optical-sizing: auto (standard i webbläsare) justerar sig ett typsnitt med en opsz-axel efter den teckenstorlek du sätter. Du behöver inte göra något annat än att välja ett typsnitt som har axeln. Det är särskilt användbart i designer med en stor rubrik och liten stödtext i en familj, vilket gäller de flesta sociala inlägg och landningssidor.

När variabla typsnitt är värda att använda

Filstorleken är den ärliga kompromissen. En variabel fil bär data för varje stil, så den är oftast större än en statisk vikt men mindre än flera. Om en webbplats bara laddar Regular och Bold kan två statiska filer mycket väl vara lättare. Laddar den fyra vikter och en kursiv vinner oftast en variabel fil, och du får varje vikt däremellan på köpet.

Mellanvikter är mer användbara än de låter. Ljus text på mörk eller färgstark botten ser tyngre ut än samma vikt på vitt, så du kan sätta vit text på en gradient i 460 i stället för 500 för att optiskt matcha en version med mörk text på ljus botten. Effekten är subtil, men det är den som får ett typografiskt system att kännas trimmat. Text på gradient förklarar det bredare läsbarhetsproblemet.

Så använder du variabla typsnitt i CSS

Deklarera typsnittet en gång med ett spann för varje axel, och använd sedan vanliga egenskaper som font-weight och font-stretch. Ta bara till font-variation-settings för egna axlar, eftersom den skriver över alla axlar på en gång och inte ärvs på ett smidigt sätt. MDN:s guide till variabla typsnitt går igenom detaljerna.

@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;
}

Så sätter du upp ett variabelt typsystem

1. 1

   Kontrollera axlarna

   Öppna typsnittets presentationssida och notera varje axel och dess spann. Bekräfta att de språk och tecken du behöver ingår i den variabla versionen.

2. 2

   Definiera roller, inte vikter

   Bestäm vikter per roll: brödtext, betoning, underrubrik, rubrik, etikett. Ett system med fem trimmade värden slår nio standardvärden som används på måfå.

3. 3

   Trimma för bottnar

   Skapa en något lättare vikt för ljus text på mörk botten och jämför båda med varandra i verklig storlek.

4. 4

   Låt optisk storlek göra sitt

   Behåll font-optical-sizing: auto om du inte har en anledning att låsa den, och jämför rubriker och bildtexter sida vid sida.

5. 5

   Skriv ner det

   Anteckna typsnittsfilen, axelspannen och varje rolls värden i din varumärkesmanual, så att ingen behöver bygga om dem ur minnet.

Variabla typsnitt belönar återhållsamhet. Poängen är inte att använda varje värde, utan att välja de få exakta som får din text att läsas bra överallt där den syns, från ett stycke på 16 px till en displayrubrik på 200 px.