{"id":252,"date":"2019-01-03T12:48:58","date_gmt":"2019-01-03T10:48:58","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/?page_id=252"},"modified":"2019-01-03T12:48:58","modified_gmt":"2019-01-03T10:48:58","slug":"4-4-hinting","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/4-4-hinting\/","title":{"rendered":"4.4. <em>Hinting<\/em>"},"content":{"rendered":"<p>Uno de los problemas m\u00e1s importantes que presentan las tipograf\u00edas cuando se aplican en elementos digitales \u2014como una web, por ejemplo\u2014 es c\u00f3mo se visualizan en una pantalla, sobre todo si las trabajamos en tama\u00f1os peque\u00f1os.<\/p>\n<p>En tipograf\u00eda digital todo lo que vemos est\u00e1 formado por p\u00edxeles, eso significa que cuando vemos una fuente en pantalla, lo que realmente apreciamos es una versi\u00f3n en baja resoluci\u00f3n de la fuente que tenemos instalada en nuestro ordenador, una versi\u00f3n creada en mapa de bits que se adapta lo mejor que puede a los p\u00edxeles de la pantalla.<\/p>\n<p>Si esta adaptaci\u00f3n no es del todo correcta, pueden aparecer algunas incorrecciones como la desaparici\u00f3n de algunos nexos entre astas y remates, la p\u00e9rdida de simetr\u00eda, las diagonales irregulares o el desequilibrio entre grosores de asta y de contraformas.<\/p>\n<p>La soluci\u00f3n para una correcta visualizaci\u00f3n de una fuente en cualquier tipo de navegador o elemento digital es el <em>hinting<\/em>.<\/p>\n<div class=\"featured featured-blue\"><p>Esta t\u00e9cnica es indispensable para cualquier fuente que intente funcionar en cuerpos peque\u00f1os y en dispositivos de baja resoluci\u00f3n.<\/p>\n<p>Es un m\u00e9todo para definir exactamente qu\u00e9 p\u00edxeles se activan o se desactivan para crear el mejor dibujo posible de un car\u00e1cter.<\/p>\n<p>Un <em>hint<\/em> es una instrucci\u00f3n matem\u00e1tica que se agrega a una fuente con el fin de modificar el dibujo de los caracteres en determinados cuerpos.<\/p>\n<\/div>\n<figure id=\"attachment_124\" aria-describedby=\"caption-attachment-124\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-124\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_055.jpg\" alt=\"\" width=\"800\" height=\"499\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_055.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_055-300x187.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_055-768x479.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-124\" class=\"wp-caption-text\">Diferencia entre el vector de una fuente y su correspondiente <em>hinting.<\/em><\/figcaption><\/figure>\n<figure id=\"attachment_125\" aria-describedby=\"caption-attachment-125\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-125\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_056.jpg\" alt=\"\" width=\"800\" height=\"425\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_056.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_056-300x159.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_056-768x408.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-125\" class=\"wp-caption-text\">Muestra gr\u00e1fica de c\u00f3mo una fuente sin <em>hinting<\/em>, a medida que va reduciendo su tama\u00f1o de letra, pierde legibilidad.<\/figcaption><\/figure>\n<figure id=\"attachment_126\" aria-describedby=\"caption-attachment-126\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-126\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_057.jpg\" alt=\"\" width=\"800\" height=\"440\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_057.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_057-300x165.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_057-768x422.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-126\" class=\"wp-caption-text\">Ejemplo de c\u00f3mo var\u00eda la apariencia de una tipograf\u00eda con y sin <em>hinting.<\/em><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Uno de los problemas m\u00e1s importantes que presentan las tipograf\u00edas cuando se aplican en elementos digitales \u2014como una web, por ejemplo\u2014 es c\u00f3mo se visualizan en una pantalla, sobre todo si las trabajamos en tama\u00f1os peque\u00f1os. En tipograf\u00eda digital todo lo que vemos est\u00e1 formado por p\u00edxeles, eso significa que cuando vemos una fuente en [&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\/es\/wp-json\/wp\/v2\/pages\/252"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":4,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/pages\/252\/revisions"}],"predecessor-version":[{"id":290,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/pages\/252\/revisions\/290"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/media?parent=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}