Quines són les famílies de fonts genèriques de CSS?

Les classificacions genèriques de fonts disponibles per utilitzar al vostre lloc web

Quan es dissenyi un lloc web, un dels elements clau d'una pàgina amb què treballarà serà el contingut del text. Com a tal, quan construeix una pàgina web i l'estil amb CSS, una gran part d'aquest esforç se centrarà en la tipografia del lloc.

El disseny tipogràfic té un paper important en el disseny del lloc web. Un contingut de text ben dissenyat i formatat permet que un lloc tingui més èxit creant una experiència de lectura que sigui agradable i fàcil de consumir. Una part dels vostres esforços per treballar amb el tipus serà triar els tipus de lletra adequats per al disseny i, a continuació, utilitzar CSS per afegir aquests tipus de lletra i estils de font a la visualització de la pàgina. Això es fa mitjançant l'ús del que s'anomena " font-stack "

Font-Stacks

Quan especifiqueu un tipus de lletra per utilitzar-lo en una pàgina web, és recomanable incloure també opcions de devolució en cas que no es pugui trobar l'elecció de la font. Aquestes opcions de devolució es presenten a la "pila de fonts". Si el navegador no troba la primera font llistada a la pila, es mou cap al següent. Continua aquest procés fins que troba una font que pot utilitzar, o es queda sense opcions (en aquest cas, només triarà qualsevol font del sistema que vulgui). Aquest és un exemple de com es veuria una font-stack en CSS quan s'aplica a l'element "body":

cos {font-family: Georgia, "Times New Roman", serif; }

Tingueu en compte que especifiquem la font Georgia primer. Per defecte, això és el que usarà la pàgina, però si aquesta font no està disponible per alguna raó, la pàgina tornarà a Times New Roman. Ens adjunta el nom de la font en cometes dobles perquè és un nom de diverses paraules. Els noms de lletra de paraula simple, com Geòrgia o Arial, no requereixen les cometes, però el nom de lletra multi-paraula els necessita perquè el navegador sàpiga que totes aquestes paraules formen el nom del tipus de lletra.

Si observeu un final de la pila de lletra, us adonareu que acabem amb la paraula "serif". Aquest és un nom de família de fonts genèric. En el cas improbable que una persona no tingui Geòrgia o Times New Roman en el seu ordinador, el lloc farà servir qualsevol font que pogués trobar. Això és preferible per permetre que el lloc falli a qualsevol tipus de lletra que vulgui, perquè almenys podeu saber què tipus de font voleu utilitzar per tal que l'aspecte i el to global del disseny del lloc estigui tan intacte com sigui possible. Sí, el navegador seleccionarà una font per a vosaltres, però almenys proporcioneu orientació perquè sàpiga quin tipus de font funcionaria millor en el disseny.

Famílies de fonts genèriques

El nom de font genèrica disponible a CSS és:

Si bé hi ha moltes altres classificacions de fonts disponibles en disseny web i tipografia, incloent slab-serif, blackletter, pantalla, grunge i molt més, aquests 5 noms de fonts genèrics que figuren a dalt són els que usareu en una font-stack en CSS. Quines diferències hi ha en aquestes classificacions de fonts? Fem una ullada!

Els tipus de lletra periòdics sovint presenten formes de lletres primes i ornamentades que volen replicar el text escrit a mà. Aquestes fonts, a causa de les seves lletres primes i florides, no són apropiades per a grans blocs de contingut com la còpia del cos. Normalment s'utilitzen tipus de lletra per a títols i necessitats de text més curtes que es poden mostrar en mides de fonts més grans.

Les fonts de fantasia són les fonts una mica bojos que no entren en cap altra categoria. Les fonts que replicen logotips ben coneguts, com ara les formes de lletra de les pel·lícules de Harry Potter o Back to the Future, caurien en aquesta categoria. Una vegada més, aquests tipus de lletra no són apropiats per al contingut del cos ja que sovint són tan estilitzats que llegir passatges més llargs de text escrits en aquestes fonts és molt difícil de fer.

Els tipus de lletra monoespacials són aquells on totes les formes de lletres tenen la mateixa mida i espaiat, com si haguéssiu trobat en una màquina d'escriure vella. A diferència d'altres tipus de lletra que tenen amplades variables per a les lletres segons la seva mida (per exemple, un "W" de capital tindria molt més espai que un minúscul "i"), els tipus de lletra monospace tenen un amplada fixa per a tots els caràcters. Aquest tipus de lletra s'utilitza sovint quan es mostra el codi en una pàgina perquè es veuen clarament diferents que altres texts d'aquesta pàgina.

Les fonts de Serif són una de les classificacions més populars. Aquests són fonts que tenen les petites lligadures extra a les formes de lletres. Aquestes peces addicionals es diuen "serifs". Les fonts serif comunes són Geòrgia i Times New Roman. Els tipus de lletra Serif es poden utilitzar per a textos de gran mida, com ara passatges llargs de text i còpia corporal.

Sans-serif és la classificació final que veurem. Aquestes són fonts que no tenen aquestes lligades. El nom significa "sense serifs". Les fonts més populars d'aquesta categoria serien Arial o Helvetica. De manera semblant als serifs, les fonts sans-serif poden utilitzar-se igualment en els encapçalaments i en el contingut del cos.

Article original de Jennifer Krynin. Editat per Jeremy Girard el 16/10/17