Sådan bruges variable skrifttyper i den virkelige verden

Brug af variable skrifttyper i den virkelige verden viser sig at være vanskeligt. Dette indlæg forklarer, hvordan vi opnåede det med det nye Ampersand-websted, og hvad vi lærte undervejs.

Variable skrifttyper i aktion på Ampersand-webstedet

Denne artikel er blevet opdateret for at afspejle afventende afklaringer og ændringer til CSS-skrifttypemodulet niveau 4.

En variabel skrifttype er en enkelt fontfil, der opfører sig som flere stilarter. (Jeg skrev mere om dem her i et uddrag fra min bog om webtypografi). Der er masser af sider derude, der demonstrerer mulighederne for variabelt skrifttype og fontvariationsteknologi inden for, men til det nye Ampersand-konferencens websted ønskede jeg at vise variable skrifttyper, der bruger i en reel produktionssammenhæng. Det kan godt være det første kommercielle websted nogensinde til at gøre det.

For to måneder siden var browserstøtten til variable skrifttyper kun 7%, men fra i morges er supporten over 60%. Safari 11, Chrome 62+, Firefox 57+ og Edge 17+ understøtter alle variable skrifttyper (Firefox kun på en Mac, og hvis du indstiller de rigtige flag). Dette betyder, at skrifttypevariationer er en anvendelig teknologi lige nu. Men ikke al støtte er ens, som du kan se.

Software med variabel font, der allerede er, er allerede mere gennemgribende, end du måske tror. For eksempel understøtter de nyeste versioner af Photoshop og Illustrator dem, og hvis du bruger macOS 10.13+ eller iOS 11+, bruger systemtypen San Francisco skrifttypevariationer i vid udstrækning. Når det er sagt, er tilgængeligheden af ​​variable skrifttyper til brug på nettet ekstremt begrænset. I skrivende stund er der meget få kommercielle variable webfonter tilgængelige (Dunbar og Fit er bemærkelsesværdige undtagelser), men der er et voksende antal gratis og eksperimentelle variable webfonter, som vist på legepladsen Axis Praxis og for nylig er opført på Variable skrifttyper.

Fra denne begrænsede palet med skrifttyper valgte vi (som jeg mener Clearleft-designer James Gilyead) Mutator Sans til visningsteksten og Source Sans til kropsteksten i et Saul Bass-inspireret design. Begge skrifttyper gjorde det muligt for os at gøre brug af deres variabel vægtakse. De valgte skrifttyper kom nu til den vanskelige forretning i flere trin med at implementere variable skrifttyper på webstedet. Jeg vil tage dig igennem, hvordan vi (som jeg mener Clearleft-udvikler Mark Perkins) gjorde det ved hjælp af forenklede kodestykker.

1. Link til skrifttyperne

At få dine variable skrifttyper, der arbejder på en grundlæggende måde, er ret ligetil. På dette tidspunkt har Safari og Chrome den mest komplette support. Hvis du følger disse trin, har du brug for en af ​​disse browsere til at starte med.

Vi downloadede Font Sans-variabelskrifttypen fra sit hjem på Github og brugte @ font-face med et format af truetype-variationer til at linke det op til stilarket:

@ font-face {
  font-family: 'SourceSans';
  src: url ('source-sans-variable.ttf') format ('truetype');
}

Vi kunne derefter indstille variablen Source Sans-skrifttype som hovedskrifttype for siden på den sædvanlige måde:

html {
  font-family: 'SourceSans', sans-serif;
}

2. Indstil vægtene

Den variable fontimplementering i CSS er designet til at bruge eksisterende egenskaber til visse foruddefinerede variation akser. Vi bruger tre vægte i brødteksten: almindelig, halvkugle og sort. Vi indstiller fed skrift med font-vægt på den sædvanlige måde:

.hero {font-vægt: 900; }
.blurb {font-vægt: 600; }

Dette fungerer dog ikke som forventet uden at ændre @ font-face-reglen. Når du inkluderer en font-vægt-deskriptor i en @ font-face-regel, fortæller du browseren, at skrifttypen svarer til denne vægt og kun denne vægt. Når du udelader font-vægtdeskriptoren, behandler browseren reglen, som om du indstiller font-vægt: 400. Dette er tilfældet, uanset om din skrifttype er variabel med en vægtakse eller ikke - skrifttypen "klemmes" til en vægt på 400.

For at gøre brug af vægtaksen og for, at fontvægtegenskaberne fungerer som du kunne forvente, var vi nødt til at tilføje et fontvægtområde til @ font-face-reglen:

@ font-face {
  font-family: 'SourceSans';
  src: url ('source-sans-variable.ttf') format ('truetype');
  fontvægt: 1 999;
}

Fontvægtsområdet gør det muligt for variablen at blive vist ved en hvilken som helst vægt fra 1 til 999 (du kan angive et mere begrænset interval, hvis du vil). I den nærmeste fremtid vil CSS-skrifttyper, niveau 4-spec, give dig mulighed for at udelade områdebeskrivelsen, fordi standardværdien bliver en ny værdi af auto, hvilket muliggør det fulde interval af vægter, der er tilgængelige i variablen, og som standard til standard for statiske skrifttyper . (Det samme gælder for andre deskriptorer såsom font-stretch.)

Med variable skrifttyper behøver din vægt ikke være begrænset til intervaller på 100. Det kan være et hvilket som helst heltal i området 1–999. Til hovedoverskriften, der er sat i Mutator Sans, brugte vi subtile forskelle i vægt for hvert bogstav for at give en mere håndtegnet fornemmelse af designet:

b: nth-barn (1) {font-vægt: 300; }
b: nth-barn (2) {font-vægt: 250; }
b: nth-barn (3) {font-vægt: 275; }

3. Subset og opret en WOFF2

Source Sans-variabelskrifttypen er temmelig stor: TrueType-filen er 491 KB. Dette skyldes mest, at det har et kæmpe tegnsæt: næsten 2000 glyfer inklusive græske, kyrilliske, alternative tegn og symboler. Dit første skridt i at reducere filstørrelsen er at oprette en undergruppe af skrifttypen, så den ikke længere indeholder tegn, som du aldrig har brug for.

Vi besluttede at være ret konservative i det, vi holdt i, så vi underviste i at inkludere grundlæggende latin, latin-1 supplement og latin udvidet-A karakterintervaller; i alt omkring 400 karakterer, der dækker de fleste europæiske sprog. I Unicode-termer er disse U + 0020–007F, U + 00A0–00FF og U + 0100–017F.

Der er masser af online-værktøjer til indstilling af skrifttyper, f.eks. Fontsquirrel. Imidlertid striber alle de værktøjer, jeg har set, variationsdataene. Dette betyder, at du bliver nødt til at henvende dig til en kommandolinjetilgang. Vi underviste skrifttypen ved hjælp af open source pyftsubset, en komponent i fonttools (se Michael Herolds tutorial for mere info). Hvis Node er mere din ting, kan du i stedet bruge Glyphhanger.

Både Glyphhanger og fonttools (hvis du installerer Brotli-komprimering) udsender den underindstillede fil som en WOFF2. Vi har ikke brug for en regelmæssig WOFF, fordi alle browsere, der understøtter variabelt skrifttyper, også understøtter WOFF2.

At køre underindstillingsrutinen og konvertering til WOFF2 gav os en behageligt lille 29 KB fil. Vi opdaterede @ font-face-reglen i overensstemmelse hermed:

@ font-face {
  font-family: 'SourceSans';
  src: url ('source-sans-variable.woff2') format ('woff2');
}

Så det er det job, der udføres for browsere, der understøtter variabelt skrifttyper. Men det er næsten halvdelen af ​​historien.

4. Angiv skrifttyper til browsere, der ikke er i stand

Variable skrifttyper gengives på browsere, der ikke understøtter skrifttypevariationer, men du har tydeligvis ingen kontrol over, hvilken vægt (eller anden akse-forekomst), der vil blive brugt.

For at komme omkring dette, skal du servere ikke-variabel (enkeltstil) skrifttyper til disse browsere. I skrivende stund specificerer CSS-skrifttypemodulet niveau 4, at variable skrifttyper kan indikeres med en bestemt format () -værdi:

@ font-face {
   font-family: 'SourceSans';
   src: url ('source-sans-variable.woff2') format ('woff2-variationer');
 }

Dette giver dig mulighed for at oprette @ font-face regler som denne:

@ font-face {
  font-family: 'SourceSans';
  src: url ('source-sans-variable.woff2') format ('woff2-variationer'),
       url ('source-sans-regular.woff2') format ('woff2');
  fontvægt: 400;
}
@ font-face {
  font-family: 'SourceSans';
  src: url ('source-sans-variable.woff2') format ('woff2-variationer'),
       url ('source-sans-black.woff2') format ('woff2');
  fontvægt: 900;
}

Den foregående kode peger på enkeltfilstypefiler med en @ font-face-regel inklusive fontens vægt, som du normalt ville. Du kan derefter gentage en henvisning til filen med variabel font i hver regel. Browsere, der understøtter variable skrifttyper, vil downloade filen, der er markeret som format ('woff2-variationer') (kun én gang), og browsere, der ikke vil downloade den enkeltstil-font, der er markeret som format ('woff2').

Men. Kun Safari understøtter format ('woff2-variationer') (og den syntaks ændrer sig), som snarere redder tingene, hvis vi vil have, at de andre dygtige browsere får deres variabeltype. Så vi tyede til en anden, mere ordret taktik. For det første gav vi variabelskrifttypen et andet navn end skrifttypen med en enkelt stil, hvorved vi adskiller links til variable skrifttyper fra skrifttyper med enkelt stil:

@ font-face {
  font-family: 'SourceSansVariable';
  src: url ('source-sans-variable.woff2') format ('woff2');
  fontvægt: 1 999;
}
@ font-face {
  font-family: 'SourceSans';
  src: url ('source-sans-black.woff2') format ('woff2'),
         url ('source-sans-black.woff') format ('woff');
  fontvægt: 900;
}
@ font-face {
  font-family: 'SourceSans';
  src: url ('source-sans-semibold.woff2') format ('woff2'),
         url ('source-sans-semibold.woff') format ('woff');
  fontvægt: 600;
}

Vi skulle derefter skrive en @supports-regel for at sikre, at de rigtige skrifttyper gik til de rigtige browsere:

html {
  font-family: 'SourceSans' sans-serif;
}
@supports (font-variation-indstillinger: normal) {
  html {
    font-family: 'SourceSansVariable', sans-serif;
  }
}

I ovennævnte kode specificeres skrifttyper i enkelt stil som standard, men hvis en browser understøtter variable skrifttyper (det er en rimelig antagelse, der kan bedømmes ved hjælp af understøttelse af indstillinger for fontvariation), får den i stedet variablen font.

En sidste ting. Når du bruger et bælte- og seleremne, skal du eksplicit indstille fontvægten, hver gang du bruger variabler, selv når den ønskede vægt er 400 eller normal. Med en variabel font kan en browsers idé om standardvægten afvige lidt fra en anden. I vores testning gjorde Firefox standardteksten betydeligt lettere end Safari og Chrome, indtil vi gjorde dette:

html {
  font-family: 'SourceSans' sans-serif;
   fontvægt: 400;
}
@supports (font-variation-indstillinger: normal) {
  html {
    font-family: 'SourceSansVariable', sans-serif;
    font-variation-indstillinger: "wght" 400;
  }
}

Og det er det. Tjek, hvordan det kom sammen på Ampersand-webstedet, og glem ikke Ampersand er en konference dedikeret til typografi på nettet - hvis det er din ting, kan du tjekke det ud. Der vil være masser af diskussioner om variable skrifttyper og meget mere derudover. Dagen før konferencen kører jeg også et responsivt webtypografi-workshop.

Dette blev oprindeligt sendt på min egen side.