{"id":4560,"date":"2018-06-06T23:55:16","date_gmt":"2018-06-07T02:55:16","guid":{"rendered":"http:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/?p=4560"},"modified":"2018-06-07T00:01:53","modified_gmt":"2018-06-07T03:01:53","slug":"tipografia-todo-terreno","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/tipografia-todo-terreno\/","title":{"rendered":"Tipograf\u00eda todo terreno"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Las tipograf\u00edas se dise\u00f1an en forma vectorial con el fin de que puedan ser ampliadas o reducidas en cuanto queramos, lamentablemente pocos son los medios en los que se reproducen de esa manera. En realidad, en las pantallas e incluso en los medios impresos<\/span><\/p>\n<p><span style=\"font-weight: 400\">debe pasar por un proceso de rasterizado en el cual se esa informaci\u00f3n sea traducida a<\/span><i><span style=\"font-weight: 400\"> mapa de bits,<\/span><\/i><span style=\"font-weight: 400\"> es decir una especie de grilla de pixeles o puntos de color, denominada matriz, que se necesita para representar una imagen en un monitor, papel u otro dispositivo de representaci\u00f3n. En resoluciones altas este proceso no afecta la forma del signo pero en medias o bajas, como en toda traducci\u00f3n, se suelen perder partes fundamentales de los signos que afectan principalmente a todos los ajustes \u00f3pticos realizados por los dise\u00f1adores al momento de ajustar una tipograf\u00eda, ya que formas curvas o diagonales se deben representar en grillas cuadriculadas y el sistema por defecto toma su propia decisi\u00f3n al respecto. A continuaci\u00f3n se detallan algunos de los problemas m\u00e1s comunes.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Desaparici\u00f3n de alg\u00fan elemento, sobre todo los nexos entre astas y algunos remates:<\/span><\/p>\n<p><span style=\"font-weight: 400\"><img decoding=\"async\" src=\"https:\/\/graffica.info\/wp-content\/uploads\/2017\/05\/problemas-hinting1.jpg\" alt=\"En esta hache las astas verticales no llegan a ocupar el 50% de varios p\u00c3\u00adxeles, por lo que el sistema no los pinta de negro\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400\">P\u00e9rdida de simetr\u00eda:<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/graffica.info\/wp-content\/uploads\/2017\/05\/problemas-hinting3b.jpg\" alt=\"Este punto deber\u00c3\u00ada ser sim\u00c3\u00a9trico, pero uno de los p\u00c3\u00adxeles que deber\u00c3\u00adan pintarse de negro no contiene m\u00c3\u00a1s de un 50% de la figura dentro y deforma el resultado\" \/><\/p>\n<p><span style=\"font-weight: 400\">Diagonales irregulares:<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/graffica.info\/wp-content\/uploads\/2017\/05\/problemas-hinting2.jpg\" alt=\"Aqu\u00c3\u00ad vemos perfectamente como, por un pelo, el 4\u00c2\u00ba p\u00c3\u00adxel de la 3\u00c2\u00aa fila se pinta de negro y deforma la diagonal\" \/><\/p>\n<p><span style=\"font-weight: 400\">Desequilibrio en el grosor de astas:<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/graffica.info\/wp-content\/uploads\/2017\/05\/problemas-hinting4.jpg\" alt=\"En esta eme, las 3 astas verticales deber\u00c3\u00adan tener un p\u00c3\u00adxel de grosor, y los dos contragrafismos internos deber\u00c3\u00adan tener un ancho de 3 p\u00c3\u00adxeles\" \/><\/p>\n<p><span style=\"font-weight: 400\">Exageraci\u00f3n de los ajustes \u00f3pticos, como la diferencia de grosores en las astas de caja alta y baja, o la diferencia de altura entre figuras de forma rectangular, triangular y circular:<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/graffica.info\/wp-content\/uploads\/2017\/05\/problemas-hinting5.jpg\" alt=\"Estas dos haches deber\u00c3\u00adan tener el mismo grosor de astas verticales (de 1 p\u00c3\u00adxel), pero la ligera variaci\u00c3\u00b3n entre may\u00c3\u00basculas y min\u00c3\u00basculas se exagera mucho a este tama\u00c3\u00b1o\" \/><\/p>\n<p><span style=\"font-weight: 400\">Con el fin de solucionar los problemas relacionados a esta traducci\u00f3n se desarroll\u00f3 el <\/span><i><span style=\"font-weight: 400\">hinting <\/span><\/i><span style=\"font-weight: 400\">(derivada de <\/span><i><span style=\"font-weight: 400\">hint<\/span><\/i><span style=\"font-weight: 400\"> y traducida como \u201cindicaci\u00f3n\u201d). Se podr\u00eda entender como una serie de instrucciones que llevan los archivos tipogr\u00e1ficos en los cuales se le asignan a cada signo datos de c\u00f3mo se debe realizar esa traducci\u00f3n. <\/span><span style=\"font-weight: 400\">Dando como resultado una forma m\u00e1s n\u00edtida, y completamente esencial para producir textos claros y legibles en resoluciones de pantalla bajas y cuerpos peque\u00f1os.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Se desarrollaron dos soluciones, una de ellas es el PostScript, creado por Adobe el cual consiste en una t\u00e9cnica llamada \u201cgrid warping\u201d. En este caso la grilla se termina ajustando a las necesidades de la tipograf\u00eda, necesitando entonces que el software que realiza el rasterizado cuente con esta tecnolog\u00eda. En cambio la segunda soluci\u00f3n, desarrollada por Apple y conocida como TrueType, consisti\u00f3 en desarrollar un complejo lenguaje matem\u00e1tico el cual permitir\u00eda que las tipograf\u00edas se acomoden a la grilla y no viceversa.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Este \u00faltimo proceso, es el m\u00e1s utilizado pero tambi\u00e9n el m\u00e1s engorroso, ya que necesita que se vayan generando para cada signo y en ciertas resoluciones diferentes ajustes para que su visualizaci\u00f3n pueda ser la m\u00e1s \u00f3ptima.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Queda considerar cu\u00e1nto tiempo m\u00e1s vamos a necesitar tener en cuenta estas complejidades en relaci\u00f3n a la visualizaci\u00f3n de los contenidos, ya que los tiempos de la tecnolog\u00eda suelen ser bastante acelerados y los usuarios cada vez m\u00e1s tienen acceso a dispositivos capaces de procesar en mayor calidad las im\u00e1genes y los textos, elementos que se volvieron fundamentales a causa de que una de las formas de comunicaci\u00f3n m\u00e1s utilizadas hoy en d\u00eda son a trav\u00e9s de pantallas.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Links relacionados:<\/p>\n<p><a href=\"https:\/\/core.ac.uk\/download\/pdf\/62722167.pdf\">https:\/\/core.ac.uk\/download\/pdf\/62722167.pdf<\/a><br \/>\n<a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/truetype\/hinting\">https:\/\/docs.microsoft.com\/en-us\/typography\/truetype\/hinting<\/a><br \/>\n<a href=\"https:\/\/graffica.info\/hinting\/\">https:\/\/graffica.info\/hinting\/<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando hablamos de tipograf\u00eda tenemos que entender que los peque\u00f1os detalles hacen grandes diferencias. El hinting es uno de estos casos.<\/p>\n","protected":false},"author":36,"featured_media":4586,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Tipograf\u00eda todo terreno  #\u200eTipoblog #Tipograf&iacute;a2 #C&aacute;tedraCosgaya #\u200eFADU #\u200eUBA","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[21,20,25],"tags":[104,98,101,102,99,103,92,100],"class_list":["post-4560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ciencia","category-educacion","category-tecnologia","tag-ajustes","tag-hinting","tag-opentype","tag-optimizacion","tag-pantalla","tag-rasterizado","tag-tipografia","tag-truetype"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-content\/uploads\/2018\/06\/hinting-portada.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9TJog-1by","_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/posts\/4560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/comments?post=4560"}],"version-history":[{"count":5,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/posts\/4560\/revisions"}],"predecessor-version":[{"id":4589,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/posts\/4560\/revisions\/4589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/media\/4586"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/media?parent=4560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/categories?post=4560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2018\/wp-json\/wp\/v2\/tags?post=4560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}