10 excel·lents tendències en combinació de fonts de Google el 2020

Una llista de tipus de lletra de moda seleccionats a partir de fonts de Google que s’uneixen bé i com s’instal·len al vostre lloc web.

Millors combinacions de fonts de Google

La tipografia del lloc web era una pràctica de disseny més mistificant que avui en dia. El complicat procés de decoració d’una pàgina web amb tipus de lletra personalitzats una vegada era necessari convertir i incrustar fitxers de lletra per allotjar-los al servidor de l’usuari i l’elecció dels tipus de lletra disponibles es limitava a la pròpia col·lecció o al coneixement de tipografia fora dels tipus de lletra del sistema estàndard. Com a resultat, la majoria dels llocs web tenien un aspecte gairebé idèntic en el format de contingut, que depenien de molts consums excessius i mundans fonts de seguretat web.

Tot va canviar el 2010 amb el llançament de Fonts de Google, un projecte de codi obert que permet la implementació molt més fàcil dels tipus de lletra personalitzats als llocs web. La instal·lació d’aquests tipus de lletra al vostre propi lloc web és un procés senzill i ràpid, però heu de ser conscients que no totes les combinacions de lletres de la biblioteca de Google són una recepta per a l’èxit tipogràfic. Amb la combinació de tipus de lletra i les consideracions d’ús adequades, però, la vostra marca en línia pot exercir professionalitat, bellesa i facilitat per als lectors sense necessitat de fonts de llar costoses. En aquest article, us mostraré com aconseguir tot això.

Una llista de 10 combinacions de fonts de Google més modernes

Acostem-nos-hi! En cap ordre en particular, es mostren 10 de les millors combinacions de fonts de Google actualment:

1. Open Sans Condensat + Open Sans

Tendència de combinació de fonts de Google: Open Sans condensat i Open Sans

Aquí hi ha una combinació fàcil que fa meravelles per a gairebé qualsevol ús aplicable. Obrir Sans és un, si no, dels tipus de lletra més versàtils de tota la col·lecció de fonts de Google. És molt fàcil de llegir en grans blocs de text, tot i que és prou impressionant per als titulars.

Senzill. Sofisticat. Familiar. No us podeu equivocar!

Ús del món real

No puc preveure cap escenari on Obrir Sans seria una mala elecció. A menys que busqueu específicament un tipus de lletra serif, crec que aquest servirà perfectament a qualsevol empresa, bloc, pàgina de destinació o aplicació web.

2. Oswald + EB Garamond

Tendència combinació de tipus de lletra de Google: Oswald amb EB Garamond

Oswald és un tipus de lletra fantàstic per als titulars, no importa el pes de la lletra o l’ús de taps. La seva naturalesa condensada l’ajuda a captar l’atenció i el pop, però també fa que sigui un text agradable només com a font del cos principal.

EB Garamond és una elegant actualització del tipus de lletra clàssic Garamond. Instantàniament recognoscible i d’aparença atemporal, aquest tipus de lletra proporciona un professionalisme distintiu en la vostra tipografia.

Ús del món real

Aquest maridatge funciona bé per a professionals que tenen tractes amb clientela de gamma alta, com ara advocats, agències immobiliàries o fins i tot botigues de luxe. La versatilitat de Oswald i l’aspecte clàssic de EB Garamond Feu un text de descripció del producte excel·lent on sigui important ressaltar un element de primera qualitat.

3. Montserrat + Merriweather

Tendència combinació de fonts de Google: Montserrat amb Merriweather

Montserrat és un dels principals dissenyadors per la seva versatilitat i senzillesa i Merriweather es combina amb un estil contrastant i una fàcil llegibilitat. No dubteu en intercanviar-los com a titulars o com a text de paràgraf. Els dos funcionen bé!

Ús del món real

Aquesta combinació particular és un bon equilibri de disseny clàssic i modern. Per tant, la seva varietat d’usos podria donar suport a molts tipus d’empresa. Personalment, considero que aquests tipus de lletra funcionen bé per a qualsevol tipus de font de notícies en línia o agència editorial.

4. Roboto Thin + Roboto Regular

Tendència combinació de tipus de lletra Google: Robot prim amb Roboto Regular

El Roboto font-family és un favorit personal i també és el que fem servir aquí a How To Get Online. Extremadament versàtil amb una àmplia gamma de peses de tipus de lletra, no hi ha pràcticament cap limitació al que es podria utilitzar el tipus de lletra. Roboto és modern i geomètric, però, alhora, amable i de confiança, Roboto és una meravella de la seva forma i funció.

Ús del món real

Aquí hi ha un altre emparellament al qual se li hauria de pressionar la informació inútil. Mentre Roboto funciona pràcticament per a qualsevol cosa, crec que és especialment excel·lent per a start-ups tecnològiques, petites empreses modernes o qualsevol tipus de marca amb vista al futur..

5. Raleway + Roboto Slab

Com a tendència de les combinacions de fonts de Google: Raleway amb Roboto Slab

És el nostre amic Roboto de nou! Aquesta vegada, però, estem analitzant la variació de sèries, Robot Slab. És un tipus de lletra tan versàtil que el seu cosí, però és un estil més clàssic. Quan es combina amb el distintiu i el negreta Raleway, Tenim una increïble coincidència de tipografia neta i refinada.

Ús del món real

Raleway és un d’aquests tipus de lletra que fa crits de sofisticació. Quan s’utilitza com a títol complet, crec que funciona excel·lentment per a articles de luxe com joies, roba de disseny o productes de comerç electrònic d’alt nivell.. Robot Slab és compatible amb un text descriptiu senzill i abordable.

Els dos treballen també de forma intercanviable. Proveu diferents variacions de pes tant de tipus de lletra als títols com del text del cos i vegeu quina combinació és la que millor marca la vostra marca.

6. Pantalla de Playfair + Source Sans Pro

Tendència combinació de tipus de lletra de Google: pantalla Playfair amb Source Sans Pro

Segons el seu dissenyador, Pantalla de Playfair es va inspirar en les formes de lletra del segle XVIII durant la transició de les plomes a les plomes amb punta d’acer. No és una sorpresa, doncs, que aquest tipus de lletra sorgeix l’encant del món antic, però amb un gir modern.

Font Sans Pro empeny les coses una mica més en el futur, creant una combinació intrigant que s’adorna mentre encara és utilitari.

Ús del món real

Pantalla de Playfair afegeix un toc personal a alguna cosa com una descripció d’un producte o una etiqueta. Si teniu la possibilitat d’utilitzar els seus símbols de divisa o de divises, veureu immediatament per què és l’opció perfecta per a un producte o servei centrat en el luxe i les aparences.. Font Sans Pro manté el text fonamentat en una presentació neta i moderna.

7. Fjalla One + Noto Sans

Tendència combinació de fonts de Google: Fjalla One amb Noto Sans

Fjalla One potser no és el més versàtil dels tipus de lletra, però una cosa que fa molt bé és crear titulars que demanin atenció. Petites o grans, minúscules o totes les majúscules, aquestes cartes són hipnòtiques sense importar el que facis amb elles.

Noto Sans pretén ser un tipus de lletra realment universal on, independentment de l’idioma, es pot mostrar sense errors de format per a usuaris de tot el món. De manera adequada, l’estètica del tipus de lletra és igual de versàtil que d’utilitat.

Ús del món real

Els blocs o les pàgines de destinació serien excel·lents per a aquest aparellament, o realment qualsevol cosa amb llargs cossos de text que requereixen subtítols notables per desglossar contingut. L’adaptabilitat universal de Noto Sans també la converteix en una bona elecció on prioritzar l’arribada a un públic internacional.

8. Alegreya + Lato

Tendència combinació de fonts de Google: Alegreya amb Lato

Alegreya té un cert atractiu que se sent molt “terrós” i simpàtic per a mi. No hi ha cap pretensió sobre la seva personalitat; el que veus és el que obtens.

Lato podria donar Obrir Sans una prova per guanyar diners, que és el campió dels tipus de lletra de propòsit a la biblioteca de Google.

Junts creen una combinació divertida, fàcil de llegir i pragmàtica.

9. PT Sans Estret + PT Sans

Tendència combinació de tipus de lletra Google - PT Sans Estreta amb PT Sans

Una altra concepció moderna del disseny d’un vell món, PT Sans i els seus germans, PT Sans Estret, feu una declaració immediata i inconfusible quan s’uneixen junts.

Ús del món real

Tant el tipus de lletra funciona igual de bé com un títol o un text corporal; l’aparellament particular que escolliu dependrà de la naturalesa de les vostres paraules, tot i que jo prefereixo preferir PT Sans Estret en ràfegues més curtes.

Dirigida com una “eina molt important per a les comunicacions digitals modernes”, sembla més adequada per, encara que no es limita a, utilitzar aquests tipus de lletra per a startups de tecnologia, aplicacions de programari o altres empreses digitals..

10. Amatic SC + Josefin Sans

Combinacions de tipus de lletra de Google: Amatic SC amb Josefin

D’acord, aquest és sens dubte més per la cara de llum. Combinationbviament, aquesta combinació no funcionarà per a tothom, sinó per la naturalesa capritxosa d’ambdues Amatic SC i Josefin Sans crear alguna cosa que segur que us destacarà, sempre que tingueu precaució!

Ús del món real

Si sou un artista, un músic o un animador amb esperit divertit, aquest tipus de lletra podria ser essencial per captar la vostra personalitat única. Segons el to general i el tema, aquesta combinació també podria funcionar per a un bloc de nínxols.

Un mot de consell: no l’utilitzeu Amatic SC com a text del seu cos principal. Vostè farà que els vostres lectors estiguin bojos.

Bonus: 5 dels nostres tipus de lletra premium preferits

Sabem que aquest article tracta sobre els millors tipus de lletra de tendència de Google, però també hem volgut esmentar alguns dels nostres tipus de lletra premium preferits com a bonus. Els tipus de lletra premium, per descomptat, no són gratuïts, però donen al vostre lloc web un disseny més únic i personalitzat. Aquests tipus de lletra no són populars ni estan a la moda i són, per contra, els oposats als que hem esmentat anteriorment. Tot i això, són excel·lents per a aquells que volen un disseny personalitzat i personalitzat per a la seva marca i van bé quan s’utilitzen per a Logos o fins i tot encapçalaments creatius:

Bonus 1: El Mega Craft X Paquet

Bonus 2: El paquet de Sant Valentí

Bonus 3: El paquet de fonts fantàstiques

Bonus 4: El petit paquet de gràfics

Bonus 5: gelós

CONSELL RÀPID: Els tipus de lletra premium ofereixen als dissenyadors l’oportunitat d’aconseguir un disseny atemporal i són molt recomanables per a logotips i identitat de marca.

Per què heu d’utilitzar els tipus de lletra de Google?

Benvingut al que molts dissenyadors web consideren el seu millor amic. Parlant d’experiència, puc dir que rarament incorporo fitxers de lletra personalitzada als llocs web. Google Fonts és ara gairebé exclusivament el primer i l’últim lloc on em dirigeixo per obtenir la tipografia d’un lloc web. Aquí és el perquè:

  • Ho és completament gratuït. No importa quants tipus de lletra escolliu o quants llocs web els utilitzeu. Mai pagareu cap centavo.
  • A partir del març del 2018, n’hi ha més de 850 tipus de lletra a la biblioteca. El més probable és que trobareu l’estil adequat per combinar-lo amb la vostra marca.
  • Ho és ràpid. Com que els tipus de lletra estan allotjats als servidors de Google, els fitxers es comprimeixen de manera intel·ligent i es dissenyen per carregar-se ràpidament.
  • Ho és fàcil. Un senzill copiar i enganxar en un fitxer HTML i ja heu acabat.
  • Ho és organitzat. Tots els tipus de lletra es classifiquen i es poden cercar dins d’una base de dades. No heu de buscar qualsevol subcarpeta desordenada a l’ordinador per trobar aquest tipus de lletra perfecte.
  • He esmentat que ho és gratuït? És gratis!

Com instal·lar fonts de Google

No cal tenir mal de cap aquí. Només cal anar a Fonts de Google i cerqueu el tipus de lletra que necessiteu.

A mesura que seleccioneu els vostres tipus de lletra, s’afegiran acumuladament a una col·lecció al final de la pàgina. Quan hàgiu acabat amb la cerca, feu clic a la pestanya inferior i apareixerà una finestra amb instruccions d’incrustació.

Afegir estils

A partir d’aquí, podeu triar incloure estils addicionals com ara la cursiva, la negreta, la negreta i la cursiva, etc. Només cal fer clic sobre el botó PERSONALITZAR fitxa i selecciona els estils que creus que necessitaran.

Per exemple, aquí es mostra com seleccionaria les dues coses regular i negreta text per al tipus de lletra Khula.

Afegir estil de lletra a fonts de Google

Incrustar l’estàndard o @Import?

Haureu notat que teniu dues opcions per incrustar els tipus de lletra al vostre lloc web: utilitzar un estàndard per utilitzar-lo als vostres llocs HTML fitxer o @import url per ser inclòs al lloc del vostre lloc CSS dossier. Quin és el que heu d’utilitzar?

Generalment, la millor opció és copiar i enganxar línia al fitxer HTML. Els vostres tipus de lletra normalment es carregaran més ràpidament en comptes d’esperar que es carregui el fitxer CSS, i aquest mètode també té una mica de suport per a (molt) antics navegadors.

On cal posar el codi

Heu de copiar i enganxar la línia de codi que Google us dóna al fitxer secció del fitxer HTML. Així que, utilitzant el tipus de lletra Khula que he escollit més amunt, quedarà així:

CONSELL RÀPID: També podeu especificar estils de lletra escrivint-los a l’URL, separats per comes. Per exemple: “https://fonts.googleapis.com/css?family=Khula:negreta, cursiva, negreta

Utilitzant el tipus de lletra al vostre full d’estil

Ara només cal que truqueu al tipus de lletra com de costum dins del vostre CSS codi. A efectes de demostració, el títol principal i el text del paràgraf podrien semblar així:

h1 {
font-family: “Khula”, sans-serif;
font-pes: 700;
font-size: 48px;
}
p {
font-family: “Khula”, sans-serif;
font-pes: 400;
font-size: 16px;
}

CONSELL RÀPID: Assegureu-vos d’incloure un tipus de lletra anormal, com ara “serif”, “sans-serif” o un tipus de lletra segura per a la web similar al cas rar que no es carrega el vostre tipus de lletra Google.

Consells sobre com combinar els vostres tipus de lletra

Decidir quins tipus de lletra agrupar pot ser de vegades un equilibri artístic complicat. D’una banda, la selecció de tipus de lletra serà més eficaç quan hi hagi un contrast d’estils; cada tipus de lletra del vostre lloc ha de destacar-se dels altres i obtenir una justificació per al seu ús. D’altra banda, no voleu que els vostres tipus de lletra es vagin allunyant molt dels altres estilísticament, cosa que podria donar la impressió que es van escollir a l’atzar..

CONSELL RÀPID: Penseu en quina emoció o idea us evoca un tipus de lletra particular. Proveu de combinar-ho amb un altre tipus de lletra que evoca la mateixa emoció o idea. Es tracta només de trobar els tipus de lletra adequats que parlin amb la vostra marca única. Ho sabràs de manera inherent quan un tipus de lletra sembla la vostra marca o si proporciona senyals mixtes.

Serif i Sans-Serif

Un mètode provat i cert és combinar un tipus de lletra serif amb un sense-serif. Els seus estils solen contrastar bé junts, oferint una fàcil distinció entre els titulars i els paràgrafs.

L’experimentació és clau

Quan trio tipus de lletra per a un lloc web nou, m’agrada descarregar totes les opcions de Google Font possibles al meu ordinador i reproduir-les en un document de processament de textos. Fixar-se amb diferents mides i pesos i comparar les combinacions una al costat de l’altre és una manera eficaç de determinar el millor maridatge possible. Aprofitant el temps per experimentar, fins i tot podreu descobrir que utilitzeu un prim la variació d’un tipus de lletra proporciona un millor text de titularitat que si utilitzeu un tipus de lletra totalment separat. (La solució més senzilla sovint és la millor.)

Conclusió

Google Fonts és un potent recurs per als bricolers que no volen pagar per tipus de llar costosos al seu lloc web. Però amb una gran potència és una gran responsabilitat: la tipografia requereix una reflexió acurada perquè es faci bé i no tots els tipus de lletra hi ha un guanyador. Esperem que aquesta guia us ajudi a dirigir-vos en la direcció correcta, inspirant-vos a trobar aquest aparell de lletres perfecte per capturar la personalitat de la vostra marca.

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