Tot i que les imatges obtenen gran part de l'amor quan es tracta de llocs web, és la paraula escrita que apel·la als motors de cerca i executa el contingut de la majoria de llocs. Com a tal, el disseny tipogràfic és una part important del disseny del lloc web. Amb la importància del text d'un lloc ve la necessitat d'assegurar-se que es veu bé i és fàcil de llegir. Això es fa amb estil CSS (Cascading Style Sheets).
Seguint l'estàndard de disseny web modern, quan vulgueu dictar l'aspecte del contingut de text d'un lloc web, ho farà utilitzant CSS. Això separa l'estil CSS de l'estructura HTML d'una pàgina. Com a exemple, si voleu establir la font d'una pàgina a "Arial", podeu fer-ho afegint la següent regla d'estil al vostre CSS (nota: probablement es farà en un full d'estil CSS extern que impulsa els estils per a totes les pàgines del lloc web):
cos {font-family: Arial; }Aquesta font s'estableix per al "cos", de manera que la cascada CSS aplicarà l'estil a tots els altres elements de la pàgina. Això és degut a que qualsevol altre element HTML és un nen de l'element "cos", els estils CSS, com ara la família de tipus de lletra o el color, es desmarcaran del pare al element secundari. Aquest serà el cas a menys que s'afegeixi un estil més específic per a certs elements. L'únic problema amb aquest CSS és que només s'especifica una única font. Si no es pot trobar aquesta font per alguna raó, el navegador substituirà un altre al seu lloc. Això és dolent perquè no té cap control sobre el tipus de lletra que s'utilitza, el navegador us escollirà, i és possible que no us agradi el que va decidir utilitzar. Aquí és on entra una font de pila.
Una pila de fonts és una llista de tipus de lletra a la declaració font-família de CSS. Els tipus de lletra es classifiquen segons l'ordre de preferència que voleu que apareguin al lloc en cas d'un problema com si no es carregués una font. Una pila de fonts permet que un dissenyador controli l'aspecte dels tipus de lletra a la pàgina web, fins i tot si l'ordinador no té el tipus de lletra inicial al qual va trucar.
Llavors, com es veu una pila de fonts? Aquí teniu un exemple:
cos {font-family: Georgia, "Times New Roman", serif; }Hi ha algunes coses que cal tenir en compte aquí.
Primer, veureu que hem separat els diferents noms de lletra amb una coma. entre cadascuna Podeu afegir tantes fonts com vulgueu, sempre que estiguin separades per una coma. El navegador intentarà carregar primer la font especificada primer. Si això falla, esgotarà la línia intentant cada font fins que trobi una que usi. En aquest exemple estem utilitzant fonts web segures i probablement es trobarà a "Geòrgia" a l'ordinador de la persona que visita el lloc (nota: el navegador mira a l'ordinador per als tipus de lletra especificats a la pàgina, de manera que el lloc realment indica l'ordinador que les fonts de càrrega del vostre sistema). Si per alguna raó no es trobava aquesta font, es desplaçaria la pila i intentaria especificar el tipus de lletra següent.
En termes d'aquesta font següent, observeu com està escrit a la pila. El nom de "Times New Roman", està enquadrat en cometes dobles. Això es deu al fet que el nom del tipus de lletra té diverses paraules. Qualsevol tipus de lletra amb més d'una paraula (Trebuchet MS, Courier New, etc.) ha de tenir el nom en cometes dobles perquè el navegador sàpiga que totes aquestes paraules formen part d'un nom de font.
Finalment, finalitzem la pila de fonts amb "serif", que és una classificació genèrica de fonts. En la instància poc probable que cap dels tipus de lletra que heu assignat a la vostra pila està disponible, el navegador simplement cercarà una font que, almenys, caigui en la classificació adequada que hàgiu triat. Per exemple, si utilitzeu fonts sans-serif com Arial i Verdana, que acabar amb una pila de fonts amb la classificació de "sans-serif" almenys mantindrà la font en aquesta família general si hi ha un problema de càrrega. És cert que hauria de ser molt estrany que un navegador no trobi cap de les fonts que figuren a la pila i que, en lloc d'utilitzar aquesta classificació genèrica, és una bona pràctica incloure-ho de totes maneres per ser doblement segur.
Pila de fonts i fonts web
Actualment, molts llocs web utilitzen fonts web que s'inclouen al lloc juntament amb altres recursos (com ara les imatges del lloc, el fitxer Javascript, etc.) o que estan enllaçades en una ubicació de font fora de lloc com Google Fonts o Typekit. Tot i que aquests tipus de lletra s'han de carregar ja que es vincula als fitxers, encara voleu utilitzar una pila de fonts per assegurar-vos que tingueu algun control sobre els problemes que puguin sorgir. El mateix passa amb els tipus de lletra "segura a la web" que haurien d'estar a l'ordinador d'una persona (tingueu en compte que els tipus de lletra que hem utilitzat com a exemples d'aquest article, inclosos Arial, Verdana, Geòrgia i Times New Roman, són fonts tipogràfiques que haurien de ser a l'ordinador de la persona). Tot i que la probabilitat que falti un tipus de lletra sigui molt baix, especificar una pila de fonts ajudarà al disseny tipogràfic d'un lloc a prova de bales tant com sigui possible.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 9/08/17