Fonaments de la tipografia

Es podria dir que gairebé un 70% del disseny d'una pàgina web correspon a la tipografia. La tipografia és una disciplina complexa; té una literatura força abundant. Però tenint en compte la importància que té en una pàgina web, és convenient conèixer els seus fonaments i tenir molt clars els conceptes, per poder escollir correctament la tipografia del disseny de la web, però també millorar la qualitat del flux de lectura, com ara la seva llegibilitat.

Anatomia d'una font

Us resultarà més fàcil escollir una font tipogràfica si enteneu els elements bàsics d'una font. En el moment de dissenyar un projecte per a una web disposeu d'un nombre elevat de fonts i és important seguir uns criteris adequats en el moment d'escollir-ne una. Algunes fonts funcionen millor com a capçaleres, d'altres com a logotips i, finalment, d'altres com a cos de text dels articles d'un bloc. Veieu el següent esquema:

Tots els caràcters romanen sobre una línia anomenada línia base. L'alçada de la lletra x en minúscula s'agafa com a referència per definir la línia mitjana de la font. La distància entre la línia mitjana i la línia base determina l'alçada-x de la font.

Observeu que algunes lletres com la q i la p presenten una part de la seva forma per sota de la línia base, per tant, aquestes lletres tenen el que s'anomena descendents i, en canvi, lletres com la b o la f presenten una part per sobre de la línia mitjana, és a dir, tenen un ascendent. Recordeu que aquests ascendents i descendents afectaran la lectura del text si se superposen amb les línies de text superiors o inferiors.

Tipus de fonts

Hi ha tres tipus de fonts diferents:

  • Serif
  • Sans Serif
  • Monospace

Família o font?
Quan parlem de família és refereim a una familia de fonts (com la Helvetica Regular, Helvetica Bold, Helvetica Black, etc.) i una font és una variant segons el seu pes o estil dins d'una familía de fonts (per exemple la Helvetica Regular).

Fonts del tipus Serif

Les fonts del tipus Serif són fàcilment identificables pels acabats o serifs de les lletres: cada caràcter té un tipus d'accident especial a les terminacions o a la base. Veieu el següent exemple de font del tipus serif.

La font més popular i utilitzada a Microsoft Word, Times New Roman. Aquestes fonts són ideals per a la lectura de textos impresos pero no pas per a la lectura d'una web, pel fet característic de les terminacions que no faciliten la lectura en pantalla.

Fonts del tipus Sans Serif

Les fonts del tipus Sans Serif són aquelles que, a diferència de les anteriors, el gruix del caràcter sempre és regular i, per tant, no hi ha cap accident o diferència de gruix en les seves terminacions. Les fonts sans serif més conegudes són l'Arial, l'Helvetica i la Verdana. Veieu el següent exemple de font sans serif (Arial):

Les fonts sans serif són les més idònies per a utilitzar-les com a font de lectura en pantalla.

Fonts del tipus Monospace

Les fonts anomenades monospace són aquelles que tots els caràcters tenen la mateixa amplada horitzontal, amb independència del caràcter que es tracti; així, ocupa el mateix espai horitzontal el caràcter i que el caràcter w. La font monospace més coneguda és la Courier i s'acostuma a utilitzar per a la presentació de codi font dels llenguatges de programació. Veieu el següent exemple:

La tipografia a la web

En el procés de disseny d'una web, el fet de només treballar amb fonts estàndard us semblarà una limitació si coneixeu el número de fonts disponibles a l'actualitat. El problema d'utilitzar una font especial és que no sempre està disponible als ordinadors dels usuaris que visiten la web.

Fonts segures a la web

Podeu identificar com a fonts segures de la web aquelles que romanen a la majoria dels sistemes operatius actuals i que, com a dissenyadors, sabem que aquell text que veiem a la pantalla el veuran també i amb la mateixa qualitat la resta de internautes que visitin la web. Exemples de fonts segures són l'Arial, la Courier o la Palatino Linotype. El problema d'això és què el número de fonts anomenades segures és tan limitat i restrictiu que, al final, el concepte segur no va agafat de la ma del disseny. Veieu a continuació quines són les alternatives que teniu a l'abast per experimentar amb fonts més enllà de l'espectre de les fonts segures i tenir més llibertat i, al mateix temps, més control del resultat visual de la pàgina.

Piles de fonts

Una primera aproximació que us permet fer ús d'unes fonts més enllà dels límits creatius de la reduïda llista de fonts segures és l'anomenat piles de fonts que definiu als fulls d'estil. Veieu el següent exemple d'un CSS.

body{
  font-family: Arial;
}

Aquesta regla del full d'estil li diu al navegador que el tipus de font (font-family) de tot el text del document (body) és l'Arial. Però podeu anar més enllà, ja què és possible llistar tantes fonts com vulgueu a la pila del selector font-family ordenades de la més a la menys preferent. Veieu de nou l'exemple anterior, però aquesta vegada amb el selector font-family acompanyat d'una pila de fonts com a valor.

body{
  font-family: "Impact", Helvetica, Arial, sans-serif;
}

Fixeu-vos bé. En primer lloc s'ha definit la font "Impact" com el tipus de font preferent. Si el navegador no troba la font al sistema operatiu de l'usuari/ària llavors intentarà trobar si té instaŀlada la família Helvetica. En tercera opció teniu la família Arial i, en últim lloc, qualsevol família de fonts que pertany a la classificació generals de fonts sans-serif.

Un altre exemple de piles de fonts, aquest cop es determinen les piles de fonts per als paràgrafs (p), i per a les seccions de primer nivell (h1) i de segon nivell (h2).

  p{ font-family: Trebuchet, Lucida Sans, Arial, sans-serif;)
  h1{ font-family: Verdana, Geneva, sans-serif; }
  h2{ font-family: Baskerville, Times New Roman, Times, serif; }

Tècniques de reemplaçament

Imatges

Una manera molt popular de representar el text amb un tipus de font exclusiva del nostre gust és situar una imatge on va el text. Sobre aquest tipus de reemplaçament amb imatges hi trobareu diferents tècniques. La més utilitzada és l'anomenada The Park Revisited1) on el text és manté a l'estructura HTML, però el desplacem fora de la pantalla i, al mateix temps, li assignem un fons d'imatge que correspon, lògicament, al mateix text però amb el tipus de font nostre.

sIFR

Un altre mètode més sofisticat és l'anomenat sIFR2), acrònim de Scalable Inman Flash Replacament, una tècnica en el que el text de l'estructura HTML és reemplaçat per un objecte Flash. A nivell d'accessibilitat no representa cap problema ja que, si desactiveu tant la presència de Flash o del Javascript, continua apareixent el text a l'HTML.

Seleccionar la tipografia

Quin tipus de font seleccionar per al lloc web? Aquesta no és pas una tasca fàcil i depèn de moltes variants, com per exemple:

  • Quin tipus de contingut tractarà el lloc web?
  • A quin públic s'adreçarà?
  • Una única font per a tot el cos de la pàgina o seleccionareu una font específica per a cada tipus de text?

Una estratègia senzilla per començar és determinar el tipus de font per al contingut del text, els paràgrafs <p></p> i per a les seccions del lloc web.

Tipografia del contingut

La majoria dels dissenyadors web utilitzen una font del tipus sans-serif com a opció per al contingut. Un exemple és el lloc web de la XTEC. La font utilitzada per al contingut de cada pàgina està determinada a la següent pila de fonts que trobareu al CSS:

  font-family: Geneva, Arial, Helvetica, sans-serif;

i el resultat és el següent:

Però, si visiteu qualsevol article de la versió digital de El País comprovareu que fan ús d'una font del tipus serif copiant el model de diari imprès. Vegeu la captura

i el valor de la pila de fonts al CSS:

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

Tipografia de les seccions

Les seccions o capçaleres del lloc web, generalment, acostumen a seguir el mateix patró de tipus de font que la del contingut, però accentuant-les mitjançat un augment de la mida i la modificació del color, per diferenciar-les així, del les corresponents al contingut.
Però també és possible, en el cas que la secció representi la capçalera d'una caixa, que la font estigui decorada amb ornament per accentuar-ne la importància i captar l'atenció dels usuaris. Vegeu els següents exemples.

A la pàgina principal de la XTEC, la secció o capçalera de segon nivell (h2) apareix com l'element identificador d'una caixa de contingut amb un fons blau.

Altres exemples de capçaleres amb diferents tipus d'ornaments visuals on es mostra clarament l'ús de les tècniques de reemplaçament del text per una imatge:

 http://www.csszengarden.com/?cssfile=/209/209.css&page=0


http://www.csszengarden.com/?cssfile=/201/201.css&page=1

Podeu estudiar el codi d'aquest últim per veure el funcionament d'aquest tècnica. En primer lloc, el codi HTML on trobeu el text sense cap tipus d'estil:

  <h3><span>So What is This About?</span></h3>

És una capçalera de tercer nivell, però rodejada de l'etiqueta <span>. Vegeu ara quina funció té l'etiqueta <span> dins del full d'estil:

#explanation h3 {
  background-image:url(heading-about.gif);
  height:100px;
  width:250px;
}
 
#explanation h3 span {
  display:none;
}

Allò que està dins de l'etiqueta span no és mostrarà (display: none). En el lloc de la secció de tercer nivell (h3) apareixerà una imatge de fons amb el mateix text, però amb la tipografia que volia el dissenyador.