'N Lys met nuwerwetse lettertipes wat met Google Fonts gekies word en wat goed saamgevoeg is en hoe om dit op u webwerf te installeer.
Webwerf tipografie was vroeër 'n meer mistieke ontwerpspraktyk as wat dit tans is. Die ingewikkelde proses om 'n webbladsy met pasgemaakte lettertipes te versier, het een keer vereis dat fontlêers op die gebruiker se bediener kon omskep en ingebed word, en die keuse van beskikbare lettertipes is beperk tot die gebruiker se eie versameling of kennis van tipografie buite die standaardstelselfonte. Gevolglik het die meeste webwerwe amper identies gelyk in hul inhoudformatering, wat op baie oorgebruik en alledaagse staatgemaak is webveilige lettertipes.
Dit het alles in 2010 verander met die vrylating van Google-lettertipes, 'n open source-projek wat 'n baie maklike implementering van aangepaste lettertipes op webwerwe moontlik maak. Die installering van hierdie lettertipes op u eie webwerf is gelukkig 'n vinnige en maklike proses, maar u moet daarop let dat nie elke lettertipe-kombinasie in Google se biblioteek 'n resep is vir tipografiese sukses nie. Met die regte lettertipes en gebruiksoorwegings kan u aanlyn handelsmerk egter professionaliteit, skoonheid en vriendelikheid van die leser uitroei sonder dat u 'n duur, persoonlike lettertipe nodig het. In hierdie artikel sal ek u wys hoe u dit alles kan bereik.
1 'N Lys van 10 trending Google Font-kombinasies
5 4. Roboto Dun + Roboto Gereeld
10 9. PT Sans Smal + PT Sans
12 Bonus: 5 van ons gunsteling premium lettertipes
12.4 Bonus 4: The Little Graphics Bundel
13 Waarom moet u Google-lettertipes gebruik??
14 Hoe om Google-lettertipes te installeer
14.1 Styles by te voeg
14.2 Inbedding van die standaard of @Import?
14.3 Waar om die kode te plaas
14.4 Gebruik die lettertipe in u stylblad
15 Advies oor die koppeling van u lettertipes
15.2 Eksperimentering is die sleutel
'N Lys van 10 trending Google Font-kombinasies
Laat ons daarby kom! Hier is tien van die beste Google Font-kombinasies wat tans nie in 'n spesifieke volgorde verskyn nie:
Oop Sans gekondenseer
Hier is 'n maklike kombinasie wat wondere verrig vir byna elke toepaslike gebruik. Sans oop is een van – indien nie die – mees veelsydige lettertipes in die hele versameling Google-lettertipes. Dit is buitengewoon maklik om in groot blokke teks te lees, terwyl dit steeds opvallend is vir opskrifte.
Eenvoudig. Gesofistikeerde. Bekend. Jy kan nie verkeerd gaan nie!
Ek kan geen scenario voorspel waar Sans oop sou 'n swak keuse wees. Tensy u spesifiek op soek is na 'n serif-lettertipe, dink ek dat hierdie een die beste sal dien vir enige sake-, blog-, bestemmingsblad- of webprogram.
Oswald is 'n wonderlike lettertipe vir opskrifte, ongeag die lettertjiegewig of die gebruik van pette. Die gekondenseerde aard help dit om aandag te trek en te pop, maar sorg ook vir 'n aangename unieke teks as die teks van u hoofliggaam.
EB Garamond is 'n elegante opdatering van die klassieke Garamond-font. Hierdie lettertipe is onmiddellik herkenbaar en tydloos in voorkoms, en gee 'n kenmerkende professionaliteit in u tipografie.
Hierdie samewerking werk goed vir professionele persone wat te make het met hoë klante, soos prokureurs, vaste eiendomsagentskappe of selfs eksklusiewe boetieks. Die veelsydigheid van Oswald en die klassieke voorkoms van EB Garamond maak 'n uitstekende produkbeskrywingsteks waar dit belangrik is om 'n item van premium kwaliteit te beklemtoon.
Montserrat is 'n gunsteling onder ontwerpers weens sy veelsydigheid en eenvoud, en Merriweather pas wonderlik aan met sy kontrasterende styl en maklike leesbaarheid. Voel hulle vry om dit as hoofopskrifte of paragrapteks om te ruil – albei werk fantasties soos een van hulle!
Hierdie spesifieke kombinasie is 'n fyn balans tussen moderne en klassieke ontwerp. As sodanig kan die verskeidenheid gebruike baie soorte ondernemings ondersteun. Persoonlik voel ek dat hierdie lettertipes goed sal wees vir enige soort aanlyn nuusbron of uitgewersagentskap.
4. Roboto Dun + Roboto Gereeld
Die Roboto font-family is 'n persoonlike gunsteling en dit is ook een wat ons hier gebruik by How To Online. Uiters veelsydig met 'n wye verskeidenheid fontgewigte is daar feitlik geen beperking op waarvoor die lettertipe gebruik kan word nie. Moderne en meetkundige, maar op die een of ander manier vriendelik en betroubaar, is Roboto 'n wonder van vorm en funksie.
Hier is nog 'n paring waarvoor u moeilik sal wees om 'n slegte gebruik te vind. terwyl Roboto werk vir bykans alles; ek dink dit is veral ideaal vir tegniese start-up, moderne klein ondernemings of enige soort handelsmerk met die oog op die toekoms.
Dit is ons vriend Roboto weer! Hierdie keer kyk ons ​​egter na die serif-variasie, Roboto-plaat. Dit is 'n lettertipe wat net so veelsydig is as sy neef, maar tog 'n bietjie meer klassiek in styl. As dit gepaard gaan met die kenmerkende en vetgedrukte Raleway, ons het 'n ongelooflike wedstryd van skoon en verfynde tipografie.
Raleway is een van daardie lettertipes wat gesofistikeerdheid skree. As dit as 'n kopknop gebruik word, dink ek dat dit pragtig werk vir luukse items soos juweliersware, ontwerpersklere, of soortgelyke eksklusiewe e-handelsprodukte. Roboto-plaat ondersteun dit goed met eenvoudige en toeganklike beskrywende teks.
Albei werk ook uitruilbaar. Probeer verskillende gewigsvariasies vir beide lettertipes in die opskrifte en die teks, en kyk watter paring jou handelsmerk die beste is.
Volgens die ontwerper, Playfair-vertoning is geïnspireer deur die lettervorms van die 18de eeu tydens die oorgang van penne na penne met staalpunt. Dit is geen verrassing nie dat hierdie lettertipe die ouwêreldse sjarme uitstraal, maar met 'n moderne draai.
Bron Sans Pro druk dinge 'n bietjie verder in die toekoms in, en skep 'n interessante kombinasie wat versierd is terwyl dit steeds nuttig is.
Playfair-vertoning voeg 'n persoonlike aanraking by iets soos 'n tagline of produkbeskrywing. As u die kans het om sy ampersand- of valutasimbole te gebruik, sal u dadelik sien hoekom dit die perfekte keuse is vir 'n produk of diens gesentreer op luukse en voorkoms. Bron Sans Pro hou die teks gegrond op 'n moderne en skoon aanbieding.
Fjalla One is miskien nie die veelsydigste lettertipes nie, maar een ding wat dit uiters goed doen, is om nuusopskrifte te skep wat aandag vra. Klein of groot, klein of alle doppe, die letters is hipnoties, maak nie saak wat jy daarmee doen nie.
Noto Sans is daarop gemik om 'n universele lettertipe te wees waar dit, ongeag die taal, vertoon kan word sonder opmaakfoute vir gebruikers regoor die wêreld. Die estetiese lettertipe van die lettertipe is toepaslik, net soos die nut daarvan.
Blogs of bestemmingsbladsye sal baie goed wees vir hierdie paring – of regtig enigiets met lang teksgedeeltes wat merkbare onderopskrifte benodig om inhoud op te breek. Die universele aanpasbaarheid van Noto Sans maak dit ook 'n goeie keuse waar die bereiking van 'n internasionale gehoor 'n prioriteit is.
Alegreya het 'n sekere beroep wat vir my baie "aards" en vriendelik voel. Daar is geen voorgee oor sy persoonlikheid nie; wat jy sien is wat jy kry.
lato kon gee Sans oop 'n wins vir sy geld as die kampioen van alle doeleindes in die biblioteek van Google.
Saam sorg hulle vir 'n kombinasie wat lekker, maklik is om te lees en pragmaties is.
9. PT Sans Smal + PT Sans
'N Nuwe moderne styl van die Ou Wêreld, PT Sans en sy broers, PT Sans Smal, maak 'n onmiddellike en onmiskenbare stelling wanneer u dit in pare het.
Óf lettertipes werk ewe goed as 'n opskrif of 'n teks; die spesifieke paring wat u kies, sal afhang van die aard van u woorde – alhoewel ek geneig is om PT Sans Smalle te verkies in korter sarsies.
Bedoel as 'n 'baie belangrike hulpmiddel vir moderne digitale kommunikasie', lyk dit die geskikste om hierdie lettertipes te gebruik, hoewel beslis nie beperk nie, vir tegnologiese opstartprogramme, sagtewaretoepassings of ander digitale ondernemings..
Goed, hierdie een is beslis meer aan die lighartige kant. Dit is duidelik dat hierdie kombinasie nie vir almal werk nie, maar die snaakse aard van albei Amatic SC en Josefin Sans skep iets wat seker sal uitstaan ​​- net solank u versigtig is!
As u 'n prettige kunstenaar, musikant of entertainer is, kan hierdie lettertipe noodsaaklik wees om u unieke persoonlikheid vas te lê. Afhangend van die oorkoepelende toon en onderwerp, kan hierdie kombinasie ook vir 'n nisblog werk.
'N Woord van raad: moenie gebruik nie Amatic SC as u hoofliggaamsteks. U sal u lesers kranksinnig laat verdwyn.
Bonus: 5 van ons gunsteling premium lettertipes
Ons weet dat hierdie artikel oor die beste, trending Google-lettertipes handel, maar ons wou ook 'n paar van ons gunsteling premium-lettertipes noem. Uitstekende lettertipes is natuurlik nie gratis nie, maar dit gee u webwerf 'n meer unieke en pasgemaakte ontwerp. Hierdie lettertipes is nie gewild of neigend nie en is inderdaad die teenoorgestelde as ons hierbo gelys. Dit is egter ideaal vir diegene wat 'n pasgemaakte en gepersonaliseerde ontwerp vir hul handelsmerk wil hê en dit goed gaan as dit gebruik word vir logo's of selfs kreatiewe opskrifte:
Bonus 4: The Little Graphics Bundel
VINNIGE WENK: Premium lettertipes bied ontwerpers 'n kans om 'n tydlose ontwerp te bekom en word sterk aanbeveel vir logo's en handelsmerkidentiteit.
Waarom moet u Google-lettertipes gebruik??
Welkom by wat baie webontwerpers as hul beste vriend beskou. As ek uit ervaring praat, kan ek jou vertel dat ek selde meer lettertipe-lêers op webwerwe ingebed het. Google Fonts is nou byna uitsluitlik die eerste en laaste plek waarheen ek wend vir die tipografie van 'n webwerf. Dit is die rede waarom:
Dis heeltemal gratis. Maak nie saak hoeveel lettertipes jy kies of hoeveel webwerwe jy op dit gebruik nie. U sal nooit 'n sent betaal nie.
Vanaf Maart 2018 is daar meer as 850 lettertipes in die biblioteek. Die kans is goed dat u die regte styl vind om by u handelsnaam te pas.
Dis vinnig. Omdat die lettertipes op Google se bedieners aangebied word, word die lêers intelligent saamgepers en ontwerp om vinnig te laai.
Dis maklik. 'N Eenvoudige kopie en plak in 'n HTML-lêer en jy is klaar.
Dis georganiseer. Alle lettertipes word binne een databasis gekategoriseer en gesoek. U hoef nie meer deur morsige submappe op u rekenaar te soek om die perfekte lettertipe te vind nie.
Het ek dit genoem? vry? Dit is gratis!
Hoe om Google-lettertipes te installeer
Geen hoofpyn is hier nodig nie. Gaan net na Google-lettertipes en vind die lettertipe (s) wat u benodig.
As u u lettertipes kies, word hulle kumulatief onderaan die bladsy bygevoeg tot 'n versameling. As u klaar is met u soektog, klik op die onderste oortjie en 'n venster met inbed-instruksies verskyn.
Styles by te voeg
Van hier af kan u kies om addisionele stilering in te sluit, soos skuinsdruk, vetdruk, vetgedrukte skuinsdruk, ensovoorts. Klik net op die PASSEN tik en kies die style wat jy dink jy sal benodig.
Hier is byvoorbeeld hoe ek altwee sou kies gereelde en vet teks vir die lettertipe Khula.
Inbedding van die standaard of @Import?
U sal sien dat u twee opsies het om die lettertipes op u webwerf in te sluit: die gebruik van 'n standaard om op u werf gebruik te word HTML lêer, of a @import url om by u werf ingesluit te word CSS lêer. So watter een moet u gebruik?
Oor die algemeen is die beste opsie om die reël in u HTML-lêer. U lettertipes laai gewoonlik vinniger op hierdie manier eerder as om te wag vir die CSS-lêer om te laai, en hierdie metode het ook 'n bietjie beter ondersteuning vir (baie) ou blaaiers.
Waar om die kode te plaas
Jy gaan die reël kode wat Google jou gee, kopieer en plak in die gedeelte van u HTML-lêer. Dus, met die Khula-lettertipe wat ek hierbo gekies het, sal dit so lyk:
VINNIGE WENK: U kan ook fontstyle spesifiseer deur dit in die url uit te skryf, geskei deur kommas. Byvoorbeeld: "https://fonts.googleapis.com/css?family=Khula:bold, italic, bolditalic"
Gebruik die lettertipe in u stylblad
Nou moet u die lettertipe eenvoudig soos gewoonlik binne u aanroep CSS kode. Vir demonstrasiedoeleindes kan u hoofopskrif en paragrapteks soos volg lyk:
VINNIGE WENK: Maak seker dat u 'n terugslag-lettertipe soos 'serif', 'sans-serif' of 'n soortgelyke webveilige lettertipe insluit, in die seldsame geval dat u Google Font nie laai nie..
Advies oor die koppeling van u lettertipes
Besluit watter lettertipes om saam te groepeer, kan soms 'n moeilike artistieke balans wees. Aan die een kant is u keuse van lettertipes die doeltreffendste as daar genoeg kontras in style is; elke lettertipe op u webwerf moet van die ander uitstaan ​​en 'n regverdiging vir die gebruik daarvan verdien. Aan die ander kant, wil u nie hê dat u lettertipes te ver van mekaar af wegtrek nie, wat die indruk kan skep dat hulle lukraak gekies is.
VINNIGE WENK: Dink aan watter emosie of idee 'n spesifieke lettertipe ontlok. Probeer dit koppel met 'n ander lettertipe wat dieselfde emosie of idee ontlok. Dit gaan alles oor die vind van die regte lettertipes wat met u unieke handelsmerk spreek. U sal dit inherent weet as 'n lettertipe vir u handelsnaam voel of dit gemengde seine gee.
'N Bewese metode is om 'n serif-lettertipe met 'n sans-serif-een te koppel. Hul style is geneig om goed teen mekaar te kontrasteer, wat 'n maklike onderskeid tref tussen opskrifte en paragrawe.
Eksperimentering is die sleutel
As ek lettertipes kies vir 'n nuwe webwerf, laai ek graag alle moontlike Google Font-opsies op my rekenaar en speel daarmee in 'n woordverwerkingsdokument. Kuier met verskillende groottes en gewigte en die kombinasies langs mekaar is 'n effektiewe manier om die beste moontlike paring te bepaal. Deur die tyd te neem om te eksperimenteer, kan u selfs agterkom dat u die volgende gebruik: dun variasie van 'n gegewe lettertipe sorg vir beter kopteks as as u 'n heeltemal aparte lettertipe sou gebruik. (Die eenvoudigste oplossing is dikwels die beste.)
Google-lettertipes is 'n kragtige bron vir selfversorgers wat nie wil betaal vir duur persoonlike lettertipes op hul webwerf nie. Maar met groot krag is daar 'n groot verantwoordelikheid: tipografie vereis noukeurig om goed te laat werk, en nie elke lettertipe daarbuite is 'n wenner nie. Ons hoop dat hierdie gids u help om u in die regte rigting te stuur en u te inspireer om die perfekte lettertipe-paring te vind om u handelsmerk se persoonlikheid vas te lê.