10 úžasných kombinací písem Google trendových v roce 2021

Seznam módních písem ručně vybraných z Google Fonts, která se dobře kombinují, a návod, jak je nainstalovat na své webové stránky.

• Článek od Jason Beever
• Aktualizováno: 2. ledna 2020
• Štítky: typografie, webdesign

Typografie webových stránek bývala kdysi ještě záhadnějším designovým postupem než dnes. Složitý proces zdobení webové stránky vlastními písmy kdysi vyžadoval konverzi a vložení souborů písem, které měly být umístěny na serveru uživatele, a výběr dostupných písem byl omezen na vlastní sbírku nebo znalosti typografie mimo standardní systémová písma. Výsledkem bylo, že většina webových stránek vypadala téměř identicky, pokud jde o formátování obsahu, které se opíralo o mnoho nadužívaných a všedních webových bezpečných písem.

To vše se změnilo v roce 2010, kdy byl uvolněn projekt Google Fonts, který je otevřeným zdrojem a umožňuje mnohem jednodušší implementaci vlastních písem na webové stránky. Instalace těchto písem na vlastní webové stránky je naštěstí proces, který je rychlý a snadný, ale měli byste si uvědomit, že ne každá kombinace písem v knihovně Google je receptem na typografický úspěch. Díky správným dvojicím písem a úvahám o jejich použití však může vaše online značka vyzařovat profesionalitu, krásu a přívětivost pro čtenáře, aniž byste potřebovali drahá vlastní písma. V tomto článku vám ukážu, jak toho všeho dosáhnout.

Seznam 10 trendových kombinací písem Google

Pustíme se do toho! V žádném konkrétním pořadí vám přinášíme 10 nejlepších kombinací písem Google, které jsou v současné době trendy:

1. Kombinace písem Google. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Tady je jednoduchá kombinace, která dělá zázraky pro téměř jakékoli použitelné použití. Open Sans je jedním z ne-li nejuniverzálnějších písem v celé kolekci písem Google. Je mimořádně dobře čitelné ve velkých blocích textu a zároveň dostatečně výrazné pro titulky.

Jednoduché. Sofistikované. Známé. Nemůžete udělat chybu!

Použití v reálném světě

Neumím si představit žádný scénář, kdy by Open Sans bylo špatnou volbou. Pokud nehledáte speciálně serifové písmo, myslím, že toto písmo dokonale poslouží většině podniků, blogů, vstupních stránek nebo webových aplikací.

2. Písmo Open Sans je vhodné pro všechny firmy, blogy, vstupní stránky nebo webové aplikace. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald je skvělé písmo pro nadpisy bez ohledu na váhu písma nebo použití velkých písmen. Jeho zhuštěný charakter mu pomáhá upoutat pozornost a vyniknout, ale zároveň vytváří příjemně jedinečný text jako písmo hlavní části textu.

EB Garamond je elegantní aktualizace klasického písma Garamond. Toto písmo, které je okamžitě rozpoznatelné a má nadčasový vzhled, vyzařuje z vaší typografie výraznou profesionalitu.

Použití v reálném světě

Tato dvojice se dobře hodí pro profesionály, kteří jednají s luxusní klientelou, jako jsou advokáti, realitní kanceláře nebo dokonce luxusní butiky. Univerzálnost písma Oswald a klasický vzhled písma EB Garamond se skvěle hodí do textů popisujících produkty, u nichž je důležité zdůraznit, že se jedná o zboží prvotřídní kvality.

3. Všestrannost písma Oswald a klasický vzhled písma EB Garamond. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat je mezi designéry oblíbený pro svou univerzálnost a jednoduchost a Merriweather se skvěle doplňuje svým kontrastním stylem a snadnou čitelností. Nebojte se je střídat jako nadpisy nebo text odstavce – oba fungují skvěle jako obojí!“

Použití v reálném světě

Tato konkrétní kombinace je příjemnou rovnováhou moderního a klasického designu. Jako taková může svým rozmanitým použitím podpořit mnoho typů podniků. Osobně se domnívám, že tato písma by se dobře hodila pro jakýkoli typ online zpravodajského zdroje nebo vydavatelské agentury.

4. Vydavatelství, která se zabývají zpravodajstvím. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Písmo Roboto je mým osobním favoritem a je to také písmo, které používáme zde v How To Get Online. Je mimořádně univerzální a má širokou škálu gramáží písma, takže prakticky neexistuje žádné omezení, k čemu by se toto písmo dalo použít. Moderní a geometrické písmo Roboto, které přesto zůstává přátelské a spolehlivé, je zázrakem formy a funkce.

Použití v reálném světě

Tady je další dvojice, pro kterou byste těžko hledali špatné využití. I když se Roboto hodí prakticky pro cokoli, myslím, že je obzvlášť skvělé pro technologické start-upy, moderní malé firmy nebo jakýkoli typ značky s výhledem do budoucnosti.

5. Roboto se hodí pro všechny typy značek. Raleway + Roboto Slab

• Raleway
• Roboto Slab

To je zase náš kamarád Roboto! Tentokrát se však podíváme na serifovou variantu, Roboto Slab. Jedná se o písmo, které je stejně univerzální jako jeho bratranec, avšak stylově o něco klasičtější. Ve spojení s výrazným a tučným písmem Raleway získáme úžasnou shodu čisté a rafinované typografie.

Použití v reálném světě

Raleway je jedním z těch písem, která přímo křičí sofistikovaností. Když se použije jako celoplošný titulek, myslím, že skvěle funguje pro luxusní zboží, jako jsou šperky, značkové oblečení nebo podobně luxusní produkty e-shopů. Roboto Slab ho dobře podporuje jednoduchým a přístupným popisným textem.

Obě fungují i zaměnitelně. Vyzkoušejte různé varianty gramáže obou písem v nadpisech a v hlavním textu a zjistěte, která dvojice nejlépe vystihuje vaši značku.

6. Vyzkoušejte si, jak se vám bude líbit. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Podle slov jeho designéra byl Playfair Display inspirován tvary písmen z 18. století při přechodu od brků k perům s ocelovým hrotem. Není tedy překvapením, že toto písmo vyzařuje starosvětský šarm, ale s moderním nádechem.

Source Sans Pro posouvá věci ještě o kousek dál do budoucnosti a vytváří zajímavou kombinaci, která je zdobná a zároveň utilitární.

Použití v reálném světě

Playfair Display dodává osobní nádech něčemu, jako je slogan nebo popis produktu. Pokud máte možnost použít jeho ampersand nebo symboly měny, okamžitě pochopíte, proč je ideální volbou pro produkt nebo službu zaměřenou na luxus a vzhled. Source Sans Pro udržuje text v moderním a čistém podání.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One možná není nejuniverzálnější písmo, ale jednu věc umí velmi dobře – vytvářet titulky, které vyžadují pozornost. Malá nebo velká, malá nebo velká písmena, tato písmena jsou hypnotická bez ohledu na to, co s nimi uděláte.

Noto Sans si klade za cíl být skutečně univerzálním písmem, kde bez ohledu na jazyk může být zobrazeno bez formátovacích chyb pro uživatele po celém světě. Estetika písma je přiměřeně stejně univerzální jako jeho užitné vlastnosti.

Použití v reálném světě

Pro tuto dvojici by se skvěle hodily blogy nebo vstupní stránky – nebo vlastně cokoli s dlouhými texty, které vyžadují nápadné podnadpisy k rozdělení obsahu. Univerzální přizpůsobivost písma Noto Sans z něj dělá také dobrou volbu tam, kde je prioritou oslovení mezinárodního publika.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya má určitý půvab, který na mě působí velmi „zemitě“ a přátelsky. Její osobnost se nijak nepřetvařuje; to, co vidíte, to také dostanete.

Lato by mohlo v knihovně Googlu přebírat titul mistra univerzálních písem Open Sans.

Společně tvoří kombinaci, která je zábavná, snadno čitelná a pragmatická.

9. Alegreya se mi líbí. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Další moderní pojetí starosvětské stylizace, PT Sans a jeho bratr PT Sans Narrow, působí ve spojení okamžitě a nezaměnitelně.

Použití v reálném světě

Každé z těchto písem funguje stejně dobře jako titulek nebo hlavní text; konkrétní dvojice, kterou zvolíte, bude záviset na povaze vašich slov – ačkoli v kratších úsecích dávám přednost PT Sans Narrow.

Předpokládá se, že jako „velmi důležitý nástroj pro moderní digitální komunikaci“ je nejvhodnější – ačkoli se rozhodně neomezuje na – použití těchto písem pro technologické startupy, softwarové aplikace nebo jiné digitální podniky.

10. Které písmo je vhodné? Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Tak, tohle je rozhodně spíš na odlehčenou stranu. Je zřejmé, že tato kombinace nebude vyhovovat každému, ale rozmarná povaha obou písem Amatic SC a Josefin Sans vytváří něco, co určitě vynikne – jen pokud budete opatrní!

Použití v reálném světě

Jste-li zábavný umělec, herec, hudebník nebo bavič, pak by toto písmo mohlo být zásadní pro zachycení vaší jedinečné osobnosti. V závislosti na zastřešujícím tónu a tématu by tato kombinace mohla fungovat i pro specializovaný blog.

Rada na závěr: Nepoužívejte Amatic SC jako hlavní text. Své čtenáře tím přivedete k šílenství.

Bonus: 5 našich oblíbených prémiových písem

Víme, že tento článek je o nejlepších, trendových písmech Google, ale jako bonus jsme chtěli zmínit i několik našich oblíbených prémiových písem. Prémiová písma samozřejmě nejsou zdarma – ale dodají vašemu webu jedinečnější a nestandardnější design. Tato písma nejsou populární ani trendová a jsou skutečně opakem těch, která jsme uvedli výše. Jsou však skvělá pro ty, kteří chtějí pro svou značku vlastní a personalizovaný design, a dobře se hodí při použití pro loga nebo i kreativní nadpisy:

Bonus 1: The Mega Craft Bundle X

Bonus 2: The Valentine’s Bundle

Bonus 3: The Valentine’s Bundle

:

Bonus 4: The Little Graphics Bundle

Bonus 5: Jealous

Proč byste měli používat písma Google?“

Vítejte u toho, co mnoho webových designérů považuje za svého nejlepšího přítele. Mluvím-li z vlastní zkušenosti, mohu vám říci, že vlastní soubory s písmy už na webové stránky vkládám jen zřídka. Fonty Google jsou nyní téměř výhradně prvním a posledním místem, kam se obracím v případě typografie webových stránek. Zde je důvod:

• Je zcela zdarma. Nezáleží na tom, kolik písem si vyberete nebo na kolika webech je použijete. Nikdy nezaplatíte ani korunu.
• K březnu 2018 je v knihovně více než 850 písem. Je pravděpodobné, že najdete ten správný styl, který bude odpovídat vaší značce.
• Je to rychlé. Protože jsou písma hostována na serverech společnosti Google, jsou soubory inteligentně komprimovány a navrženy tak, aby se rychle načítaly.
• Je to snadné. Stačí zkopírovat a vložit do souboru HTML a je hotovo.
• Je to organizované. Všechna písma jsou roztříděna do kategorií a lze v nich vyhledávat v rámci jedné databáze. Už žádné prohledávání nepřehledných podsložek v počítači, abyste našli to správné písmo.
• Zmínil jsem se, že je to zdarma? Je to zdarma!

Jak nainstalovat písma Google

Není potřeba žádné bolesti hlavy. Stačí přejít na Google Fonts a najít písmo (písma), které potřebujete.

Při výběru písem se kumulativně přidávají do kolekce ve spodní části stránky. Až budete s hledáním hotovi, klikněte na tuto spodní záložku a objeví se okno s pokyny pro vložení.

Přidání stylů

Zde si můžete vybrat, zda chcete přidat další styly, jako je kurzíva, tučné písmo, tučné písmo a podobně. Stačí kliknout na kartu PŘIZPŮSOBIT a vybrat styly, o kterých si myslíte, že je budete potřebovat.

Například takto bych vybral běžný i tučný text pro písmo Khula.

Vložení standardního nebo @Import?

Všimněte si, že máte dvě možnosti pro vložení písma na své webové stránky: pomocí standardního <odkazu href>, který se použije v souboru HTML vašeho webu, nebo pomocí @import url, které se zahrne do souboru CSS vašeho webu. Který z nich byste tedy měli použít?

Všeobecně nejlepší možností je zkopírovat a vložit řádek <link href> do souboru HTML. Vaše písma se tímto způsobem obvykle načtou rychleji, než abyste čekali na načtení souboru CSS, a tato metoda má také o něco lepší podporu pro (velmi) staré prohlížeče.

Kam vložit kód

Řádek kódu, který vám poskytne společnost Google, zkopírujete a vložíte do části <head> vašeho souboru HTML. Při použití písma Khula, které jsem vybral výše, to tedy bude vypadat takto:

Použití písma v listu stylů

Nyní jednoduše zavoláte písmo jako obvykle v kódu CSS. Pro demonstrační účely by váš hlavní nadpis a text odstavce mohly vypadat takto:

Rady pro párování písem

Rozhodování o tom, která písma seskupit, může být někdy složité umělecké vyvážení. Na jedné straně bude váš výběr písma nejefektivnější, pokud bude dostatečně kontrastní ve stylech; každé písmo na vašem webu musí vynikat nad ostatními a zasloužit si opodstatnění pro své použití. Na druhou stranu nechcete, aby se písma od sebe stylově příliš vzdalovala, což by mohlo vyvolat dojem, že byla vybrána náhodně.

Serifové a bezserifové písmo

Ověřenou metodou je spárování serifového písma s bezserifovým. Jejich styly spolu obvykle dobře kontrastují a nabízejí snadné odlišení nadpisů a odstavců.

Experimentování je klíčové

Když vybírám písma pro nový web, rád si do počítače stáhnu všechny možné varianty písma Google a hraji si s nimi v dokumentu textového editoru. Hrát si s různými velikostmi a hmotnostmi a porovnávat kombinace vedle sebe je účinný způsob, jak určit nejlepší možnou kombinaci. Když věnujete čas experimentování, můžete dokonce zjistit, že použití tenké varianty daného písma vytváří lepší text titulku, než kdybyste použili zcela samostatné písmo. (Nejjednodušší řešení je často to nejlepší.)

Závěr

Fonty Google jsou mocným zdrojem pro kutily, kteří nechtějí platit za drahá vlastní písma na svých webových stránkách. S velkou mocí však přichází i velká zodpovědnost: aby byla typografie dobře provedena, je třeba ji pečlivě promyslet a ne každé písmo, které je k dispozici, je vítězné. Doufáme, že vám tento průvodce pomůže nasměrovat vás správným směrem a inspiruje vás k nalezení dokonalé dvojice písem, která vystihuje osobnost vaší značky.