tarvitset sivustosi näyttääksesi hyvältä, ja typografia on keskeinen tekijä suunnittelussa. Mistä löydät verkossa vuonna 2020 ilmaisia fontteja, jotka ylläpitävät korkeaa laatua?

mielestäni käyttöliittymässä pitäisi olla vain se, mikä on välttämätöntä, mutta tehdä välttämättömistä elementeistä houkuttelevia. Haluamme löytää optimaalisen tasapainon minimalismin ja visuaalisuuden välille.

pidä se yksinkertaisena, mutta tee yksinkertaisesta näyttävä.

mutta, miltä yksinkertainen näyttää tarkalleen?

Poista sotku, ja jäljelle jää lähinnä käyttöliittymän kopio ja tekstin sisältö. Se ei ole jännittävää, mutta olkaamme rehellisiä: tämä on tärkein näkökohta tahansa sovelluksen tai sivuston. Tiedot ovat koko syy, miksi käyttäjät käyttävät sovellustamme tai verkkosivustoamme.

joten oikeilla kirjasintyypeillä yhdistettynä oikeisiin kirjasintyyleihin (katso fontti vs. kirjasintyyppi: ultimate guide), voimme luoda malleja, jotka ovat melko yksinkertaisia ja houkuttelevia samaan aikaan. Tämä korostaa suunnittelun tärkeitä näkökohtia, käyttää vähemmän resursseja ja aiheuttaa vähiten ei-toivottua kognitiivista kuormitusta.

typografia voi olla hyvin voimakas.

mutta mitkä ovat parhaat vapaat kirjasinsivustot?

mistä ei kannata etsiä ilmaisia fontteja

Dribbblesta, Behancesta, Gumroadista ja niin edelleen löytyy tonneittain piilotettuja helmiä, mutta tämä edellyttää monien digitaalisten resurssien seulomista, joista osa on epätäydellisiä sivuhankkeita ja ”lite” – versioita. Tästä huolimatta, varmista, että kirjanmerkki mahtava resursseja, jos et satu törmännyt mitään. Jopa Instagram saattaa yllättää, eikä Twitteriäkään kannata sivuuttaa.

että sikseen, Let ’ s take a look as the best free font websites.

Google Fonts

tämän listan ykkönen on ilmeisesti Google Fonts, joka ylittää ja ylittää sen, mitä useimmat vaihtoehdot tarjoavat. Ensinnäkin Google Fonts tarjoaa nopean ja kätevän CDN: n (content delivery network), joten web-fonttien upottaminen verkkosivustoille on erittäin helppoa ilman, että ne todella hostataan.

Googlen fontteja voidaan alittaa skriptin ja painon mukaan, ja voimme myös hallita niiden latautumista Webiin asettamalla font-display CSS-ominaisuus upottaa koodin kyselymerkkijonosta, mikä parantaa sivuston latausaikoja. (CSS-Tricks artikkeli ”Google Fonts and font-display” selittää miten.)

muista, että itse hostaavat fontit ovat parempia yksityisyyden (koska se on kokkaamaton) ja nopeuden (koska se tarjoaa kehittäjille enemmän kontrollia) kannalta. Joka tapauksessa, Google Fonts on humungous repertuaari.

Creative Market

i know what you ’ re thinking: ”Creative Market isn’ t free, Daniel!”

Ahhh, mutta entäpä Ilmaiset tavarat-osio? Mielenkiintoista ilmaisissa tavaroissa on se, että nämä ovat itse asiassa premium-fontteja, jotka ovat väliaikaisesti ilmaisia. Vaikka se ei ole taattu sisältää fontteja, se päivitetään kuusi uutta design omaisuuseriä joka viikko (plus kolme lisää, Kun kirjaudut ja toiset kolme, jos viettää X määrä varat).

olen tarkistanut Creative Marketin Ilmaiset tavarat-osiota joka viikko vuosien ajan, ja olen rakentanut suuren arkiston laadukkaita fontteja, jotka eivät maksa mitään. Font nippuja toimii samanlainen paljon.

fontti-Orava

fontti-orava on kuin Unsplash mutta fonteille, vaikka huomioi kuinka kauan se on ollut olemassa (todella pitkä aika!), ehkä sanomalla, että Unsplash on kuin fontti orava mutta varastossa kuvia on tarkempi! Yksi veteraani vapaa fontti sivustot rinnalla Dafont ja Urban fontteja, vaikka ”orava” on parempi.

vaikka monet veteraanisivustoista näyttävät hieman vanhentuneilta, Font orava on pitänyt verkkosivunsa hieman nykyaikaisina muihin verrattuna. Siinä on myös pari erittäin hyödyllistä työkalua:

• Webfont Generator (muuntaa TrueType/OpenType-fontit webfonteiksi)
• Font Identifier (nimen fontti saa selville ladatusta kuvasta/kuvakaappauksesta)

FontSpace

FontSpace on yksi mukavammista-näköinen sivustot, vaikka se tarjoaa fontit ilmaiseksi henkilökohtaiseen käyttöön, kun taas fontti orava vahvistaa, että kaikki niiden fontit ovat ilmaisia kaupalliseen käyttöön. FontSpace ei välttämättä aina ole sopiva.

fontit

mikä asettaa Befontsin erilleen on sen keskittyminen näyttöfontteihin.

vaikka jotkut fonteista tarjoavat vain lite/demoversioita ja tarpeeksi usein ne tulevat vain TTF / OTF-muodossa (eli ne eivät sovellu Webiin), Befonts on yksi harvoista verkkosivustoista, joka ei ota ”meillä on kaikki” – lähestymistapaa (mikä voi olla joskus ylivoimaista). Sitä paitsi, voit aina muuntaa TTF ja OTF fontteja web fontteja.

Font Shop

Font Shop ei keskity täysin vapaisiin kirjasintyyppeihin kuten Font Squirrel ja FontSpace, mutta se on silti melko kelpo vaihtoehto, jos vaihtoehdoissa yksi-neljä ei ole sitä mitä etsit. Minusta se on vaihtoehdoista vähiten käyttäjäystävällinen, mutta fontit ovat suhteellisen laadukkaita.

kunniamaininnat

seuraavat vapaat kirjasinsivustot näyttävät hieman vanhentuneilta, ja totuudenmukaisesti myös jotkut fontit näyttävät, mutta ne ovat kiistatta suurimpia vapaiden fonttien tietokantoja nykyään:

• Dafont
• Kaupunkifontit
• Fontsly

minkä kirjasinmuodon tarvitsen?

OpenType (OTF) – ja TrueType (TTF) – kirjasinmuodot ovat olleet standardi todella pitkään, ja niitä käytetään paljon graafisessa suunnittelussa vielä nykyäänkin. Mutta tästä huolimatta, WOFF formaatit on parempi pakkaus Web (erityisesti WOFF2, joka on nyt tuettu 94.49% web-selaimet mukaan caniuse.com). itse asiassa, uusi Google Fonts upota koodi tarjoaa vain woff2 muodossa nyt.

siis lyhyesti:

• woff2 web-upotuksille
• TTF/OTF kaikelle muulle

mitä kirjasintyyliä tarvitsen?

nykyään sillä ei oikeastaan ole väliä, koska normeja on vähän heitetty ikkunasta ulos. Esimerkiksi Serif-fonteilla voi olla nyt moderni tunnelma (think Medium).

sen sijaan olisi keskityttävä enemmän selkeyteen:

• luettavuus (kuinka helppoa on erottaa merkit toisistaan)
• luettavuus (kuinka helppoa on lukea lauseita kokonaisuudessaan)

osa tästä riippuu kirjasimesta itsestään, joten on oltava tarkkaavainen päätettäessä, mitä fontteja käytetään, mutta toisinaan on kyse kirjasimen muotoilusta (koon, painon jne.suhteen).

epävarmoissa tapauksissa WCAG 2.0 / 2.1 (Web Content Accessibility Guidelines) on kaikki mitä sinun tarvitsee tietää typografiasta ja sen monista ominaisuuksista, kuten riviväli, viivan leveys, viivan korkeus, fontin mitoitus ja niin edelleen.

Conclusion

fontit ovat erittäin hyödyllisiä, ja ne ovat usein kaikki, mitä tarvitaan oikean määrän visuaalista ja emotionaalista vetovoimaa saavuttamiseen ilman, että asetetaan yhä enemmän visuaalista sotkua. Suunnittelusi tarvitsee joka tapauksessa tekstiä, joten miksi et tekisi siitä sen huomattavinta puolta?