Kintamieji šriftai produkcijoje: kompromisai, apie kuriuos niekas nepasakoja

Kintamieji šriftai nėra stebuklingas šriftų suspaudimas

Kintamieji šriftai dažnai pristatomi kaip tvarkingas atsakymas į žiniatinklio tipografiją: vienas failas, daug storių, mažiau užklausų, sklandesnės dizaino sistemos. Tokia mintis iš esmės teisinga, bet neišsami.

Produkcijoje kintamasis šriftas mažiau primena šešių failų pakeitimą vienu, o labiau — naujos tipografijos vykdymo aplinkos įsidiegimą. Gaunate išraiškingą storio, pločio, pasvirimo, optinio dydžio ir kartais pasirinktinių ašių kontrolę. Kartu paveldite naujus sprendimus dėl failo dydžio, naršyklės atvaizdavimo, atsarginių šriftų elgsenos, dizaino valdymo ir našumo matavimo.

Rezultatas gali būti puikus. Jis taip pat gali būti blogesnis nei statinė sąranka, kurią pakeitė.

Jei dabartinė jūsų svetainė siunčia penkis tos pačios šeimos storius, gerai apribotas kintamasis šriftas gali sumažinti užklausų skaičių ir supaprastinti CSS. Jei jūsų svetainė siunčia vieną įprastą storį ir vieną paryškintą storį, kintamasis šriftas gali pridėti baitų už lankstumą, iš kurio nė vienas naudotojas niekada negaus naudos. Būtent šio produkcijos kompromiso žmonės dažnai nepamini.

Platesniam šriftų įkėlimo strategijos pagrindui naudingas papildomas mūsų gidas apie tai, kodėl web fonts are still the easiest performance win on most sites. Kintamieji šriftai nekeičia pagrindų: siųskite mažiau baitų, mažinkite atvaizdavimo delsą ir pasirūpinkite, kad atsarginis tekstas būtų priimtinas.

Akivaizdus privalumas: mažiau failų, išraiškingesnis šriftas

Tradicinė statinių šriftų sąranka paprastai atrodo taip:

• Regular 400
• Italic 400
• Medium 500
• Semibold 600
• Bold 700
• Galbūt atskiras display šriftas

Kiekvienas failas atsisiunčiamas, podėliuojamas ir atvaizduojamas atskirai. Jei puslapis pirmame ekrane naudoja kelis storius, užklausos greitai kaupiasi.

Kintamasis šriftas gali sutraukti kelis iš tų storių į vieną failą. Užuot įkėlę Inter-Regular.woff2, Inter-Medium.woff2 ir Inter-Bold.woff2, įkeliate vieną kintamąjį failą ir naudojate font-weight: 400 700 per ištisinį diapazoną.

Tai suteikia realių privalumų:

• Mažiau šriftų failų, kuriuos reikia valdyti
• Nuoseklesnė interpoliacija tarp storių
• Smulkiai valdoma responsyvioji tipografija
• Lengvesnės temų sistemos
• Geresnis suderinimas su dizaino žetonais

Dizaino sistemoms tokia kontrolė ypač naudinga. Mygtuko etiketė gali naudoti 580, užuot buvusi priversta rinktis 500 arba 600. Siauros kortelės antraštė gali naudoti šiek tiek suspaustą pločio ašį, jei šriftas ją palaiko. Didelė antraštė gali naudoti optinį dydį, kai jis prieinamas.

Tačiau vien tai, kad tokios valdymo galimybės egzistuoja, nereiškia, kad turėtumėte naudoti jas visas.

Pirmas paslėptas kompromisas: vienas failas gali būti didesnis nei failai, kurių iš tikrųjų reikia

Kintamasis šriftas turi interpoliacijos duomenis dizaino erdvei. Ta dizaino erdvė turi kainą. Vienas kintamojo šrifto failas gali būti didesnis nei vienas ar du statinių šriftų failai.

Tai nėra problema, kai jis pakeičia daug failų. Tai tampa problema, kai jis pakeičia santūrų rinkinį.

Apsvarstykite du dažnus atvejus:

A atvejis: rinkodaros svetainė su daug storių

Svetainė puslapiuose naudoja 300, 400, 500, 600, 700 ir italic. Kruopščiai apribotas kintamasis šriftas tikriausiai padės. Jis sumažins užklausų pridėtines sąnaudas ir supaprastins būsimą priežiūrą.

B atvejis: produkto programa tik su regular ir bold

Sąsaja naudoja 400 ir 700, o kaip atsarginius — sistemos šriftus. Kintamasis šriftas gali pridėti nereikalingų baitų. Lankstumas malonus Figma aplinkoje, bet naršyklėje jis ne visada naudingas.

Klaida yra lyginti „vieną kintamąjį failą“ su „daug teorinių statinių failų“, o ne su failais, kuriuos jūsų realūs puslapiai šiuo metu iš tiesų naudoja.

Išmatuokite faktinius šriftų baitus, įkeliamus pagrindiniuose šablonuose. Tada išbandykite kintamąją versiją su tuo pačiu simbolių poaibiu ir ta pačia išankstinio įkėlimo strategija. Nemanykite, kad kintamoji versija laimi savaime.

Antras kompromisas: poaibių sudarymas tampa svarbesnis, ne mažiau svarbus

Kintamieji šriftai poaibių sudarymą daro vertingesnį, nes baziniame faile gali būti daug kas: glifai, kalbų palaikymas, OpenType funkcijos, kelios ašys ir metaduomenys.

Daugumai produkcinių svetainių nereikia kiekvieno šrifto glifo. Jei aptarnaujate tik anglų kalbą, jums tikriausiai nereikia visos paneuropinės aprėpties, kirilicos, graikų, vietnamiečių ir kiekvieno simbolių bloko. Jei aptarnaujate kelias kalbas, vis tiek galite norėti kalbai skirtų poaibių, o ne vieno universalaus failo.

Praktinis metodas paprastai yra toks:

1. Daugumai naudotojų laikykite pagrindinį lotynišką poaibį.
2. Išplėstinius poaibius pridėkite tik ten, kur jų reikia turiniui.
3. Naudokite unicode-range, kad naršyklė galėtų pasirinkti tinkamą failą.
4. Jei reikia, retiems raštams palikite statinius atsarginius šriftus.

Čia kintamieji šriftai gali tapti nepatogūs. Kai kurios šriftų apdorojimo grandinės lengvai sudaro statinių šriftų poaibius, bet netinkamai tvarko kintamąsias ašis, hinting arba metaduomenis. Visada patikrinkite, ar išvesties šriftas vis dar teisingai veikia visame ašių diapazone, kurį planuojate naudoti.

Sugadintas poaibis yra blogiau nei didelis šriftas. Jis genda tyliai: keistas atvaizdavimas, trūkstami glifai, nenuoseklūs storiai arba maketo pokyčiai, kurie pasirodo tik konkrečioje lokalėje.

Trečias kompromisas: CSS gali tapti per gudrus

Kintamieji šriftai ašis atveria per CSS. Standartinės ašys, tokios kaip storis ir plotis, tvarkingai susiejamos su tokiomis savybėmis kaip font-weight ir font-stretch. Pasirinktinės ašys dažnai naudoja font-variation-settings.

Ši galia vilioja komandas gudrauti:

.card-title {
  font-variation-settings: "wght" 623, "wdth" 92;
}

Tai gali būti techniškai teisinga, bet retai yra gera dizaino sistemos sąsaja. Atsitiktinės ašių reikšmės, išsibarsčiusios po CSS, yra sunkiai peržiūrimos, sunkiai pertvarkomos ir lengvai panaudojamos netinkamai.

Verčiau rinkitės dizaino žetonus arba įvardytas pagalbines klases:

:root {
  --font-weight-body: 400;
  --font-weight-heading: 680;
  --font-width-compact: 94;
}

.card-title {
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-compact);
}

Kur įmanoma, naudokite standartines CSS savybes. font-variation-settings palikite ašims, kurios neturi aukštesnio lygio savybės.

Taip pat atsargiai elkitės su animacija. Storio ar pločio animavimas mažomis dozėmis gali būti skoninga, bet jis taip pat gali sukelti maketo perskaičiavimą, vizualinį nestabilumą ir nereikalingą darbą mažos galios įrenginiuose. Tipografija neturėtų tapti judesio žaidimų aikštele vien todėl, kad šriftas tai leidžia.

Ketvirtas kompromisas: atvaizdavimo skirtumai vis dar egzistuoja

Šiuolaikinių naršyklių kintamųjų šriftų palaikymas yra stiprus, bet atvaizdavimas nėra visur identiškas. Operacinės sistemos teksto rasterizatoriai, naršyklių varikliai, glodinimas ir šriftų hinting veikia rezultatą.

Kintamojo šrifto 500 storis gali atrodyti ne visai taip pat kaip tos pačios šeimos statinis 500 failas. Kai kuriose šeimose statiniai egzemplioriai derinami rankiniu būdu, o interpoliuoti kintamieji egzemplioriai sugeneruojami matematiškai. Mažuose dydžiuose šis skirtumas gali būti svarbus.

Tai ypač aktualu pagrindiniam tekstui, navigacijai, tankioms lentelėms ir UI etiketėms. Kuo daugiau teksto turi jūsų sąsaja, tuo labiau turėtumėte testuoti realias skaitymo sąlygas, o ne tik hero tipografiją.

Jei pereidami prie kintamųjų šriftų kartu peržiūrite savo šriftų sistemą, pradėkite nuo įskaitomumo, o ne nuo naujumo. Mūsų practical guide to readable type on the modern web aptaria neglamūrinius pasirinkimus — eilutės ilgį, dydį, kontrastą, tarpus — kurie paprastai svarbesni nei 1 000 prieinamų šrifto storių.

Penktas kompromisas: podėliavimas gali veikti į abi puses

Vienas kintamojo šrifto failas gali būti kartą įdėtas į podėlį ir pakartotinai naudojamas puslapiuose. Tai gerai.

Tačiau jei failas didelis ir blokuoja atvaizdavimą, pirmieji apsilankymai visą kainą sumoka iš anksto. Statinius šriftus kartais galima įkelti selektyviau: pirmiausia regular pagrindiniam tekstui, bold vėliau, display tik puslapiuose, kuriems jo reikia.

Universalaus atsakymo nėra. Tinkama sąranka priklauso nuo srauto modelių:

• Ar naudotojai per sesiją aplanko daug puslapių? Bendras kintamasis failas gali atsipirkti.
• Ar naudotojai patenka į vieną straipsnį ir išeina? Mažesni statiniai failai gali būti geresni.
• Ar pagrindiniam puslapiui reikia tik vieno storio? Neiš anksto neįkelkite didelės dizaino erdvės būsimiems puslapiams.
• Ar programa yra už prisijungimo sienos ir turi dažnų pakartotinių apsilankymų? Podėlio pakartotinis naudojimas tampa vertingesnis.

Išankstiniam įkėlimui taip pat reikia santūrumo. Iš anksto įkelkite šriftą, reikalingą tekstui pirmame ekrane, o ne kiekvieną įmanomą šriftą. Išankstinis įkėlimas yra prioriteto pareiškimas. Per daug prioriteto pareiškimų tampa triukšmu.

Šeštas kompromisas: Lighthouse nepaaiškins visos istorijos

Našumo įrankiai gali parodyti nenaudojamus šriftų baitus, atvaizdavimą blokuojančias užklausas, maketo poslinkį ir tinklo kainą. Jie negali pasakyti, ar vizualinis lankstumas vertas perduodamų duomenų.

Kintamojo šrifto migracija turėtų būti vertinama pagal kelis signalus:

• Bendras perduotų šriftų baitų kiekis pirmoje peržiūroje
• Šriftų užklausų skaičius
• Largest Contentful Paint poveikis
• Cumulative Layout Shift dėl šriftų pakeitimo
• Pakartotinių peržiūrų podėliavimo elgsena
• Vizualinis atitikimas patvirtintiems dizainams
• Įskaitomumas dažniausiuose dydžiuose

Jei po šrifto migracijos ataskaita parausta, nepanikuokite. Problema gali būti išankstinio įkėlimo tvarka, atsarginių šriftų metrikos arba poaibio neatitikimas, o ne pats kintamasis šriftas. Mūsų gidas apie tai, how to read a Lighthouse report without panicking, čia aktualus: laboratorinius balus vertinkite kaip diagnostines užuominas, o ne nuosprendį.

Praktinis produkcijos kontrolinis sąrašas

Prieš išleisdami kintamąjį šriftą, atsakykite į šiuos klausimus:

1. Kokius statinius failus jis pakeičia?

Išvardykite faktinius produkcijoje naudojamus failus, o ne tai, ką dizaino sistema teoriškai palaiko. Įtraukite storius, stilius, simbolių rinkinius ir puslapių šablonus.

2. Kurias ašis atversite?

Daugumai komandų reikėtų atverti storį, galbūt plotį, ir retai ką nors daugiau. Optinis dydis gali būti naudingas, jei šriftas jį gerai palaiko, bet jį testuokite. Pasirinktinės ašys turėtų turėti aiškų produkto tikslą.

3. Ar galite saugiai sudaryti poaibius?

Po poaibių sudarymo paleiskite vizualinės regresijos patikras. Testuokite raides su diakritiniais ženklais, skyrybą, valiutos simbolius, piktogramas, jei jos įtrauktos, ir visas palaikomas kalbas.

4. Ar sukonfigūruotos atsarginių šriftų metrikos?

Kur tinkama, naudokite šiuolaikinius CSS įrankius, tokius kaip size-adjust, ascent-override, descent-override ir line-gap-override. Geros atsarginių šriftų metrikos sumažina maketo poslinkį šriftų įkėlimo metu.

5. Ar font-display pasirinktas sąmoningai?

font-display: swap yra įprastas, bet ne visada tobulas. Jis pagerina teksto matomumą, bet gali sukurti pastebimą pakeitimą, jei atsarginių šriftų metrikos prastos. optional gali tikti nekritiniams šriftams, kai trikdžių vengimas svarbesnis už garantuotą prekės ženklo tipografiją.

6. Ar testavote žemesnės klasės įrenginius?

Šriftas, kuris kūrėjo nešiojamajame kompiuteryje atrodo sklandus, biudžetinėje Android aparatinėje įrangoje gali būti atvaizduojamas lėtai. Ištestuokite bent vieną mažos galios įrenginį arba sulėtintą profilį.

7. Ar turite grąžinimo planą?

Šriftų pakeitimai veikia kiekvieną puslapį. Seną statinę sąranką laikykite prieinamą pakankamai ilgai, kad galėtumėte greitai grįžti, jei pasirodytų atvaizdavimo, lokalizacijos ar našumo problemų.

Kada kintamieji šriftai yra geras produkcijos pasirinkimas

Kintamuosius šriftus paprastai verta svarstyti, kai:

• Naudojate tris ar daugiau tos pačios šeimos storių.
• Prižiūrite dizaino sistemą daugelyje šablonų.
• Jums reikia responsyviosios tipografijos su pločio arba optinio dydžio kontrole.
• Naudotojai dažnai naršo kelis puslapius per sesiją.
• Galite tinkamai sudaryti poaibius ir testuoti šriftų apdorojimo grandinę.

Jie mažiau įtikinami, kai:

• Jums reikia tik regular ir bold.
• Kintamasis failas yra daug didesnis nei dabartinė sąranka.
• Šriftas prastai interpoliuoja teksto dydžiuose.
• Jūsų komanda išbarstys savavališkas ašių reikšmes po CSS.
• Negalite testuoti lokalizacijos ir atsarginių šriftų elgsenos.

Blaivus požiūris yra toks: kintamieji šriftai yra galimybė, o ne numatytoji optimizacija. Jie atsilygina komandoms, kurios jau kruopščiai valdo šriftus. Jie baudžia komandas, kurios tipografiją laiko dekoracija, o šriftų įkėlimą — vėliau prisiminta smulkmena.

<!-- tool-cta:start -->

💡 Išbandykite tai: Kai gamybai kuriate kintamojo šrifto poaibį ir jį pakuojate, Webfont Generator sukuria WOFF2 išvestį su atitinkamu CSS.

<!-- tool-cta:end -->

Produkcijos praktinė taisyklė

Naudokite kintamuosius šriftus tada, kai jie sumažina sudėtingumą arba leidžia pasiekti aiškų dizaino rezultatą. Nenaudokite jų vien todėl, kad „vienas failas“ skamba tvarkingiau.

Geriausios produkcinės įgyvendinimo versijos paprastai būna nuobodžios: vienas kruopščiai apribotas kintamasis šriftas, nedidelis patvirtintų ašių reikšmių skaičius, protingi atsarginiai šriftai, santūrus išankstinis įkėlimas ir testavimas realiuose įrenginiuose. Tai ne taip jaudina kaip begalinės tipografinės galimybės. Tačiau daug didesnė tikimybė, kad tai pagerins jūsų svetainę.