Web-suunnittelu tuli iästään, kun webfonts tuli laajalle levinneeksi. Ennen tätä on kyseenalaista, että olimme vähemmän suunnittelijoita kuin insinöörejä.
Kuitenkin innostus, jonka olemme tarttuneet fontin vaihtoehtoja web design on johtanut hämmentävä valikoima valintoja; niin paljon, että monet suunnittelijat valitsevat vähiten vastustuskyvyn polun ja antavat haluavan yksinkertaisen toteutuksen sanelemaan typografiansa.
Jos tiedät, mitä etsit, kaikki vaihtoehdot ovat yksinkertaisia. Tässä artikkelissa käsittelemme sinua tiedoilla, joita tarvitset tekemään perusteltuja päätöksiä, kun valitset fonttitekniikan.
Aiomme kuvata näitä vaihtoehtoja keskittymällä parhaan tapa toimittaa kaikkien aikojen klassinen kirjasintyyppi Garamond.
Arvostelemalla webfontien hyveitä, ensimmäinen vaihtoehto, jota harkitsemme, ei käytä lainkaan webfontteja. Fonttipinoaminen on CSS-tekniikka, jossa määrität useita varaluetteloita, jotka alkavat ensimmäisestä valinnastasi ja jotka lopettavat catch-all-ratkaisun.
On paljon fonttien pinoamista resursseja verkossa, mutta yksi suosikeistani on cssfontstack.com, se on hyvä lähtökohta fonttipinoille, mutta ole tietoinen siitä, että useammin kuin sinun ei tarvitse tuoda jonkin verran asiantuntemusta.
Cssfontstack.comin mukaan Garamond on saatavana järjestelmäpohjaisena kirjasintona 49,91% Macista ja 86,47% Windows-koneista. Se on melko hyvä, mutta ei tarpeeksi hyvä. Tässä on ehdotettu fonttipino, joka kattaa kaikki perusteet:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Kysymys kuuluu, kuinka voimme parantaa tätä?
Tiedämme, että Garamondilla on lukuisia versioita, joten voimme lisätä toisen rivin muunnelmia pienenä kompromissina.
Toiseksi olen eri mieltä siitä, että joko Baskerville tai Times ovat Garamondin korvaavia, joten pudota ne. Hoefler-teksti toimii hyvin Garamondin sijalla, joten se voi pysyä. Meidän on lisättävä serifin lopullinen catch-all, mutta koska useimmat järjestelmät käyttävät Timesa niiden oletusarvona, olkaamme slot korkeimmassa Georgiassa kenelle tahansa, joka luiskahtaa halkeamien läpi.
Viimeinen muutettu fonttipino näyttää tältä:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;Valtaosa katsojista tulee näkemään Garamondin, muutamat näkevät kohtuullisen kompromissin ja pieni vähemmistö saa vain oletusmerkkifontin.
Fonttipinoaminen on ilmainen, ylivoimaisesti nopein ratkaisu ja valitun kirjasintyypin mukaan voi olla erittäin tehokas. Garamondin tapauksessa on hyvä argumentti kutsua tätä "tehtyä työtä".
On kuitenkin yksi tärkeä ongelma fonttien pinoamisessa, varsinkin Garamondin kaltaisella kirjasimella: on olemassa niin monta merirosvoversiota, että on mahdotonta tietää, mikä fontti on nimeltään "Garamond" käyttäjän järjestelmässä, emmekä voi olla varma malli on odotusten mukaista, fontin laajuus voi olla radikaalisti erilainen kuin malli, joka on suunnitelmissamme. (Teknisesti, mikään ei estä kopiota Arialista nimeltään "Garamond", jolloin fonttipino käytti sitä.)
Fonttipinoaminen on siis erinomainen varmuuskopio, ja sitä tulisi harkita käytettäväksi kaikkien alla olevien ratkaisujen yhteydessä, mutta se on ensisijaisesti ensisijainen ratkaisu.
Google-fontit on, monille suunnittelijoille, kohta, jossa he lopettavat haun. Yli 0 dollarin suuruinen voit helposti ladata webfontteja sivustoosi CSS: n avulla.
Ainoa haittapuoli on, että tarjolla olevien kirjasintyyppien määrä on erittäin rajallinen. Kirjoitustyypit, kuten Roboto ja PT Sans, ovat yhtä tärkeitä kuin Google Fontsissa saatavasta ilmaisesta saatavuudesta niiden suunnittelun ominaisuuksien suhteen.
Tällä hetkellä Garamondin ainoa vaihtoehto Google Fontsissa on EB Garamond, yrittää avata lähdekoodi Garamond-kirjasintyyppiä. Mutta tämä versio on virhe, että käytettävissä on vain yksi paino ja tyyli; ei ole rohkeita tai kursivoivia. Suunnittelija Georg Duffner on avokätisesti tehnyt työtään eteenpäin Bitbucket mutta se ei ole valmis valmis.
Google-kirjasimet ovat erinomainen budjettiratkaisu ja sopivat tilanteisiin, joissa voit olla laskun sijaan asiakkaan sijaan. CSS-fonttien määrittäminen on yhtä yksinkertaista kuin mahdollista.
Google Fontsin suuri virhe on se, että markkinoinnista huolimatta on hyvin vähän valinnanvaraa. Jos etsit Open Sans -kuvaketta, olet oikeassa paikassa, mutta jos haluat Garamondin kaltaisen fontin, joka on tuskin peitossa, se on pestä.
Itsenäinen isännöinti on erittäin alivaltainen lähestymistapa webfontsihin. Sen tärkein vetovoima on mahdollisuus jakaa fontteja, mikä on niin houkutteleva, että lähes kaikki streaming-palvelut yrittävät jäljitellä sitä.
Jos sinulla on Garamond-tietokoneen kopio järjestelmäsi, avaa se ja näet hämmästyttävän määrän merkkejä. Fontin subwoofer on prosessi, jolla poistetaan ei-välttämättömät merkit, jolloin pienempi tiedostokoko ja nopeampi toimitus.
Tietenkin tarvittavat hahmot riippuvat sivustosta, jonka olet rakentamassa: jos rakennat matkaopasta Dubrovnikiin, tarvitset todennäköisesti Serbian kyrillisiä hahmoja; jos kopioit Shakespearen kerättyjä teoksia, on epätodennäköistä, että tarvitset @ -merkin.
Jotta fontti voidaan jakaa, tarvitset fonttien muokkausohjelmiston. Saatavilla on monia vaihtoehtoja ilmaiseksi FontForge palkkioon FontLab Studio. Jos haluat tuottaa fontin alihakemistoversion, valitse vain sellainen kuva, jota et halua, ja poista se ja tallenna tiedosto projektikansioon. (Varo älä korvaa alkuperäistä fonttitiedostoasi!)
Täysi .ttf-tiedosto Adobe Garamond Proille on 606 kt. Heittämällä se latinalaisiin latinalaisiin kirjaimiin ja välimerkit pienentävät sen 56 kilobääriksi. Kerro monista eri painoista ja tyyleistä ja tallenna muutaman Mb: n lataukset käyttäjille.
Useimmat asennetut fonttitiedostot ovat TrueType (.ttf), jossa on OpenType (.otf). Voit tallentaa ne palvelimellesi ja määrittää ne CSS: ssä.
Tuki .ttf- ja .otf-tiedostomuodoille on yleistä kaikissa nykyaikaisissa selaimissa paitsi IE: ssä (edes uusin versio) ja eräissä mobiiliselaimissa (mukaan lukien vanhojen iOS Safari-versioiden) tuki.
Jotta voit kasvattaa kattavuutta, tarvitset useita muita formaatteja. .eot toimii IE: lle, .woff toimii useimmissa selaimissa ja on W3C: n ensisijainen muoto. .svg toimii vanhoissa selaimissa. On olemassa useita verkkopalveluita, jotka tuottavat nämä formaatit sinulle .ttf-tiedostosta, joka on yksi suosituimmista Fontin orava.
Haittapuoli muuntamalla työpöydän fontteja käytettäväksi verkossa on kaksinkertainen: ensinnäkin, sinulla ei ole varmasti ole lisensoitua tekemään niin; ja toisaalta, työpöydän fontit ovat lähes aina optimoitu tulostettaviksi, ne eivät yksinkertaisesti toimi hyvin näytöllä.
Fontin valimot ovat vihdoin herättäneet siihen tosiasiaa, että webfontsilla on valtavat markkinat. Tämän seurauksena he eivät ole ainoastaan tiukentaneet lisensointiaan, mutta he pyrkivät optimoimaan selkokielistään näytöille.
Ominaiset webfontit toimittavat valimot tarjoavat kaikki vaaditut tiedostomuodot, laadunvalvotut ja valmiiksi ladatut palvelimesi. Lisäksi voit jakaa tiedoston edelleen osaksi ja et ole riippuvainen kolmannen osapuolen palvelimen käytettävyydestä.
On olemassa lukuisia paikkoja, joihin voit ostaa webfontteja, kaksi alan keskeisiä toimijoita FontShop.com ja MyFonts.com .
Palataksemme Garamondin häilyvyyteen, voimme nähdä, että MyFontsilla on useita erilaisia Garamond-versioita. Voimme myöntää lisenssin Adobe Garamond useita painoja, rajoitettu 250 000 sivun katseluun, noin 180 dollaria.
FontShopilla on myös useita Garamondin saatavilla olevia webfont-versioita. URW Garamond Web tarjoaa jokaisen painon ja tyylin, jota voimme mahdollisesti haluta, ja joka tarjoaa runsaasti 500 000 sivun katselua kuukaudessa. Lisäksi FontShopilla on omistettu subsetter Optimoi kiiltävät fonttiasi ostokset. Valitettavasti maksat palkkion kaiken tämän, noin 680 dollaria koko kirjasintyyppiä.
Self-hosting mahdollistaa subsettingin. Sillä varmistat, että pysyt hallinnassasi fonttisi toimituksesta ja välttää minkäänlaista riippuvuutta kolmansien osapuolten palvelimista.
Lisäksi, jos ostat ammattimaisen webfontin, voit odottaa laadun olevan erittäin korkea.
Self-hosting myös vetoaa niille, jotka haluavat "omistaa" fonttimme eikä vuokrata niitä. Tietenkin oikeudelliselta kannalta on hyvin vähän omistusta lainkaan, mutta kertaluonteinen maksu on mukavampaa kuin tilaus monille ihmisille.
Ainoa haittapuoli itsensä isännöinti on huomattava hinta. Ei vain sinun tarvitse maksaa fonttia, mutta sinun on ehkä kerrottava hosting- ja kaistanleveyskustannukset lukuihinne.
Aivan kuten Google Fonts, webfont-palvelut toimittavat kirjasimia selaimillamme yksinkertaisen CSS: n kautta. Toisin kuin Google Fonts, on valtava valikoima valita.
Valittavana on useita eri toimittajia, ja pidän erityisesti Hoefler & Frere-Jonesin " cloud.typography palvelua. Kuitenkin, kuten monet pienemmät toimittajat, niiden käyttö on täysin riippuvainen hakukentän saatavuudesta. Lähin fontti Hoefler & Frere-Jones voi toimittaa Hoefler Text, mutta jos maksamme palkkion, meidän ei pitäisi joutua kompromisseihin.
Suurin webfont-suorittimen pelaaja on Adobe Typekit . Fonttien laatu on erittäin korkea, toteutus on yksinkertaista, ja mikä tärkeintä, niillä on valtava luettelo.
Typekit tarjoaa erilaisia tilauksia, jotka vaihtelevat 24,99 dollaria vuodessa 50 000 katselusta kuukaudessa 99,99 dollariin vuodessa 1 000 000 katselukertaa kohti kuukaudessa. Jos olet kuitenkin Creative Cloud -jäsen, Portfolio-suunnitelma sisältyy tilaukseen. mikä tarkoittaa sitä, että useimmille web-suunnittelijoille Typekit on ilmainen ratkaisu.
Pikahaku kertoo, että Garamond sisältää useita versioita, mukaan lukien Adoben oma, saatavilla Typekitissä. Ja myös hyvin rajoitettu subsetting-ominaisuus, jonka avulla voimme pienentää tiedostokokoa hieman.
Webfont-suoratoistopalvelut tarjoavat suuren valikoiman erinomaisia fontteja, jotka on helppo lisätä sivustoosi.
Typekit-tapauksessa, jos olet jo Creative Cloud -jäsen, vapaa pääsy tekee tästä entistä houkuttelevamman vaihtoehdon. Jos et kuitenkaan ole jäsen, sinulla on mahdollisuus valita huomattavan tilauksen maksaminen ja sitoutuminen Adobeen.
Olen periaatteessa huolissaan kaikista streaming-palveluista, että olet täysin riippuvainen kolmannen osapuolen palvelimen suorituskyvystä. Jos heidän palvelimensa menee alas, niin tekee huomattavan osan brändeistään.
Kuten monien asioiden kanssa, vastaus on: se riippuu projektista. Mutta meillä on joitain päätöksiä, jotka voimme tehdä Garamond-testiemme perusteella:
Fonttipinoaminen on maksuton varmuuskopio, sillä se tuottaa brändi-ratkaisun, jos ja milloin kirjasintatiedostot puuttuvat tai suoratoistopalvelut ovat hidas. Se olisi aina toteutettava millä tahansa sivustolla, mutta luottaa siihen, jopa jotain yleistä kuin Garamond on mahdollisesti vaarallinen.
Jos etsimäsi fontti on maksullista, joko Google Fontsin kautta tai esimerkiksi Creative Cloud -liittymän kautta, tämä on hyvä valinta. Koska minulla on Creative Cloud -liittymä, olisin kiusattu alas tällä reitillä, vaikka todellisen subsettingin puute olisi huolta.
Jos sinulla on talousarvio, niin itsenäinen hosting ammatillinen webfont on paras valinta. Suhteellisen vaatimattomat kustannukset verrattuna valokuviin verrattuna ovat helposti perusteltavissa valtava nopeusvoimakkuuden alentaminen tuottaa.
Teollisuudessa, jossa vähennämme JavaScript-tiedostoja muutaman Kb: n säästämiseksi, satojen kertauskertojen rajaaminen yhdestä tiedostosta on turhaa.