{"id":491,"date":"2019-01-07T14:50:53","date_gmt":"2019-01-07T12:50:53","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/?page_id=491"},"modified":"2019-01-10T16:30:13","modified_gmt":"2019-01-10T14:30:13","slug":"4-3-fonts-per-a-impressio-enfront-de-fonts-per-a-pantalla","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/4-3-fonts-per-a-impressio-enfront-de-fonts-per-a-pantalla\/","title":{"rendered":"4.3. Fonts per a impressi\u00f3 enfront de fonts per a pantalla"},"content":{"rendered":"<p>Les fonts per a impressi\u00f3 o <em>desktop fonts<\/em> \u2014tamb\u00e9 anomenades fonts d\u2019escriptori\u2014 han estat dissenyades per al seu \u00fas en sistemes d\u2019impressi\u00f3 tradicionals sense connexi\u00f3 i plantejades per ser reprodu\u00efdes en alta resoluci\u00f3 \u2014a partir de 150 punts per polzada (ppp).<\/p>\n<p>Aquest tipus de fonts estan dissenyades per poder instal\u00b7lar-se en l\u2019ordinador personal i poder ser usades en aplicacions com Microsoft Word o Adobe Illustrator. Algunes fonts disposen de caracter\u00edstiques especials en les seves versions OpenType que donen a l\u2019usuari gran flexibilitat per dissenyar, com els car\u00e0cters alternatius o els diferents numerals.<\/p>\n<p>Solen tenir una extensi\u00f3 .otf, .ttf o .ps1, que corresponen als formats OpenType, TrueType o PostScript.<\/p>\n<figure id=\"attachment_121\" aria-describedby=\"caption-attachment-121\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-121\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_052.jpg\" alt=\"\" width=\"800\" height=\"428\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_052.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_052-300x161.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_052-768x411.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-121\" class=\"wp-caption-text\">Tipografia Times New Roman, dissenyada el 1932 per Stanley Morison en exclusiva per al diari <em>The Times.<\/em><\/figcaption><\/figure>\n<figure id=\"attachment_122\" aria-describedby=\"caption-attachment-122\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-122\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_053.jpg\" alt=\"\" width=\"800\" height=\"428\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_053.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_053-300x161.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_053-768x411.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-122\" class=\"wp-caption-text\">Tipografia Helvetica, dissenyada el 1957 per Max Miedinger i plantejada per a la seva aplicaci\u00f3 en cartelleria i imatge corporativa<\/figcaption><\/figure>\n<figure id=\"attachment_123\" aria-describedby=\"caption-attachment-123\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-123\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_054.jpg\" alt=\"\" width=\"800\" height=\"428\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_054.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_054-300x161.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_054-768x411.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-123\" class=\"wp-caption-text\">Tipografia Din 1451, encarregada pel Deutsches Institut f\u00fcr Normung el 1931 i dissenyada exclusivament per aplicar en senyalitzaci\u00f3 i r\u00e8tols en vials<\/figcaption><\/figure>\n<p>Les fonts per a pantalla, tamb\u00e9 anomenades <em>web<\/em> <em>fonts<\/em>, s\u00f3n tipografies el disseny de les quals est\u00e0 plantejat en exclusiva per al seu \u00fas en dispositius de baixa resoluci\u00f3 \u201472 punts per polzada (ppp)\u2014, com les p\u00e0gines web, els tel\u00e8fons intel\u00b7ligents o tauletes. Aquest tipus de fonts es carreguen mitjan\u00e7ant CSS per la regla @font-face; aix\u00f2 fa que el navegador de l\u2019usuari pugui descarregar la <em>web font<\/em> dels servidors, de les respectives foses digitals i pugui renderitzar correctament els textos per a una bona visualitzaci\u00f3.<\/p>\n<p>A difer\u00e8ncia de les fonts <em>desktop<\/em>, les tipografies web no es poden instal\u00b7lar en el sistema per al seu \u00fas en diferents aplicacions.<\/p>\n<p>Els formats m\u00e9s comuns en aquest tipus de fonts s\u00f3n els seg\u00fcents:<\/p>\n<ul>\n<li><strong>WOFF (Web Open Font Format)<\/strong>. Desenvolupat durant l\u2019any 2009, cont\u00e9 tipografies OpenType o TrueType amb metadades (grups de dades que descriuen el contingut informatiu d\u2019un objecte) en format comprimit. Creat per Mozilla, Microsoft i Opera Software amb l\u2019objectiu de ser utilitzat exclusivament en web, la seva compressi\u00f3 permet carregar m\u00e9s r\u00e0pid i les metadades permeten incloure la informaci\u00f3 de les llic\u00e8ncies en l\u2019arxiu de fonts.<\/li>\n<li><strong>EOT (Embedded Open Type)<\/strong>. Aquest format \u00e9s una mica particular, ja que \u00e9s un tipus de fitxer propi creat per a Internet Explorer ja que aquest no suporta totes les caracter\u00edstiques que ofereix @font-face. Podr\u00edem dir que s\u2019ha creat a mida solament per a aquest tipus de navegador. Pel que fa a caracter\u00edstiques de dades i compressi\u00f3, s\u00f3n les mateixes que el format WOFF.<\/li>\n<li><strong>SVG (Scalable Vector Graphics)<\/strong>. Aquest format de fonts cont\u00e9 atributs similars a les d\u2019un element vectorial, \u00e9s a dir, s\u00f3n escalables i no perden definici\u00f3. Aix\u00ed i tot, l\u2019inconvenient m\u00e9s gran del format SVG \u00e9s la falta d\u2019informaci\u00f3 extra de la font per representar mides petites amb qualitat i llegibilitat en la pantalla. Aix\u00f2 significa que no \u00e9s molt aconsellable si es vol treballar en cossos de text petits. Si el projecte en l\u00ednia \u00e9s per a usuaris d\u2019iPhone i iPad, les fonts SVG s\u00f3n la millor opci\u00f3, ja que \u00e9s l\u2019\u00fanic perm\u00e8s per al navegador Safari i el sistema operatiu iOS.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Les fonts per a impressi\u00f3 o desktop fonts \u2014tamb\u00e9 anomenades fonts d\u2019escriptori\u2014 han estat dissenyades per al seu \u00fas en sistemes d\u2019impressi\u00f3 tradicionals sense connexi\u00f3 i plantejades per ser reprodu\u00efdes en alta resoluci\u00f3 \u2014a partir de 150 punts per polzada (ppp). Aquest tipus de fonts estan dissenyades per poder instal\u00b7lar-se en l\u2019ordinador personal i poder [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/pages\/491"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/comments?post=491"}],"version-history":[{"count":4,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/pages\/491\/revisions"}],"predecessor-version":[{"id":643,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/pages\/491\/revisions\/643"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-json\/wp\/v2\/media?parent=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}