du behöver din webbplats för att se bra ut, och typografi är en nyckelfaktor i design. Var kan du hitta gratis teckensnitt online 2020 som upprätthåller en hög kvalitetsstandard?
Jag tror att ett användargränssnitt bör bara vad som är nödvändigt samtidigt som de nödvändiga elementen tilltalande. Vi vill hitta den optimala balansen mellan minimalism och visuell överklagande.
håll det enkelt, men gör det enkla ser bra ut.
men, hur ser enkelt ut exakt?
Ta bort röran, och det mesta av det som finns kvar är UI-kopian och textinnehållet. Det är inte spännande, men låt oss vara ärliga: detta är den viktigaste aspekten av någon app eller webbplats. Information är hela anledningen till att användare använder vår app eller webbplats.
så med rätt typsnitt i kombination med rätt typsnitt (se Font vs. typsnitt: the ultimate guide) kan vi skapa mönster som är ganska enkla och tilltalande samtidigt. Detta betonar de viktiga aspekterna av designen, använder färre resurser och inducerar den minst oönskade kognitiva belastningen.
typografi kan vara mycket kraftfull.
men vilka är de bästa gratis fontwebbplatserna?
där man inte ska leta efter gratis teckensnitt
Dribbble, Behance, Gumroad och så vidare är hem för massor av dolda pärlor, men det innebär siktning genom många digitala resurser, varav några är ofullständiga sidoprojekt och ”lite” versioner. Med det sagt, se till att du bokmärker fantastiska resurser om du råkar stöta på några. Även Instagram kan överraska dig, och Twitter bör inte heller förbises.
det åt sidan, låt oss ta en titt som de bästa gratis teckensnittswebbplatserna.
Google Fonts
nummer ett på denna lista är uppenbarligen Google Fonts, som går utöver vad de flesta alternativ erbjuder. Först och främst erbjuder Google Fonts ett snabbt och bekvämt CDN (content delivery network), vilket gör det superlätt att bädda in webbfonter på webbplatser utan att vara värd för dem.
Google fonts kan delmättas av skript och vikt, och vi kan också styra hur de laddas på webben genom att ställa infont-display CSS-egenskapen från inbäddningskodens frågesträng, vilket förbättrar webbplatsens laddningstider. (CSS-Tricks-artikeln om ”Google Fonts and font-display” förklarar hur.)
märk väl, själv hosting teckensnitt är bättre för privatlivet (eftersom det är cookieless) och hastighet (eftersom det ger utvecklare mer kontroll). Hur som helst har Google Fonts en enorm repertoar.
Creative Market
Jag vet vad du tänker: ”Creative Market är inte Gratis, Daniel!”
Ahhh, men hur är det med avsnittet Gratis varor? Det som är intressant med gratis varor är att dessa faktiskt är premiumteckensnitt som är tillfälligt gratis. Även om det inte är garanterat att inkludera teckensnitt, uppdateras det med sex nya designtillgångar varje vecka (plus tre till när du registrerar dig och ytterligare tre om du spenderar X belopp på tillgångar).
Jag har kontrollerat avsnittet Gratis varor på Creative Market varje vecka i flera år, och jag har byggt upp ett stort förråd av högkvalitativa teckensnitt som kostar ingenting. Font Bundles driver en liknande affär.
Font Squirrel
Font Squirrel är som Unsplash men för teckensnitt, men med tanke på hur länge det har funnits (en riktigt lång tid!), kanske säger att Unsplash är som Font ekorre men för stockbilder är mer exakt! En av veteran gratis typsnitt webbplatser tillsammans Dafont och Urban typsnitt, även om ”ekorre” är bättre.
även om många av veteranplatserna ser lite föråldrade ut, har Font Squirrel hållit sin webbplats något modern jämfört med resten. Det har också ett par mycket användbara verktyg:
- Webfont Generator (konverterar TrueType/OpenType-teckensnitt till webfonts)
- Font Identifier (för att ta reda på namnet font från en uppladdad bild/skärmdump)
FontSpace
FontSpace är en av de trevligare-ser webbplatser, även om det bara erbjuder teckensnitt gratis för personligt bruk, medan font squirrel bekräftar att alla deras teckensnitt är gratis för kommersiellt bruk. FontSpace kanske inte alltid är lämpligt.
med teckensnitt
vad som skiljer sig från varandra är dess fokus på displayfonter.
även om vissa av teckensnitten bara erbjuder lite/demoversioner och ofta bara kommer i TTF / OTF-format (vilket betyder att de är mindre lämpliga för webben), är Befonts en av de få webbplatser som inte tar ”vi har allt” – metoden (vilket kan vara överväldigande ibland). Dessutom kan du alltid konvertera ttf-och OTF-teckensnitt till webbteckensnitt.
Font Shop
Font Shop fokuserar inte helt på gratis typsnitt som Font Squirrel och FontSpace, men det är fortfarande ett ganska anständigt alternativ om alternativ ett till fyra inte hade det du letade efter. Jag tycker att det är det minst användarvänliga av alternativen, men teckensnitten är relativt högkvalitativa.
ärade omnämnanden
Följande gratis teckensnittswebbplatser ser lite föråldrade ut, och sanningsenligt gör några av teckensnitten också, men de är förmodligen några av de största databaserna med gratis teckensnitt där ute idag:
- Dafont
- Urban Fonts
- Fontsly
vilket typsnittformat behöver jag?
OpenType (OTF) och TrueType (TTF) typsnittsformat har varit standarden under en riktigt lång tid, och de används fortfarande kraftigt i grafisk design idag. Men det sägs att WOFF-format har bättre komprimering på webben (särskilt WOFF2, som nu stöds i 94.49% av webbläsarna enligt caniuse.com). faktum är att den nya Google Fonts embed-koden bara erbjuder WOFF2-formatet nu.
så kort sagt:
- WOFF2 för webbinbäddningar
- TTF/OTF för allt annat
vilken typsnittsstil behöver jag?
nuförtiden spelar det ingen roll eftersom normerna har kastats ut genom fönstret lite. Som ett exempel kan Serif-teckensnitt ha en modern känsla nu (tänk Medium).
istället bör vi fokusera mer på tydlighet:
- läsbarhet (hur lätt det är att skilja tecken från varandra)
- läsbarhet (hur lätt det är att läsa meningar som helhet)
en del av detta kommer ner till teckensnittet själv, så man bör vara uppmärksam när man bestämmer vilka teckensnitt som ska användas, men andra gånger kommer det ner till hur teckensnittet är stylingen (när det gäller storlek, vikt och så vidare).
När du är osäker, WCAG 2.0 / 2.1 (riktlinjer för tillgänglighet för webbinnehåll) har allt du behöver veta om typografi och dess många attribut, till exempel radavstånd, radbredd, linjehöjd, teckensnittsstorlek och så vidare.
slutsats
teckensnitt är super användbara, och de är ofta allt som behövs för att uppnå rätt mängd visuell och känslomässig överklagande utan att lägga på mer och mer visuell röran. Din design behöver ändå text, så varför inte göra den till den mest framstående aspekten av den?