{"id":334,"date":"2017-02-09T13:26:24","date_gmt":"2017-02-09T13:26:24","guid":{"rendered":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/?page_id=334"},"modified":"2019-03-04T13:31:41","modified_gmt":"2019-03-04T13:31:41","slug":"1-lletres-20","status":"publish","type":"page","link":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/1-lletres-20\/","title":{"rendered":"1. Lletres"},"content":{"rendered":"<p><\/p>\n<h3><strong>1.11. Tipografia per a internet<\/strong><\/h3>\n<p>Hist\u00f2ricament, els navegadors han hagut de carregar les fonts disponibles en el sistema operatiu de l\u2019usuari per tal de mostrar el text a les p\u00e0gines. Aix\u00f2 deixava una paleta tipogr\u00e0fica bastant limitada als dissenyadors de webs, consistent en una llista curta de lletres m\u00e9s o menys universals, com hem vist abans.<\/p>\n<p>Durant els primers anys d\u2019internet no hi havia la possibilitat de controlar ni triar la tipografia per a una p\u00e0gina web, per\u00f2 l\u2019any 1995 es va incloure l\u2019etiqueta <span style=\"font-family: Courier;\">&lt;font&gt;<\/span> en el llenguatge HTML. A partir d\u2019aquest moment ja es va poder determinar la font triada i una llista de possibles substitutes, anomenada <strong><em>font stack<\/em><\/strong>. Les <em>font stacks<\/em> segures inclouen una tipografia instal\u00b7lada per omissi\u00f3 en Windows, Mac i Linux i l\u2019\u00faltim element de la cadena fa refer\u00e8ncia a una fam\u00edlia estil\u00edstica perqu\u00e8 el navegador tri\u00ef una font el m\u00e9s semblant possible, en el cas de no trobar les anteriors. Per exemple:<\/p>\n<div class=\"definicio\">\n<p><span style=\"font-family: Courier;\">font-family: \u00abURW Bookman L\u00bb, \u00abGeorgia\u00bb, \u00abTimes New Roman\u00bb, serif;<\/span><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Aix\u00ed doncs, en aquell temps, els dissenyadors que volien fer servir altres tipografies no presents en els sistemes m\u00e9s comuns havien de convertir el text compost en una imatge.<\/p>\n<p>L\u2019any 1998 es va llan\u00e7ar CSS2, que inclo\u00efa una regla per a instal\u00b7lar una font en el servidor i que es pogu\u00e9s baixar com ho fa un v\u00eddeo o una fotografia (@font-face), per\u00f2 el seu \u00fas no es va estandarditzar pels problemes que plantejava amb les llic\u00e8ncies de la majoria de distribu\u00efdores. Anys despr\u00e9s es van llan\u00e7ar els primers formats tipogr\u00e0fics especialment dissenyats per al web (trueDoc i EOT), per\u00f2 tampoc es van implantar.<\/p>\n<p>El format finalment triat pel W3C (World Wide Web Consortium) i que est\u00e0 en proc\u00e9s de convertir-se en est\u00e0ndard \u00e9s el WOFF (Web Open Font Format). B\u00e0sicament es tracta d\u2019una font amb els mateixos continguts que una OpenType per\u00f2 comprimida per a web i amb un encap\u00e7alament que indica que no es pot instal\u00b7lar de manera permanent. L\u2019objectiu del format WOFF, que t\u00e9 el vistiplau de la ind\u00fastria, \u00e9s permetre la distribuci\u00f3 de tipografies d\u2019un servidor a un client en una xarxa, de manera que sigui universalment acceptada pels navegadors.<\/p>\n<p>Hi ha dues alternatives interessants a aquest sistema: la subscripci\u00f3 a un servei extern (com <a href=\"https:\/\/typekit.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Typekit<\/a>) i el servei gratu\u00eft <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a>, que amplia el seu cat\u00e0leg cada dia sense cost per a l\u2019usuari final i que ja suposa una forta amena\u00e7a per als distribu\u00efdors tradicionals de tipografies.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Conclusions<\/strong><\/h4>\n<p>Durant els primers anys d\u2019internet no hi havia la possibilitat de controlar ni triar la tipografia per a una p\u00e0gina web, per\u00f2 l\u2019any 1995 es va incloure l\u2019etiqueta <span style=\"font-family: Courier;\">&lt;font&gt;<\/span> en el llenguatge HTML. A partir d\u2019aquest moment ja es va poder determinar la font triada i una llista de possibles substitutes, anomenada <em>font stack<\/em>.<\/p>\n<p>El format finalment triat pel W3C (World Wide Web Consortium) i que est\u00e0 en proc\u00e9s de convertir-se en est\u00e0ndard \u00e9s el WOFF (Web Open Font Format). B\u00e0sicament es tracta d\u2019una font amb els mateixos continguts que una OpenType per\u00f2 comprimida per a web i amb un encap\u00e7alament que indica que no es pot instal\u00b7lar de manera permanent.<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>1.11. Tipografia per a internet Hist\u00f2ricament, els navegadors han hagut de carregar les fonts disponibles en el sistema operatiu de l\u2019usuari per tal de mostrar el text a les p\u00e0gines. Aix\u00f2 deixava una paleta tipogr\u00e0fica bastant limitada als dissenyadors de webs, consistent en una llista curta de lletres m\u00e9s o menys universals, com hem vist [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/pages\/334"}],"collection":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":14,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/pages\/334\/revisions"}],"predecessor-version":[{"id":729,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/pages\/334\/revisions\/729"}],"wp:attachment":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-json\/wp\/v2\/media?parent=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}