Els tipus de lletra web permeten als dissenyadors web utilitzar tipus de lletra que no estan instal·lats a l'ordinador del visor.

La tipografia web es refereix a l'ús de tipus de lletra a la World Wide Web. Quan es va crear l'HTML per primera vegada, les cares i estils de tipus de lletra es controlaven exclusivament per la configuració de cada navegador web. No hi va haver cap mecanisme perquè les pàgines web individuals controlessin la visualització de tipus de lletra fins que Netscape va introduir l'element el 1995, que després es va estandarditzar en l'especificació HTML 3.2. No obstant això, el tipus de lletra especificat per l'element s'havia d'instal·lar a l'ordinador de l'usuari o s'utilitzaria un tipus de lletra de reserva, com ara el tipus de lletra predeterminat sans-serif o monoespai d'un navegador. La primera especificació de fulls d'estil en cascada es va publicar el 1996 i va proporcionar les mateixes capacitats. fontfont

L'especificació CSS2 es va llançar el 1998 i va intentar millorar el procés de selecció de tipus de lletra afegint coincidència, síntesi i descàrrega de tipus de lletra. Aquestes tècniques no van obtenir molt ús, i es van eliminar en l'especificació CSS2.1. No obstant això, Internet Explorer va afegir suport per a la funció de descàrrega de tipus de lletra a la versió 4.0, llançada el 1997. ^[1] La descàrrega de fonts es va incloure més tard al mòdul de tipus de lletra CSS3, i des de llavors s'ha implementat a Safari 3.1, Opera 10 i Mozilla Firefox 3.5. Això ha augmentat posteriorment l'interès per la tipografia web, així com l'ús de la descàrrega de fonts.

CSS1

En la primera especificació CSS,^[2] els autors especificaen característiques de tipus de lletra a través d'una sèrie de propietats:

• font-family
• font-style
• font-variant
• font-weight
• font-size

Totes les fonts van ser identificades únicament pel seu nom. Més enllà de les propietats esmentades anteriorment, els dissenyadors no tenien manera d'estilitzar els tipus de lletra, i no hi havia cap mecanisme per seleccionar tipus de lletra no presents al sistema client.

Tipus de lletra segurs per a la web

Els tipus de lletra segurs a la web són tipus de lletra susceptibles d'estar presents en una àmplia gamma de sistemes informàtics, i utilitzats pels autors de contingut web per augmentar la probabilitat que el contingut es mostri en el tipus de lletra escollit. Si un visitant d'un lloc web no té el tipus de lletra especificat, el seu navegador intenta seleccionar una alternativa similar, basada en els tipus de lletra alternatius especificats per l'autor i les famílies genèriques o utilitza la substitució de tipus de lletra definida en el sistema operatiu del visitant.

Tipus de lletra principals de Microsoft per al web

Des que es va llançar sota els tipus de lletra Bàsic de Microsoft per al programa web, Arial, Geòrgia i Verdana s'han convertit en tres tipus de lletra de facto de la web.

Per assegurar-se que tots els usuaris web tenien un conjunt bàsic de tipus de lletra, Microsoft va iniciar la iniciativa Core fonts for the Web el 1996 (finalitzada el 2002). Les fonts publicades inclouen Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings i Verdana, sota un EULA que els feia distribuïbles lliurement, però també limitava alguns drets al seu ús. La seva alta taxa de penetració els ha convertit en un element bàsic per als dissenyadors web. No obstant això, la majoria de distribucions de Linux no inclouen aquests tipus de lletra per defecte.

CSS2 va intentar augmentar les eines disponibles per als desenvolupadors web afegint síntesi de tipus de lletra, coincidència de tipus de lletra millorada i la possibilitat de descarregar tipus de lletra remots. ^[3]

Algunes propietats de tipus de lletra CSS2 es van eliminar de CSS2.1 i més tard es van incloure a CSS3. ^[4][5]

Tipus de lletra de reserva

L'especificació CSS permet que diversos tipus de lletra apareguin com a tipus de lletra de reserva. ^[6] A CSS, la propietat accepta una llista de cares de tipus de lletra separades per comes per utilitzar, així: font-family

font-family: "Nimbus Sans L", Helvetica, Arial, sans-serif;

El primer tipus de lletra especificat és el tipus de lletra preferit. Si aquest tipus de lletra no està disponible, el navegador web intentarà utilitzar el tipus de lletra següent de la llista. Si no es troba cap dels tipus de lletra especificats, el navegador mostrarà el tipus de lletra per defecte. Aquest mateix procés també passa per caràcter si el navegador intenta mostrar un caràcter no present en el tipus de lletra especificat.

Famílies de tipus de lletra genèrics

Per donar als dissenyadors web un cert control sobre l'aparició de tipus de lletra a les seves pàgines web, fins i tot quan els tipus de lletra especificats no estan disponibles, l'especificació CSS permet l'ús de diverses famílies de tipus de lletra genèrics. Aquestes famílies estan dissenyades per dividir els tipus de lletra en diverses categories en funció del seu aspecte general. Normalment s'especifiquen com els últims d'una sèrie de tipus de lletra de reserva, com a últim recurs en el cas que no hi hagi cap de les fonts especificades per l'autor. Durant diversos anys, hi havia cinc famílies genèriques:^[6]

Sans-serif

Tipus de lletra que no tenen marques decoratives, o serifs, a les seves lletres. Aquests tipus de lletra sovint es consideren més fàcils de llegir a les pantalles. ^[7]

Serif

Tipus de lletra que tenen marques decoratives, o serifs, presents en els seus personatges. Aquests tipus de lletra s'utilitzen tradicionalment en llibres impresos.

Monoespai

Tipus de lletra en què tots els caràcters són igual d'amples.

Cursiva

Tipus que s'assemblen a l'escriptura cursiva. Aquestes fonts poden tenir un aspecte decoratiu, però poden ser difícils de llegir a mides petites, de manera que generalment s'utilitzen amb moderació.

Fantasia

Tipus de lletra que poden contenir símbols o altres propietats decoratives, però que encara representen el caràcter especificat.

Tipus de lletra CSS que funcionen esborrany 4 amb suport menor del navegador

^[8] Sistema-ui

Tipus de lletra predeterminats en un sistema determinat: l'objectiu d'aquesta opció és permetre que el contingut web s'integri amb l'aspecte i la sensació del sistema operatiu natiu.

ui-serif

Tipus de lletra per defecte d'un sistema determinat en un estil serif

ui-sans-serif

Tipus de lletra predeterminats d'un sistema determinat en un estil sense serif

ui-monospace

Tipus de lletra per defecte d'un sistema determinat en un estil monoespai

ui-arrodonit

Tipus de lletra per defecte d'un sistema determinat en un estil arrodonit

Emoji

Tipus de lletra que utilitzen emoji

Matemàtiques

Tipus de lletra per a fórmules i expressions matemàtiques complexes.

Fangsong (xinès: 仿宋体)

Tipografies xineses que es troben entre les formes serif Song i Cursive Kai. Aquest estil s'utilitza sovint per als documents governamentals.

Tipus de lletra web

Història

Una tècnica per referir-se i descarregar automàticament tipus de lletra remots es va especificar per primera vegada a l'especificació CSS2, que va introduir la construcció. En aquell moment, l'obtenció de fitxers de tipus de lletra de la web era controvertida perquè els tipus de lletra destinats a ser utilitzats només per a determinades pàgines web també es podien descarregar i instal·lar incomplint la llicència de tipus de lletra. ^[9]@font-face

Microsoft va afegir per primera vegada suport per a tipus de lletra EOT descarregables a Internet Explorer 4 el 1997. Els autors havien d'utilitzar l'eina WEFT propietària per crear un fitxer de tipus de lletra subsetted per a cada pàgina. EOT va mostrar que els webfonts podien funcionar i el format va veure algun ús en sistemes d'escriptura no suportats per sistemes operatius comuns. No obstant això, el format mai va obtenir una acceptació generalitzada i finalment va ser rebutjat pel W3C. ^[10]

El 2006, Håkon Wium Lie va començar una campanya contra l'ús d'EOT i, més aviat, els navegadors web suporten formats de tipus de lletra d'ús comú. ^[11][12][13] El suport per als formats de tipus de lletra TrueType i OpenType d'ús comú s'ha implementat des de llavors a Safari 3.1, Opera 10, Mozilla Firefox 3.5 i Internet Explorer 9.

El 2010, el mètode de compressió WOFF per als tipus de lletra TrueType i OpenType va ser enviat al W3C per la Fundació Mozilla, Opera Software i Microsoft, i des de llavors els navegadors han afegit suport. ^[14][15][16]

Google Fonts va ser llançat el 2010 per servir webfonts sota llicències de codi obert. El 2016, més de 800 famílies webfont estan disponibles. ^[17]

Webfonts s'han convertit en una eina important per als dissenyadors web i a partir de 2016 la majoria dels llocs utilitzen webfonts. ^[18]

Formats de fitxer

Mitjançant l'ús d'una tècnica d'incrustació CSS específica^[19] és possible incrustar tipus de lletra de manera que funcionin amb IE4 +, Firefox 3.5+, Safari 3.1+, Opera 10+ i Chrome 4.0+. Això permet a la gran majoria d'usuaris de la web accedir a aquesta funcionalitat. Algunes foneries comercials s'oposen a la redistribució de les seves fonts. Per exemple, Hoefler & Frere-Jones diu que, mentre que "... amb entusiasme [suport] l'aparició d'una web més expressiva en la qual els dissenyadors poden utilitzar de manera segura i fiable fonts d'alta qualitat en línia, l'actual lliurament de fonts usades es considera "distribució il·legal" per la foneria i no està permès. ^[20] En canvi, Hoefler & ofereix un sistema de lliurament de fonts propietari arrelat al núvol. Moltes altres foneries de tipus comercial aborden la redistribució dels seus tipus de lletra oferint una llicència específica, coneguda com a llicència de tipus de lletra web, que permet l'ús del programari de tipus de lletra per mostrar contingut a la web, un ús normalment prohibit per les llicències bàsiques d'escriptori. Naturalment, això no interfereix amb les fonts i foneries sota llicències lliures. ^{[m 1]}@font-face@font-face

TrueDoc

TrueDoc, tot i que no és específicament una especificació webfont, va ser el primer estàndard per incrustar tipus de lletra. Va ser desenvolupat per la foneria tipus Bitstream el 1994, i es va donar suport nativament a Netscape Navigator 4, el 1996. A causa de les restriccions de llicència de codi obert, amb Netscape incapaç de llançar el codi font de Bitstream, el suport natiu per a la tecnologia va acabar quan es va llançar netscape Navigator 6. Hi havia disponible un connector ActiveX per afegir suport per a TrueDoc a Internet Explorer, però la tecnologia havia de competir amb els tipus de lletra Embedded OpenType de Microsoft, que havien suportat de forma nativa al seu navegador Internet Explorer des de la versió 4.0. ^[21] Un altre impediment va ser la manca d'eines de codi obert o gratuïtes per crear webfonts en format TrueDoc, mentre que Microsoft va posar a disposició una eina gratuïta d'incrustació web de tipus de lletra per crear webfonts en el seu format.

OpenType incrustat

Internet Explorer ha suportat la incrustació de tipus de lletra a través de l'estàndard opentype incrustat propietari des de la versió 4.0. Utilitza tècniques de gestió de drets digitals per ajudar a evitar que els tipus de lletra es copiïn i s'utilitzin sense llicència. S'ha formalitzat un subconjunt simplificat d'EOT sota el nom de CWT (Compatibility Web Type, anteriorment EOT-Lite)^[22]

Gràfics vectorials escalables

La tipografia web s'aplica a SVG de dues maneres:

1. Totes les versions de l'especificació SVG 1.1, inclòs el subconjunt SVGT, defineixen un mòdul de tipus de lletra que permet la creació de tipus de lletra dins d'un document SVG. Safari va introduir el suport per a moltes d'aquestes propietats en la versió 3. Opera va afegir suport preliminar a la versió 8.0, amb suport per a més propietats a la 9.0.
2. L'especificació SVG permet que CSS s'apliqui als documents SVG de manera similar als documents HTML, i la regla es pot aplicar al text dels documents SVG. Opera va afegir suport per a això a la versió 10,^[23] i WebKit, ja que la versió 325 també admet aquest mètode utilitzant només tipus de lletra SVG.@font-face

Tipus de lletra gràfics vectorials escalables

Els tipus de lletra SVG eren un estàndard de tipus de lletra W3C que utilitzava gràfics SVG que es va convertir en un subconjunt de tipus de lletra OpenType. ^[24] Permetia tipus de lletra multicolor^[25] o animats. ^[26] Va ser primer un subconjunt d'especificacions SVG 1.1^[27] però ha estat obsolet^[28] en l'especificació SVG 2.0. Els tipus de lletra SVG com a format independent són compatibles amb la majoria dels navegadors, a part d'IE i Firefox, i està obsoleta a Chrome (i Chromium). ^[29] Això ara està generalment obsolet; l'estàndard amb el que la majoria del proveïdor de navegadors va estar d'acord és el subconjunt de tipus de lletra SVG inclòs a OpenType (i després al superconjunt WOFF, vegeu més avall), anomenat SVGOpenTypeFonts. ^[30] Firefox ha suportat SVG OpenType des de Firefox 26.

TrueType/OpenType

L'enllaç als tipus de lletra TrueType (TTF) i OpenType (TTF/OTF) estàndard de la indústria és compatible amb Mozilla Firefox 3.5+, Opera 10+,^[31] Safari 3.1+,^[32] i Google Chrome 4.0+. ^[33] Internet Explorer 9+ només admet aquells tipus de lletra amb permisos d'incrustació definits com a instal·lables. ^[34]

Format de tipus de lletra obert web

El format de tipus de lletra obert web (WOFF) és essencialment OpenType o TrueType amb compressió i metadades addicionals. WOFF és compatible amb Mozilla Firefox 3.6+,^[35] Google Chrome 5+,^[36][37] Opera Presto,^[38] i és compatible amb Internet Explorer 9 (des del 14 de març de 2011). ^[39] El suport està disponible a Mac OS X Lion's Safari des del llançament 5.1.

Tipus de lletra Unicode

Només dos tipus de lletra disponibles per defecte a la plataforma Windows, Microsoft Sans Serif i Lucida Sans Unicode, proporcionen un ampli repertori de caràcters Unicode. Un error a Verdana (i el maneig diferent de la mateixa per part de diversos agents d'usuari) dificulta la seva usabilitat on es desitgen combinar caràcters.

En plataformes de programari lliure i de codi obert com Linux, GNU Unifont i GNU FreeFont proporcionen una àmplia gamma de caràcters Unicode.

Alternatives

Un obstacle comú en el disseny web és el disseny de maquetes que inclouen tipus de lletra que no són segures per a la web. Hi ha diverses solucions per a situacions com aquesta. Una solució comuna és reemplaçar el text per un tipus de lletra similar amb seguretat web o utilitzar una sèrie de tipus de lletra alternatius d'aspecte similar.

Una altra tècnica és la substitució d'imatges. Aquesta pràctica consisteix a superposar text amb una imatge que contingui el mateix text escrit al tipus de lletra desitjat. Això és bo per a propòsits estètics, però evita la selecció de text, augmenta l'ús d'ample de banda, és dolent per a l'optimització de motors de cerca i fa que el text sigui inaccessible per als usuaris amb discapacitats.

També és comú l'ús de solucions basades en Flash com sIFR. Això és similar a les tècniques de reemplaçament d'imatges, tot i que el text és seleccionable i es renderitza com a vector. No obstant això, aquest mètode requereix la presència d'un connector propietari en el sistema d'un client.

Una altra solució és utilitzar Javascript per substituir el text per VML (per a Internet Explorer) o SVG (per a tots els altres navegadors). ^[40]

Els serveis d'allotjament de tipus de lletra permeten als usuaris pagar una subscripció per allotjar tipus de lletra no segurs per a la web en línia. La majoria dels serveis allotgen el tipus de lletra per a l'usuari i proporcionen la declaració CSS necessària. @font-face

Un exemple d'una configuració CSS: @font-face

 @font-face {
 	font-family: 'Journal';
 		src: url('http://your-own.site/fonts/journal/journal.woff') format('woff'),
 		url('http://your-own.site/fonts/journal/journal.svg#Journal') format('svg'),
 		url('http://your-own.site/fonts/journal/journal.ttf') format('truetype'),
 		url('http://your-own.site/fonts/journal/journal.eot'),
 		url('http://your-own.site/fonts/journal/journal.eot?#iefix') format('embedded-opentype');
 	font-weight: normal;
 	font-style: normal;
 }

Consideracions pràctiques

Aquesta secció necessita una ampliació. Podeu ajudar-lo afegint-hi. (agost 2014)

A la pràctica, importa no només quin navegador web està utilitzant l'audiència, sinó també com es configura el seu sistema operatiu. El 2010, el dissenyador de tipus i consultor Thomas Phinney (vicepresident de FontLab i anteriorment amb Adobe^[41]) va escriure un procés pas a pas per trobar la millor solució de renderització, que, més o menys de broma, utilitza un gran nombre de declaracions de goto. ^[42] Un diagrama de flux més orientat visualment es va publicar el mateix any al fòrum Typophile per Miha Zajec. ^[43]

Vegeu també

• Substitució escalable inman flash
• Llista de RFC tal com s'esmenta a WOFF (esborrany de 2009-10-23):
  • Especificació del format de dades comprimit RFC 1950 ZLIB
  • RFC 2119 Paraules clau per utilitzar-les en RFC per indicar els nivells de requisit
  • RFC 4647 Coincidència d'etiquetes de llengua

Notes

Referències

Enllaços externs

• Especificació de tipus de lletra CSS del W3C
• Typoscan és una eina de disseny que us ajuda a escanejar la tipografia de qualsevol lloc web en menys d'un segon.
• Fonts de Google per al lloc web