10 fantasztikus Google betűtípus-kombináció, amelyek 2020-ban népszerűek

A Google Fonts által kézzel válogatott divatos betűtípusok listája, amelyek jól párosulnak egymással, és hogyan telepíthetők webhelyükre.


A legjobb Google Betűtípus-kombinációk

A webhely tipográfia a mai napig sokkal rejtélyesebb tervezési gyakorlat volt. A weboldal egyedi betűkészletekkel történő díszítésének bonyolult folyamatához a felhasználói szerveren tárolt betűkészletek konvertálása és beágyazása szükségessé tette a rendelkezésre álló betűkészletek választását, és a rendelkezésre álló betűkészletek választása a felhasználó saját gyűjteményére vagy a tipográfia ismeretére korlátozódott, a szabványos rendszer betűkészletein kívül. Ennek eredményeként a legtöbb weboldal tartalmi formázásukban szinte azonosnak tűnt, amely sok túlzottan használt és földrajzi támaszkodásra támaszkodott webes biztonságos betűtípusok.

Mindez 2010 – ben megváltozott a Google betűtípusok, egy nyílt forráskódú projekt, amely lehetővé teszi az egyedi betűkészletek sokkal könnyebb megvalósítását a webhelyeken. Ezeknek a betűkészleteknek a telepítése a saját webhelyére szerencsére gyors és egyszerű folyamat, de tudnia kell, hogy a Google könyvtárában nem minden betűtípus-kombináció a tipográfiai siker receptje. A megfelelő betűkészlet-párosítással és a felhasználási szempontokkal azonban online márkája professzionalitást, szépséget és olvasóbarátságot idézhet elő drága, testreszabott betűkészletek nélkül. Ebben a cikkben megmutatom, hogyan lehet mindezt megvalósítani.

A 10 felkapott Google betűtípus-kombináció listája

Menjünk hozzá! Nincs konkrét sorrend, itt van a 10 legjobb Google-betűtípus-kombináció, amelyek jelenleg trendben vannak:

1. Open Sans Condensed + Open Sans

A Google betűtípus-kombinációja - Open Sans Condensed and Open Sans

Ez egy egyszerű kombináció, amely csodákat kínál szinte bármilyen alkalmazható alkalmazáshoz. Nyissa meg a Sans-t az egyik – ha nem a – a legszélesebb körű betűtípusok a Google Fonts teljes gyűjteményében. Rendkívül könnyen olvasható nagy szövegtömbökben, miközben még mindig feltűnő a címsor számára.

Egyszerű. Kifinomult. Ismerős. Nem baj lehetsz!

Valós felhasználás

Nem tudom előre látni egy forgatókönyvet Nyissa meg a Sans-t rossz választás lenne. Hacsak nem kifejezetten szerif betűtípust keres, úgy gondolom, hogy ez legjobban tökéletesen kiszolgálja az üzleti vállalkozásokat, blogokat, céloldalakat vagy webes alkalmazásokat.

2. Oswald + EB Garamond

Népszerű Google betűtípus-kombináció - Oswald és EB Garamond

Oswald kiváló betűtípus a címsorokhoz, függetlenül a betűsúlytól vagy a sapkák használatától. Sűrített természete segít felhívni a figyelmet és a pop-upot, de kellemesen egyedi szöveget eredményez, mint a fő törzs betűtípusa.

EB Garamond a klasszikus Garamond betűtípus elegáns frissítése. Azonnal felismerhető és időtlen megjelenésű, ez a betűtípus jellegzetes professzionalizmust ad ki tipográfiájában.

Valós felhasználás

Ez a párosítás jól működik a csúcskategóriás ügyfelekkel foglalkozó szakemberek számára, például ügyvédek, ingatlanügynökségek vagy akár előkelő butikok számára. A sokoldalúság Oswald és a klasszikus megjelenése EB Garamond készítsen nagyszerű termékleírást, ahol fontos hangsúlyozni egy prémium minőségű terméket.

3. Montserrat + Merriweather

Népszerű Google betűtípus-kombináció - Montserrat és Merriweather

Montserrat – sokoldalúságának és egyszerűségének köszönhetően a tervezők körében kedvenc, és – Merriweather csodálatosan párosul kontrasztos stílusával és könnyű olvashatóságával. Nyugodtan cserélje őket címsorként vagy bekezdésszövegként – mindkettő nagyszerűen működik!

Valós felhasználás

Ez a különleges kombináció a modern és a klasszikus formatervezés jó egyensúlya. Mint ilyen, a változatossága sokféle vállalkozást támogathat. Személy szerint úgy érzem, hogy ezek a betűtípusok jó lenne minden típusú online hírforrás vagy kiadói iroda számára.

4. Roboto vékony + rendszeres robot

Népszerű Google betűtípus-kombináció - vékony Roboto és a Roboto Regular

Az Roboto A font-család személyes kedvence, és ezt is használja itt a How To Get Online oldalon. Rendkívül sokoldalú, széles betűméretekkel, gyakorlatilag nincs korlátozás arra, hogy a betűtípust mi lehet használni. A modern és geometriai, mégis valaha barátságos és megbízható Roboto forma és funkció csodája.

Valós felhasználás

Itt van egy másik párosítás, amelyre nehezen szorítkozhat, hogy rossz felhasználást találjon. Míg Roboto szinte bármi számára működik, azt hiszem, hogy ez különösen nagyszerű a start-up vállalkozások számára, a modern kisvállalkozások számára vagy a jövő szempontjából bármilyen típusú márkához..

5. Raleway + Roboto lemez

Népszerű Google betűtípus-kombinációk - Raleway a Roboto Slab-tal

Ez a barátunk Roboto újra! Ezúttal azonban a serif változatát vizsgáljuk, Roboto lemez. Ez egy olyan betűtípus, amely ugyanolyan sokoldalú, mint az unokatestvére, de kissé klasszikusabb stílusban. Ha párosul a megkülönböztető és merész Raleway, lenyűgöző mérkőzésünk van a tiszta és kifinomult tipográfiával.

Valós felhasználás

Raleway egyike azoknak a betűtípusoknak, amelyek a kifinomultságot sikítják. Ha úgy gondolom, hogy sokoldalú címsorként használják, akkor szépen működik olyan luxuscikkekben, mint ékszerek, designer ruhák vagy hasonlóan előkelő e-kereskedelmi termékek.. Roboto lemez jól támogatja az egyszerű és megközelíthető leíró szöveggel.

Mindkettő felváltva működik. Próbáljon ki különböző súlyváltozásokat mind a betűtípusokhoz a címsorokban, mind a törzsszövegben, és nézze meg, melyik párosítás vonzza a legjobban a márkát.

6. Playfair Display + Source Sans Pro

Népszerű Google betűtípus-kombináció - Playfair megjelenítés a Source Sans Pro-val

A tervező szerint, Playfair kijelző inspirálta a 18. század levél formáit, a tollak és acél hegyű tollak átalakulása során. Nem meglepő, hogy ez a betűtípus a régi világ varázsát sugárzza, de egy modern pörgetéssel.

Forrás Sans Pro tovább tolja a dolgokat a jövőbe, létrehozva egy érdekes kombinációt, amely díszes, de még mindig utilitárius.

Valós felhasználás

Playfair kijelző személyes kapcsolatot ad hozzá valamihez, mint például címke vagy termékleírás. Ha van esélye arra, hogy használja a nagybetűs vagy pénznemszimbólumait, azonnal meglátja, hogy miért ez a tökéletes választás egy olyan termék vagy szolgáltatás számára, amely a luxus és a megjelenés köré koncentrálódik.. Forrás Sans Pro megtartja a szöveget egy modern és tiszta prezentációban.

7. Fjalla One + Noto Sans

Népszerű Google betűtípus-kombináció - Fjalla One és Noto Sans

Fjalla One Lehet, hogy nem a legszélesebb körű betűtípus, de az egyik dolog, ami rendkívül jól működik, az a figyelemfelhívást igénylő címsorok létrehozása. Kicsi vagy nagy, kis- vagy nagybetűk, ezek a betűk hipnotikusak, függetlenül attól, hogy mit csinálsz velük.

Noto Sans célja egy valóban univerzális betűtípus létrehozása, ahol a nyelvtől függetlenül megjeleníthető formázási hibák nélkül a felhasználók számára az egész világon. Megfelelően a betűtípus esztétikája ugyanolyan sokoldalú, mint hasznossága.

Valós felhasználás

A blogok vagy a nyitóoldalak nagyszerűek lennének ehhez a párosításhoz – vagy akármi, ami hosszú szöveges szövegekkel rendelkezik, amelyek észrevehető alcímeket igényelnek a tartalom felbontásához. A Noto Sans egyetemes alkalmazkodóképessége szintén jó választást jelent, ha a nemzetközi közönség elérése prioritás.

8. Alegreya + Lato

Népszerű Google betűtípus-kombináció - Alegreya és Lato

Alegreya van egy bizonyos vonzereje, amely nagyon “földes” és barátságos. Személyiségét nem állítják be; azt kapod amit látsz.

Lato tudna adni Nyissa meg a Sans-t pénzért fizetett pénz, mint a Google könyvtárában található univerzális betűtípusok bajnoka.

Együtt készítik a kombinációt, amely szórakoztató, könnyen olvasható és gyakorlati.

9. PT Sans keskeny + PT Sans

Népszerű Google betűtípus-kombináció - PT Sans Keskeny és PT Sans

Egy másik modern viselet egy régi világ stílusa, PT Sans és testvérei, PT Sans Keskeny, azonnali és félreérthetetlen nyilatkozatot tesznek, ha párba kerülnek.

Valós felhasználás

Bármelyik betűkészlet ugyanolyan jól működik, mint a címsor vagy a szöveg; az Ön által választott párosítás a szavak jellegétől függ – bár inkább a PT Sans Narrow-ot részesítjük előnyben rövidebb sorozatokban.

A „modern digitális kommunikáció nagyon fontos eszközének” szánták a legmegfelelőbbnek, bár – természetesen nem korlátozva ezeknek – a betűkészletek technológiai indulásokhoz, szoftveralkalmazásokhoz vagy más digitális vállalkozásokhoz történő használatához..

10. Amatikus SC + Josefin Sans

Népszerű Google betűtípus-kombináció - Amatikus SC és Josefin

Oké, ez határozottan inkább a kedves oldalról szól. Ez a kombináció nyilvánvalóan nem mindenki számára elérhető, de mindkettő szeszélyes jellege Amatic SC és Josefin Sans készítsen valamit, amely biztosan kiemelkedik – mindaddig, amíg óvatosan jár!

Valós felhasználás

Ha szórakoztató művész, zenész vagy szórakoztató vagy, akkor ez a betűtípus alapvető fontosságú lehet egyedi személyiségének megragadásában. Az átfogó hangjelzéstől és a témától függően ez a kombináció egy niche blog számára is működhet.

Egy tanács: Nem szabad használni Amatic SC mint a törzs szövege. Őrülten fogja vezetni az olvasóit.

Bónusz: 5 a Kedvenc Prémium Betűtípusunkból

Tudjuk, hogy ez a cikk a legjobb, leginkább felkapott Google betűtípusokról szól, de bónuszként szeretnénk megemlíteni néhány kedvenc prémium betűkészletünket. A prémium betűtípusok természetesen nem ingyenesek, ám ezek mégis egyedi és egyedi megjelenést biztosítanak webhelyének. Ezek a betűtípusok nem népszerűek és nem trendek, és valóban ellentétesek a fentebb felsoroltakkal. Ezek azonban nagyszerűek azok számára, akik egyéni és személyre szabott formatervezést akarnak a márkájukhoz, és jól működnek, ha logókra vagy akár kreatív címsorokra használják:

1. bónusz: A Mega kézműves csomag X

2. bónusz: a Valentin-csomag

3. bónusz: A hűvös betűkészlet

4. bónusz: A kis grafikai csomag

5. bónusz: féltékeny

GYORS TIPP: A prémium betűtípusok lehetőséget adnak a tervezőknek időtlen tervezés elérésére, és erősen ajánlották a logók és a márka identitás szempontjából.

Miért érdemes a Google betűkészleteket használni??

Üdvözöljük abban, amit sok webdesigner tart a legjobb barátjának. A tapasztalatok alapján elmondhatom, hogy már ritkán ágyazom be az egyedi betűkészlet fájlokat a weboldalakba. A Google Fonts most már szinte kizárólag az első és az utolsó hely, ahova fordulok egy webhely tipográfiájához. Ez az oka annak:

  • ez teljesen ingyenes. Nem számít, hány betűtípust választ, vagy hány webhelyen használja őket. Soha nem fogsz fizetni egy fillért sem.
  • 2018. március óta vannak több mint 850 betűtípus a könyvtárban. Valószínű, hogy megtalálja a megfelelő stílust, amely megfelel a márkájának.
  • ez gyors. Mivel a betűkészleteket a Google szerverein tárolják, a fájlok intelligensen vannak tömörítve és úgy vannak megtervezve, hogy gyorsan betöltsék őket.
  • ez könnyen. Egy egyszerű másolás és beillesztés egy HTML fájlba, és kész.
  • ez szervezett. Az összes betűkészlet kategóriába sorolható és egy adatbázisban kereshető. Többé nem súrolhatja meg a számítógép rendetlen almappáit, hogy megtalálja ezt a tökéletes betűtípust.
  • Megemlítettem ingyenes? Ez ingyenes!

A Google Betűkészletek telepítése

Nincs szükség fejfájásra itt. Csak menj ide Google betűtípusok és keresse meg a kívánt betűtípust.

Amint kiválasztja a betűkészleteket, azokat összesen hozzáadják az oldal alján található gyűjteményhez. Ha befejezte a keresést, kattintson az alsó fülre, és megjelenik egy beágyazási utasításokat tartalmazó ablak.

Stílusok hozzáadása

Itt választhat további stílusokat, például dőlt, félkövér, félkövér szelvényt és így tovább. Csak kattintson a TESTRESZAB fülre, és válassza ki azokat a stílusokat, amelyekre szükséged lesz.

Például itt van, hogyan válasszuk ki mindkettőt szabályos és bátor a betűtípus szövege Khula.

Betűstílus hozzáadása a Google Betűtípusokhoz

A Standard vagy a @Import beágyazása?

Észre fogja venni, hogy kétféle lehetősége van a betűtípusok beágyazására a webhelyén: egy standard használatával a webhelyén való felhasználásra HTML fájl, vagy a @import URL hogy szerepeljen a webhelyén CSS fájlt. Szóval melyiket használja??

Általában a legjobb megoldás az, hogy a lépjen be a HTML-fájlba. Betűtípusaik általában gyorsabban töltődnek be, ahelyett, hogy várnának a CSS-fájl betöltésére, és ez a módszer egy kicsit jobban támogatja a (nagyon) régi böngészőket.

Hol tegye a kódot

Másolja be és illessze be a Google által megadott kód sorát a szakaszában a HTML fájl. Tehát a fent választott Khula betűtípus használatával így néz ki:

GYORS TIPP: Megadhatja a betűstílusokat is úgy, hogy kiírja azokat az URL-ben, vesszővel elválasztva. Például: “https://fonts.googleapis.com/css?family=Khula:félkövér, dőlt, Bold

A betűkészlet használata a stíluslapon

Most egyszerűen hívja be a betűtípust, mint általában CSS kód. Demonstrációs célokra a fő címsor és a bekezdések szövege a következőképpen nézhet ki:

h1 {
betűtípus-család: „Khula”, sans-serif;
betűsúly: 700;
betűméret: 48 képpont;
}
p {
betűtípus-család: „Khula”, sans-serif;
betűsúly: 400;
betűméret: 16 képpont;
}

GYORS TIPP: Győződjön meg arról, hogy tartalmaz egy tartalék betűtípust, például „serif”, „sans-serif” vagy hasonló internetes biztonságos betűtípust abban a ritka esetben, ha a Google betűkészlete nem töltődik be.

Tanácsok a betűkészlet párosításához

Annak eldöntése, hogy mely betűtípusokat csoportosítsák, néha trükkös művészeti egyensúlyt jelenthet. Egyrészt a betűkészlet-kiválasztás akkor lesz a leghatékonyabb, ha elegendő a kontraszt a stílusban; a webhely minden betűkészletének meg kell különböznie a többitől, és igazolnia kell használatát. Másrészt, nem akarja, hogy a betűtípusok stilisztikailag túl távol álljanak egymástól, ami azt a benyomást keltheti, hogy véletlenszerűen választották meg őket.

GYORS TIPP: Gondoljon arra, milyen érzelmeket vagy ötleteket idéz elő egy adott betűtípus. Próbáljon párosítani egy másik betűtípussal, amely ugyanazt az érzetet vagy ötletet idézi elő. Arról szól, hogy megtalálják a megfelelő betűkészleteket, amelyek beszélnek az Ön egyedi márkájával. Természetesen akkor fogja tudni, ha egy betűtípus úgy érzi, mint a márkája, vagy vegyes jeleket ad.

Serif és Sans-Serif

Egy kipróbált módszer egy serif betűtípus párosítása a sans-serif betűtípussal. Stílusuk általában jól ellentétes egymással, könnyű különbséget tenni a címsor és a bekezdések között.

A kísérlet kulcsfontosságú

Amikor új webhely betűkészleteit választom, szeretnék letölteni az összes lehetséges Google Font beállítást a számítógépre, és játszani velük egy szövegszerkesztő dokumentumban. Különböző méretű és súlyú hűtés, valamint a kombinációk egymáshoz történő összehasonlítása hatékony módszer a lehető legjobb párosítás meghatározására. Ha időt vesz igénybe a kísérletre, azt is felfedezheti, hogy a vékony Egy adott betűtípus variációja jobb címsort eredményez, mintha egy teljesen különálló betűtípust használnának. (A legegyszerűbb megoldás gyakran a legjobb.)

Következtetés

A Google Fonts erőteljes forrás azoknak a barkácsnokoknak, akik nem akarnak fizetni a drága egyedi betűtípusokért webhelyükön. De nagy hatalommal jár a nagy felelõsség: a tipográfia gondos átgondolását követeli meg, hogy ez megfelelõen megtörténjen, és nem minden betûkészlet van nyertes. Reméljük, hogy ez az útmutató segít a helyes irányba vezetni, és arra ösztönzi Önt, hogy megtalálja a tökéletes betűkészlet-összekapcsolást a márka személyiségének megragadására.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me