Fonts Web

En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.

Requisits previs: Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil a tipus de lletra i textos.
Objectiu: Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.

Recapitulació sobre famílies de tipus de lletra

Com hem vist en l’article Fonaments d’aplicació d’estil a la lletra i els textos, pots controlar les fonts que fas servir per al teu HTML amb la propietat font-family. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats tipus de lletra segurs per al web (web-safe fonts). Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.

Tipus de lletra segurs per al web

Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Els tipus de lletra segurs per al web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarregui juntament amb el teu lloc web quan s’hi accedeix, significa que qualsevol navegador que admet tipus de lletra segurs per al web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:

En primer lloc, hi ha un bloc de codi @font-face al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:

html {
  font-family: "Bitstream Vera Serif Bold", serif;
}

La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.

Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:

  1. Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrem com generar el codi necessari.
  2. Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-les servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.

Nota: Els tipus de lletra segurs per al web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!

Aprenentatge actiu: Un exemple de tipus de lletra segur per al web

Tenint en compte això, construïm un exemple bàsic de tipus de lletra segur per al web des dels inicis. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.

Has d'utilitzar els fitxers web-font-start.html i web-font-start.css com a punt de partida per a afegir el codi (consulta també el codi de l’exemple en viu). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer web-font-start.css hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.

Buscar tipus de lletra

Per a aquest exemple, utilitzarem dos tipus de lletra segurs per al web, un per als títols d’encapçalament i un per al text del cos (body). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:

  • Distribuïdors de tipus de lletra gratuït: són llocs web que posen a disposició per a descarregar tipus de lletra gratuïtament (encara que hi pot haver certes condicions de llicència, com ara acreditar el creador del tipus de lletra). Alguns exemples són: Font Squirrel, dafont i Everything Fonts.
  • Distribuïdors de tipus de lletra de pagament: llocs web que posen a disposició tipus de lletra per una quantitat de diners, com fonts.com o myfonts.com. També pots comprar tipus de lletra directament a creadors de tipus de lletres, per exemple Linotype, Monotype o Exljbris.
  • Serveis de tipus de lletra en línia: llocs web que emmagatzemen i serveixen tipus de lletra, i que simplifiquen el procés sencer. Consulta’n els detalls en la secció Usar un servei de tipus de lletra en línia.

Busquem ara alguns tipus de lletra! Ves a Font Squirrel i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (perquè té una aspecte agradable, o perquè és de tipus inscripció), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).

En cada cas, descomprimeix el paquet amb els tipus de lletra (els tipus de lletra segurs per al web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet –alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.

Nota: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.

Generació del codi necessari

Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipus de lletra, segueix aquests passos:

  1. Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.
  2. Ves al Webfont Generator de Font Squirrel.
  3. Carrega els dos fitxers de tipus de lletra amb el botó Upload Fonts.
  4. Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».
  5. Fes clic a Download your kit.

Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.

Implementar el codi a la teva demo

En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:

  • Diverses versions de cada tipus de lletra: .eot, .svg, .ttf, .woff, .woff2. Com ja s’ha dit, calen diversos tipus de fitxers de tipus de lletra per a tenir compatibilitat amb els navegadors; aquesta és la manera que té Font Squirrel d’assegurar-se que tens tot el que necessites.
  • Un fitxer HTML de demostració per a cada font; carrega’l en el teu navegador i observa com es veu el tipus de lletra en diferents contextos d'ús.
  • Un fitxer stylesheet.css que conté el codi @font-face generat que necessites.

Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:

  1. Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara fonts.
  2. Obre el fitxer stylesheet.css i copia-hi els blocs @font-face que conté en el teu fitxer web-font-start.css; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.
  3. Cadascuna de les funcions url() apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix fonts/ al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.
  4. Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple:
    font-family: 'zantrokeregular', serif;

Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.

Nota: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta web-font-finished.html i web-font-finished.css (executa l'exemple acabat en directe).

Ús d'un servei de tipus de lletra en línia

Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi @font-face, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: Typekit i Cloud.typography. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de Google Fonts, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.

La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de web-font-start.html i web-font-start.css com a punt de partida.

  1. Ves a Google Fonts.
  2. Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.
  3. Per a seleccionar un tipus de lletra, prem el botó Add to Collection que hi ha al costat.
  4. Quan hagis escollit els tipus de lletra, prem el botó Use que hi ha a la part inferior de la pàgina.
  5. A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element <link> perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.
  6. A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.

Nota: Pots trobar una versió completa a google-font.html i google-font.css, si et cal contrastar el teu treball amb el nostre (consulta-ho en directe).

@font-face amb més detall

Explorem la sintaxi @font-face que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan @font-face va començar a ser popular (Syntaxi Bulletproof @font-face). Passem a veure què fa:

  • font-family: Aquesta línia especifica el nom amb què et faràs referència al fitxer de tipus de lletra que empraràs. Pots posar-hi qualsevol cosa que t’agradi, sempre que l'utilitzis de manera coherent en tot el teu codi CSS.
  • src: Aquestes línies especifiquen les rutes d'accés als fitxers de tipus de lletra que cal que importis al teu CSS (la part d'URL) i el format de cada fitxer de tipus de lletra (la part format). L'última part en cada cas és opcional, però és útil declarar-la perquè permet als navegadors trobar més ràpidament el tipus de lletra que poden utilitzar. Es poden incloure diverses declaracions, separades per comes; el navegador buscarà entre elles i usarà la primera que trobi que entén; per tant, és millor posar abans formats nous i millors, com WOFF2, i formats més antics i no tan bons, com TTF, després. L'única excepció d’això són les fonts EOT, que es col·loquen en primer lloc per corregir un parell d'errors en les versions anteriors d'IE, que intentarà utilitzar la primera que trobi, fins i tot si no pot utilitzar el tipus de lletra.
  • font-weight/font-style: Aquestes línies especifiquen el gruix del tipus de lletra i si és cursiva o no. Si importes diversos gruixos del mateix tipus de lletra, en pots especificar gruix/estil i, a continuació, utilitzar valors diferents de font-weight/font-style per a triar entre ells, en lloc d'haver de cridar tots els membres diferents de la família de tipus de lletra pels diferents noms. @font-face tip: define font-weight and font-style to keep your CSS simple, de Roger Johansson, mostra amb més detall què cal fer.

Nota: També pots especificar cada valor font-variant i font-stretch per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor unicode-range, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. Creating Custom Font Stacks with Unicode-Range, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.

Resum

Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.