10 Awesome Google Font Combinations Trending in 2021

A Google Fonts-ból kézzel válogatott trendi betűtípusok listája, amelyek jól illenek egymáshoz, és hogyan telepítheted őket a weboldaladra.

• Article by Jason Beever
• Updated:
• Címkék: tipográfia, webdesign

A honlapok tipográfiája régen sokkal misztikusabb tervezési gyakorlat volt, mint manapság. A weboldal egyéni betűtípusokkal való díszítésének bonyolult folyamata egykor a felhasználó szerverén elhelyezendő betűtípusfájlok konvertálását és beágyazását igényelte, és a rendelkezésre álló betűtípusok választéka a felhasználó saját gyűjteményére vagy a szabványos rendszerbetűtípusokon kívüli tipográfiai ismeretekre korlátozódott. Ennek eredményeképpen a legtöbb weboldal tartalmi formázása szinte egyformán nézett ki, ami számos túlhasznált és hétköznapi, biztonságos webes betűtípusra támaszkodott.

Ez mind megváltozott 2010-ben, amikor megjelent a Google Fonts, egy nyílt forráskódú projekt, amely lehetővé teszi az egyéni betűtípusok sokkal egyszerűbb implementálását a weboldalakon. Ezeknek a betűtípusoknak a saját webhelyre történő telepítése szerencsére gyors és egyszerű folyamat, de tisztában kell lennie azzal, hogy nem minden betűtípus-kombináció a Google könyvtárában a tipográfiai siker receptje. A megfelelő betűtípus-párosításokkal és használati megfontolásokkal azonban online márkája professzionalizmust, szépséget és olvasóbarátságot sugározhat anélkül, hogy drága egyedi betűtípusokra lenne szüksége. Ebben a cikkben megmutatom, hogyan érheti el mindezt.

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

Lássunk hozzá! Különösebb sorrend nélkül, íme a 10 legjobb, jelenleg trendi Google Font kombináció:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Itt egy egyszerű kombináció, amely szinte bármilyen alkalmazható felhasználásra csodákat művel. Az Open Sans az egyik – ha nem a legsokoldalúbb – betűtípus a Google betűtípusok teljes gyűjteményében. Rendkívül könnyen olvasható nagy szövegtömbökben, ugyanakkor elég feltűnő a főcímekhez.

Egyszerű. Kifinomult. Ismerős. Nem tévedhetsz!

Világbeli használat

Nem tudok olyan forgatókönyvet elképzelni, amelyben az Open Sans rossz választás lenne. Hacsak nem kifejezetten szerif betűtípust keresel, szerintem ez a betűtípus szinte minden üzleti vállalkozás, blog, landing page vagy webes alkalmazás számára tökéletesen megfelel.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Az Oswald nagyszerű betűtípus a főcímekhez, függetlenül a betűsúlytól vagy a nagybetűk használatától. Sűrített jellege segíti a figyelemfelkeltést és a feltűnést, de a főszöveg betűtípusaként is kellemesen egyedi szöveget eredményez.

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

Real-World Use

Ez a párosítás jól működik a magas színvonalú ügyfélkörrel foglalkozó szakemberek, például ügyvédek, ingatlanügynökségek vagy akár előkelő butikok számára. Az Oswald sokoldalúsága és az EB Garamond klasszikus megjelenése nagyszerű termékleíró szöveget alkot, ahol fontos kiemelni egy prémium minőségű terméket.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

A Montserrat sokoldalúsága és egyszerűsége miatt a tervezők kedvence, a Merriweather pedig kontrasztos stílusával és könnyű olvashatóságával remekül párosul. Bátran cserélje fel őket címszóként vagy bekezdésszövegként – mindkettő remekül működik!

Real-World Use

Ez a különleges kombináció a modern és a klasszikus dizájn szép egyensúlya. Mint ilyen, változatos felhasználási lehetőségei számos vállalkozástípust támogathatnak. Személy szerint úgy érzem, hogy ezek a betűtípusok bármilyen típusú online hírforrás vagy kiadói ügynökség számára jól megállnák a helyüket.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

A Roboto betűtípus az egyik személyes kedvencem, és mi is ezt használjuk itt a How To Get Online-on. Rendkívül sokoldalú, a betűsúlyok széles skálájával gyakorlatilag nincs korlátja annak, hogy mire lehet használni a betűtípust. Modern és geometrikus, mégis valahogy barátságos és megbízható marad, a Roboto a forma és a funkció csodája.

Real-World Use

Itt egy másik párosítás, amelynek nehéz lenne rossz felhasználási módot találni. Bár a Roboto szinte bármihez használható, szerintem különösen nagyszerű a technológiai start-upok, a modern kisvállalkozások vagy bármilyen típusú, a jövőbe tekintő márka számára.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

Itt van újra Roboto barátunk! Ezúttal azonban a szerif variációt, a Roboto Slab-ot nézzük meg. Ez a betűtípus ugyanolyan sokoldalú, mint unokatestvére, mégis egy kicsit klasszikusabb stílusú. A jellegzetes és merész Raleway-vel párosítva a tiszta és kifinomult tipográfia csodálatos párosítását kapjuk.

Real-World Use

A Raleway egyike azoknak a betűtípusoknak, amelyek kifinomultságot sugároznak. Ha csupa nagybetűs főcímként használják, szerintem gyönyörűen működik olyan luxuscikkeknél, mint az ékszerek, a designer ruhák vagy hasonlóan előkelő e-kereskedelmi termékek. A Roboto Slab jól támogatja egyszerű és megközelíthető leíró szöveggel.

Mindkettő felváltva is használható. Próbálja ki mindkét betűtípus különböző súlyváltozatait a címsorokban és a törzsszövegben, és nézze meg, melyik párosítás ragadja meg legjobban a márkáját.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

A tervezője szerint a Playfair Display-t a 18. századi betűformák ihlették a tollakról az acélhegyű tollakra való áttérés során. Nem meglepő tehát, hogy ez a betűtípus a régi világ báját sugározza, de modern felhanggal.

A Source Sans Pro egy kicsit beljebb tolja a dolgokat a jövőbe, és egy érdekes kombinációt hoz létre, amely díszes, de mégis használati célú.

Világbeli felhasználás

A Playfair Display személyes jelleget kölcsönöz például egy szlogenhez vagy termékleíráshoz. Ha van alkalma használni az ampersand vagy a valuta szimbólumait, azonnal látni fogja, miért tökéletes választás egy olyan termék vagy szolgáltatás számára, amelynek középpontjában a luxus és a külsőségek állnak. A Source Sans Pro a modern és letisztult megjelenítésben tartja a szöveget a földön.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

A Fjalla One talán nem a legsokoldalúbb betűtípus, de egy dolgot rendkívül jól csinál, mégpedig olyan főcímeket, amelyek figyelmet követelnek. Kicsi vagy nagy, kisbetűs vagy csupa nagybetű, ezek a betűk hipnotikusak, bármit is csinálsz velük.

A Noto Sans célja, hogy egy igazán univerzális betűtípus legyen, ahol nyelvtől függetlenül formázási hibák nélkül megjeleníthető a felhasználók számára világszerte. Ennek megfelelően a betűtípus esztétikája ugyanolyan sokoldalú, mint a hasznossága.

Real-World Use

Blogok vagy céloldalak nagyszerűek lennének erre a párosításra – vagy tényleg bármi, ami hosszú szövegrészeket tartalmaz, és feltűnő alcímeket igényel a tartalom megtöréséhez. A Noto Sans univerzális alkalmazkodóképessége is jó választássá teszi ott, ahol a nemzetközi közönség elérése a prioritás.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya bizonyos vonzereje van, amit nagyon “földhözragadtnak” és barátságosnak érzek. A személyiségében nincs semmi mesterkéltség; amit látsz, azt kapod.

A Lato az Open Sansnak adhatná a versenyt a Google könyvtárában az univerzális betűtípusok bajnokaként.

A kettő együtt olyan kombinációt alkot, amely szórakoztató, könnyen olvasható és gyakorlatias.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

A PT Sans és testvérei, a PT Sans Narrow, a régi világ stílusának egy másik modern változata, a PT Sans és testvérei, a PT Sans Narrow, azonnal és félreérthetetlenül hatnak együtt.

Világbeli használat

Mindkét betűtípus egyformán jól használható főcímként vagy főszövegként; a választott párosítás a szavak jellegétől függ – bár én rövidebb betűkben inkább a PT Sans Narrow-t részesítem előnyben.

A modern digitális kommunikáció “nagyon fontos eszközének” szánták, és úgy tűnik, hogy ezek a betűtípusok leginkább alkalmasak – bár természetesen nem kizárólag – technológiai startupok, szoftveralkalmazások vagy más digitális vállalkozások számára.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Oké, ez határozottan inkább a könnyedebb oldalon áll. Nyilvánvaló, hogy ez a kombináció nem fog mindenkinél működni, de mind az Amatic SC, mind a Josefin Sans szeszélyes jellege olyan betűtípust hoz létre, amely biztosan kiemelkedik – feltéve, hogy óvatos vagy!

Világi felhasználás

Ha vidám hangulatú művész, színész, zenész vagy előadóművész vagy, akkor ez a betűtípus alapvető fontosságú lehet egyedi személyiséged megragadásában. Az átfogó hangnemtől és témától függően ez a kombináció egy hiánypótló blog esetében is működhet.

Egy jó tanács: Ne használd az Amatic SC-t fő szövegként. Az őrületbe kergeted az olvasóidat.

Bónusz: 5 kedvenc prémium betűtípusunk

Tudjuk, hogy ez a cikk a legjobb, trendi Google betűtípusokról szól, de bónuszként meg akartunk említeni néhány kedvenc prémium betűtípusunkat is. A prémium betűtípusok természetesen nem ingyenesek – de egyedibb és személyre szabottabb dizájnt adnak a weboldaladnak. Ezek a betűtípusok nem népszerűek vagy trendiek, és valóban az ellentétei a fent felsoroltaknak. Ezek azonban nagyszerűek azok számára, akik egyedi és személyre szabott dizájnt szeretnének a márkájukhoz, és jól használhatóak logókhoz vagy akár kreatív fejlécekhez is:

Bónusz 1: The Mega Craft Bundle X

Bónusz 2: The Valentine’s Bundle

Bónusz 3: The Cool Font Bundle

Bónusz 4: The Little Graphics Bundle

Bónusz 5: Jealous

Miért érdemes a Google betűtípusokat használni?

Köszöntöm, amit sok webdesigner a legjobb barátjának tekint. Tapasztalatból mondhatom, hogy már ritkán ágyazok be egyéni betűtípusfájlokat weboldalakra. A Google Fonts most már szinte kizárólag az első és utolsó hely, ahová egy weboldal tipográfiájával kapcsolatban fordulok. Íme, miért:

• Teljesen ingyenes. Nem számít, hány betűtípust választasz, vagy hány weboldalon használod őket. Soha egy fillért sem fog fizetni.
• 2018 márciusában több mint 850 betűtípus van a könyvtárban. Nagy az esélye, hogy megtalálja a márkájának megfelelő stílust.
• Gyors. Mivel a betűtípusokat a Google szerverein tárolják, a fájlok intelligens módon tömörítettek és úgy vannak kialakítva, hogy gyorsan betöltődjenek.
• Egyszerű. Egy egyszerű másolás és beillesztés egy HTML-fájlba, és máris kész.
• Rendezett. Minden betűtípus kategorizálva és kereshető egy adatbázisban. Nem kell többé rendetlen almappákat átkutatnia a számítógépén, hogy megtalálja a tökéletes betűtípust.
• Mondtam már, hogy ingyenes? Ingyenes!

How to Install Google Fonts

Nincs szükség fejfájásra. Csak menj a Google Fonts oldalra, és keresd meg a szükséges betűtípus(oka)t.

Amint kiválasztod a betűtípusokat, azok halmozottan kerülnek az oldal alján található gyűjteménybe. Ha befejezte a keresést, kattintson erre az alsó fülre, és megjelenik egy ablak a beágyazási utasításokkal.

Stílusok hozzáadása

Itt választhat további stílusjegyeket, például dőlt betűt, félkövér betűt, vastag betűt és így tovább. Csak kattintson a CUSTOMIZE fülre, és válassza ki azokat a stílusokat, amelyekre úgy gondolja, hogy szüksége lesz.

Itt van például, hogy a Khula betűtípushoz a normál és a félkövér szöveget is kiválasztom.

A szabvány vagy az @Import beillesztése?

Láthatod, hogy két lehetőséged van a betűtípusok beágyazására a webhelyeden: egy szabványos <link href> használatával, amelyet a webhelyed HTML fájljában kell használni, vagy egy @import url-t, amelyet a webhelyed CSS fájljába kell beilleszteni. Tehát melyiket használd?

Általában a legjobb megoldás a <link href> sor másolása és beillesztése a HTML fájlodba. A betűtípusok általában gyorsabban töltődnek be így, mintha a CSS fájl betöltésére várnál, és ez a módszer egy kicsit jobban támogatja a (nagyon) régi böngészőket is.

Hová tegyük a kódot

A Google által megadott kódsort másold be a HTML fájlod <head> szakaszába. Tehát a fentebb választott Khula betűtípust használva így fog kinézni:

A betűtípus használata a stíluslapodban

Ezután egyszerűen a szokásos módon hívod meg a betűtípust a CSS-kódodban. Bemutató jelleggel a főcím és a bekezdés szövege így nézhet ki:

Tanácsok a betűtípusok párosításához

A betűtípusok csoportosításának eldöntése néha trükkös művészi egyensúlyt jelenthet. Egyrészt a betűtípusok kiválasztása akkor lesz a leghatékonyabb, ha a stílusok között elég nagy a kontraszt; az oldaladon minden betűtípusnak ki kell tűnnie a többi közül, és indokolnia kell a használatát. Másrészt nem szeretné, ha a betűtípusok stilisztikailag túlságosan eltávolodnának egymástól, ami azt a benyomást kelthetné, hogy véletlenszerűen választották ki őket.

Serif és Sans-Serif

Egy bevált módszer, ha egy serif betűtípust egy sans-serif betűtípussal párosít. Stílusuk általában jól kontrasztos, így könnyen megkülönböztethetők a címsorok és a bekezdések.

A kísérletezés a kulcs

Amikor egy új weboldalhoz választok betűtípusokat, szeretem letölteni az összes lehetséges Google Font opciót a számítógépemre, és játszani velük egy szövegszerkesztési dokumentumban. A különböző méretekkel és súlyokkal való babrálás és a kombinációk egymás melletti összehasonlítása hatékony módja a lehető legjobb párosítás meghatározásának. Ha időt szán a kísérletezésre, még azt is felfedezheti, hogy egy adott betűtípus vékonyabb variációjának használata jobb főcímszöveget eredményez, mintha egy teljesen különálló betűtípust használna. (A legegyszerűbb megoldás gyakran a legjobb.)

Következtetés

A Google Fonts egy hatékony forrás a barkácsolók számára, akik nem akarnak drága egyéni betűtípusokért fizetni a weboldalukon. A nagy hatalommal azonban nagy felelősség is jár: a tipográfia alapos átgondolást igényel ahhoz, hogy jól végezzük, és nem minden betűtípus nyerő. Reméljük, hogy ez az útmutató segít a helyes irányba terelni Önt, és arra inspirálja, hogy megtalálja azt a tökéletes betűtípus-párost, amely megragadja márkája személyiségét.