Muuttuvat fontit tuotannossa: kompromissit, joista kukaan ei kerro

Muuttuvat fontit eivät ole taianomaista fonttipakkausta

Muuttuvat fontit esitellään usein siistinä vastauksena web-typografiaan: yksi tiedosto, monta leikkausta, vähemmän pyyntöjä, sulavammat design systemit. Väite on suunnaltaan oikea, mutta vajaa.

Tuotannossa muuttuva fontti ei niinkään korvaa kuutta tiedostoa yhdellä tiedostolla, vaan tuo käyttöön uuden typografian ajonaikaisen kerroksen. Saat ilmaisullista hallintaa painoon, leveyteen, kallistukseen, optiseen kokoon ja joskus mukautettuihin akseleihin. Samalla perit uusia päätöksiä tiedostokoosta, selaimen renderöinnistä, varafonttien käyttäytymisestä, suunnittelun hallinnasta ja suorituskyvyn mittaamisesta.

Lopputulos voi olla erinomainen. Se voi myös olla huonompi kuin staattinen ratkaisu, jonka se korvasi.

Jos nykyinen sivustosi toimittaa saman fonttiperheen viisi painoa, hyvin osajoukkoistettu muuttuva fontti voi vähentää pyyntöjä ja yksinkertaistaa CSS:ää. Jos sivustosi toimittaa yhden normaalin painon ja yhden lihavoidun painon, muuttuva fontti voi lisätä tavuja joustavuudesta, josta yksikään käyttäjä ei koskaan hyödy. Tämä on tuotannon kompromissi, joka usein ohitetaan.

Laajemmaksi perustaksi fonttien latausstrategiaan oppaamme siitä, miksi web-fontit ovat edelleen helpoin suorituskykyvoitto useimmilla sivustoilla, toimii hyödyllisenä rinnakkaislukemisena. Muuttuvat fontit eivät muuta perusteita: toimita vähemmän tavuja, vähennä renderöintiviivettä ja tee varatekstistä hyväksyttävää.

Ilmeinen hyöty: vähemmän tiedostoja, ilmaisuvoimaisempaa tekstiä

Perinteinen staattinen fonttiratkaisu näyttää yleensä tältä:

• Regular 400
• Italic 400
• Medium 500
• Semibold 600
• Bold 700
• Ehkä erillinen display-leikkaus

Jokainen tiedosto ladataan, välimuistitetaan ja renderöidään erikseen. Jos sivu käyttää useita painoja taiton yläosassa, pyyntöjä kertyy nopeasti.

Muuttuva fontti voi tiivistää useita näistä painoista yhteen tiedostoon. Sen sijaan että lataisit Inter-Regular.woff2, Inter-Medium.woff2 ja Inter-Bold.woff2, lataat yhden muuttuvan tiedoston ja käytät font-weight: 400 700 jatkuvalla alueella.

Se avaa todellisia hyötyjä:

• Vähemmän hallittavia fonttitiedostoja
• Johdonmukaisempi interpolointi painojen välillä
• Hienojakoisempi responsiivinen typografia
• Helpommat teemajärjestelmät
• Parempi yhteys design tokeneihin

Design systemeissä hallinta on erityisen hyödyllistä. Painikkeen teksti voi käyttää arvoa 580 sen sijaan, että se pakotettaisiin arvoon 500 tai 600. Kapean kortin otsikko voi käyttää hieman tiivistettyä leveysakselia, jos fontti tukee sitä. Display-otsikko voi käyttää optista koon säätöä, kun se on saatavilla.

Mutta näiden hallintojen olemassaolo ei tarkoita, että kaikkia pitäisi käyttää.

Ensimmäinen piilevä kompromissi: yksi tiedosto voi olla suurempi kuin tiedostot, joita oikeasti tarvitset

Muuttuva fontti sisältää interpolointidataa suunnitteluavaruudelle. Tällä suunnitteluavaruudella on kustannus. Yksittäinen muuttuvan fontin tiedosto voi olla suurempi kuin yksi tai kaksi staattista fonttitiedostoa.

Se ei ole ongelma, kun se korvaa monta tiedostoa. Se on ongelma, kun se korvaa hillityn pinon.

Ajatellaan kahta yleistä tapausta:

Tapaus A: markkinointisivusto, jossa on monta painoa

Sivusto käyttää painoja 300, 400, 500, 600, 700 ja kursiiveja eri sivuilla. Huolellisesti osajoukkoistettu muuttuva fontti todennäköisesti auttaa. Se vähentää pyyntöjen ylimääräistä kuormaa ja yksinkertaistaa tulevaa ylläpitoa.

Tapaus B: tuotesovellus, jossa on vain normaali ja lihavoitu

Käyttöliittymä käyttää painoja 400 ja 700, ja järjestelmäfontteja varalla. Muuttuva fontti voi lisätä tarpeettomia tavuja. Joustavuus on mukavaa Figmassa, mutta ei aina hyödyllistä selaimessa.

Virhe on verrata ”yhtä muuttuvaa tiedostoa” ”moneen teoreettiseen staattiseen tiedostoon” sen sijaan, että sitä verrattaisiin tiedostoihin, joita todelliset sivusi tällä hetkellä käyttävät.

Mittaa keskeisillä sivupohjilla ladatut todelliset fonttitavut. Testaa sitten muuttuva versio samalla merkkiosajoukolla ja samalla preload-strategialla. Älä oleta, että muuttuva versio voittaa.

Toinen kompromissi: osajoukkoistaminen muuttuu tärkeämmäksi, ei vähemmän tärkeäksi

Muuttuvat fontit tekevät osajoukkoistamisesta arvokkaampaa, koska perustiedosto voi sisältää paljon: glyyfejä, kielitukea, OpenType-ominaisuuksia, useita akseleita ja metatietoja.

Useimmat tuotantosivustot eivät tarvitse fontin jokaista glyyfiä. Jos palvelet vain englantia, et todennäköisesti tarvitse täyttä yleiseurooppalaista kattavuutta, kyrillisiä merkkejä, kreikkaa, vietnamia ja jokaista symbolilohkoa. Jos palvelet useita kieliä, saatat silti haluta kielikohtaisia osajoukkoja yhden universaalin tiedoston sijaan.

Käytännöllinen lähestymistapa on yleensä:

1. Pidä useimmille käyttäjille ydin-Latin-osajoukko.
2. Lisää laajennettuja osajoukkoja vain sinne, missä sisältö tarvitsee niitä.
3. Käytä unicode-range-määritystä, jotta selain voi valita oikean tiedoston.
4. Pidä harvinaisille kirjoitusjärjestelmille staattisia varafontteja tarvittaessa.

Tässä muuttuvat fontit voivat muuttua hankaliksi. Jotkin fonttiputket osajoukkoistavat staattisia fontteja helposti, mutta käsittelevät muuttuvia akseleita, hintingiä tai metatietoja väärin. Varmista aina, että ulostulofontti käyttäytyy edelleen oikein koko sillä akselialueella, jota aiot käyttää.

Rikkinäinen osajoukko on huonompi kuin suuri fontti. Se epäonnistuu hiljaa: outoa renderöintiä, puuttuvia glyyfejä, epäjohdonmukaisia painoja tai asettelumuutoksia, jotka näkyvät vain tietyssä kieliversiossa.

Kolmas kompromissi: CSS voi muuttua liian nokkelaksi

Muuttuvat fontit tuovat akselit näkyviin CSS:n kautta. Vakiintuneet akselit, kuten paino ja leveys, asettuvat siististi ominaisuuksiin kuten font-weight ja font-stretch. Mukautetut akselit käyttävät usein font-variation-settings-määritystä.

Tämä voima houkuttelee tiimejä nokkeluuteen:

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

Tämä voi olla teknisesti pätevää, mutta se on harvoin hyvä design system -rajapinta. Satunnaiset akseliarvot ympäri CSS:ää ovat vaikeita arvioida, vaikeita refaktoroida ja helppoja käyttää väärin.

Suosi design tokeneita tai nimettyjä apuluokkia:

: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);
}

Käytä vakiintuneita CSS-ominaisuuksia aina kun mahdollista. Säästä font-variation-settings akseleille, joille ei ole ylemmän tason ominaisuutta.

Ole myös varovainen animoinnin kanssa. Painon tai leveyden animointi voi pieninä annoksina olla tyylikästä, mutta se voi myös aiheuttaa uudelleenasettelua, visuaalista epävakautta ja tarpeetonta työtä vähätehoisilla laitteilla. Typografian ei pitäisi muuttua liikeleikkikentäksi vain siksi, että fontti sallii sen.

Neljäs kompromissi: renderöintierot ovat edelleen olemassa

Nykyaikaisten selainten tuki muuttuville fonteille on vahva, mutta renderöinti ei ole kaikkialla identtistä. Käyttöjärjestelmien tekstirasteroijat, selainmoottorit, antialiasointi ja fontin hinting vaikuttavat kaikki lopputulokseen.

Muuttuvan fontin paino 500 ei välttämättä näytä täsmälleen samalta kuin saman perheen staattinen 500-tiedosto. Joissakin perheissä staattiset instanssit on hienosäädetty käsin, kun taas interpoloidut muuttuvat instanssit luodaan matemaattisesti. Pienissä koissa tällä erolla voi olla merkitystä.

Tämä koskee erityisesti leipätekstiä, navigaatiota, tiheitä taulukoita ja käyttöliittymätekstejä. Mitä tekstipainotteisempi käyttöliittymäsi on, sitä enemmän sinun tulisi testata todellisia lukemisolosuhteita, ei vain hero-typografiaa.

Jos tarkastelet typografiajärjestelmääsi uudelleen siirtyessäsi muuttuviin fontteihin, aloita luettavuudesta uutuudenviehätyksen sijaan. Käytännön oppaamme luettavaan typografiaan modernissa webissä käsittelee epähohdokkaita valintoja — rivinpituutta, kokoa, kontrastia, välistystä — joilla on yleensä enemmän merkitystä kuin 1 000 käytettävissä olevalla fonttipainolla.

Viides kompromissi: välimuisti voi toimia molempiin suuntiin

Yksi muuttuvan fontin tiedosto voidaan välimuistittaa kerran ja käyttää uudelleen eri sivuilla. Se on hyvä asia.

Mutta jos tiedosto on suuri ja renderöintiä estävä, ensikäynnit maksavat koko kustannuksen heti alussa. Staattisia fontteja voi joskus ladata valikoivammin: ensin normaali leipätekstiin, lihavoitu myöhemmin, display vain sivuille, jotka sitä tarvitsevat.

Yleispätevää vastausta ei ole. Oikea ratkaisu riippuu liikennemalleista:

• Käyvätkö käyttäjät monella sivulla yhden istunnon aikana? Jaettu muuttuva tiedosto voi kannattaa.
• Saapuvatko käyttäjät yhteen artikkeliin ja poistuvat? Pienemmät staattiset tiedostot voivat olla parempia.
• Tarvitseeko etusivu vain yhden painon? Älä preloadaa suurta suunnitteluavaruutta tulevia sivuja varten.
• Onko sovellus kirjautumisen takana ja käytetäänkö sitä usein uudelleen? Välimuistin uudelleenkäytöstä tulee arvokkaampaa.

Myös preload tarvitsee pidättyvyyttä. Preloadaa fontti, jota tarvitaan taiton yläosan tekstiin, älä jokaista mahdollista fonttia. Preload on prioriteettiväite. Liian monta prioriteettiväitettä muuttuu hälyksi.

Kuudes kompromissi: Lighthouse ei selitä koko tarinaa

Suorituskykytyökalut voivat näyttää käyttämättömiä fonttitavuja, renderöintiä estäviä pyyntöjä, asettelun siirtymää ja verkkokustannusta. Ne eivät voi kertoa, onko visuaalinen joustavuus hyötykuorman arvoista.

Muuttuvaan fonttiin siirtymistä tulisi arvioida useilla signaaleilla:

• Ensimmäisellä näkymällä siirrettyjen fonttitavujen kokonaismäärä
• Fonttipyyntöjen määrä
• Vaikutus Largest Contentful Paintiin
• Fonttivaihtojen aiheuttama Cumulative Layout Shift
• Välimuistikäyttäytyminen toistuvilla näkymillä
• Visuaalinen vastaavuus hyväksyttyihin suunnitelmiin
• Luettavuus yleisissä kooissa

Jos raportti muuttuu punaiseksi fonttimigraation jälkeen, älä panikoi. Ongelma voi olla preload-järjestys, varafontin metriikat tai osajoukon ristiriita, ei itse muuttuva fontti. Oppaamme siitä, miten Lighthouse-raporttia luetaan panikoimatta, liittyy tähän: käsittele labrapisteitä diagnostisina vihjeinä, älä tuomiona.

Käytännöllinen tuotannon tarkistuslista

Ennen kuin viet muuttuvan fontin tuotantoon, vastaa näihin kysymyksiin:

1. Mitä staattisia tiedostoja se korvaa?

Listaa tuotannossa oikeasti käytetyt tiedostot, älä sitä, mitä design system teoriassa tukee. Sisällytä painot, tyylit, merkistöt ja sivupohjat.

2. Mitkä akselit tuot näkyviin?

Useimpien tiimien tulisi tuoda näkyviin paino, ehkä leveys, ja harvoin muuta. Optinen koko voi olla hyödyllinen, jos fontti tukee sitä hyvin, mutta testaa se. Mukautetuilla akseleilla tulisi olla selkeä tuotetarkoitus.

3. Voitko osajoukkoistaa turvallisesti?

Aja visuaaliset regressiotarkistukset osajoukkoistamisen jälkeen. Testaa aksenttimerkit, välimerkit, valuuttasymbolit, ikonit jos niitä sisältyy, ja kaikki tuetut kielet.

4. Onko varafonttien metriikat määritetty?

Käytä moderneja CSS-työkaluja, kuten size-adjust, ascent-override, descent-override ja line-gap-override, kun se on tarkoituksenmukaista. Hyvät varafontin metriikat vähentävät asettelun siirtymää fontin latautuessa.

5. Onko font-display tietoinen valinta?

font-display: swap on yleinen, mutta ei aina täydellinen. Se parantaa tekstin näkyvyyttä, mutta voi aiheuttaa huomattavan vaihdon, jos varafontin metriikat ovat huonot. optional voi toimia ei-kriittisille fonteille, joissa häiriön välttäminen on tärkeämpää kuin taattu bränditypografia.

6. Oletko testannut edullisia laitteita?

Fontti, joka tuntuu toimivan hyvin kehittäjän kannettavalla, voi renderöityä hitaasti edullisella Android-laitteistolla. Testaa vähintään yhdellä vähätehoisella laitteella tai kuristetulla profiililla.

7. Onko palautussuunnitelma olemassa?

Fonttimuutokset vaikuttavat jokaiseen sivuun. Pidä vanha staattinen ratkaisu saatavilla riittävän pitkään, jotta voit palata siihen nopeasti, jos renderöinti-, lokalisointi- tai suorituskykyongelmia ilmenee.

Milloin muuttuvat fontit ovat hyvä tuotantovalinta

Muuttuvia fontteja kannattaa yleensä harkita, kun:

• Käytät kolmea tai useampaa painoa samasta fonttiperheestä.
• Ylläpidät design systemiä monissa sivupohjissa.
• Tarvitset responsiivista typografiaa, jossa hallitaan leveyttä tai optista kokoa.
• Käyttäjät selaavat yleisesti useita sivuja yhden istunnon aikana.
• Voit osajoukkoistaa ja testata fonttiputken asianmukaisesti.

Ne ovat vähemmän vakuuttavia, kun:

• Tarvitset vain normaalin ja lihavoidun.
• Muuttuva tiedosto on paljon suurempi kuin nykyinen ratkaisusi.
• Fontilla on heikko interpolointi tekstikoossa.
• Tiimisi ripottelee mielivaltaisia akseliarvoja ympäri CSS:ää.
• Et voi testata lokalisointia ja varafonttien käyttäytymistä.

Selkeä näkemys on tämä: muuttuvat fontit ovat kyvykkyys, eivät oletusarvoinen optimointi. Ne palkitsevat tiimejä, jotka jo hallitsevat fontteja huolellisesti. Ne rankaisevat tiimejä, jotka kohtelevat typografiaa koristeena ja fonttien lataamista jälkiajatuksena.

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

💡 Kokeile tätä: Kun rajaat ja paketoit muuttuvaa fonttia tuotantoon, Webfont Generator tuottaa WOFF2-tulosteen ja siihen sopivan CSS:n.

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

Tuotannon nyrkkisääntö

Käytä muuttuvia fontteja, kun ne vähentävät monimutkaisuutta tai mahdollistavat selkeän suunnittelutuloksen. Älä käytä niitä siksi, että ”yksi tiedosto” kuulostaa siistimmältä.

Parhaat tuotantototeutukset ovat yleensä tylsiä: yksi huolellisesti osajoukkoistettu muuttuva fontti, pieni määrä hyväksyttyjä akseliarvoja, järkevät varafontit, hillitty preload ja testaus oikeilla laitteilla. Se ei ole yhtä jännittävää kuin rajaton typografinen mahdollisuus. Se tekee sivustostasi paljon todennäköisemmin paremman.