{"id":4387,"date":"2019-09-13T11:46:10","date_gmt":"2019-09-13T08:46:10","guid":{"rendered":"https:\/\/typetype.org\/es\/?p=4387"},"modified":"2026-02-03T08:55:54","modified_gmt":"2026-02-03T05:55:54","slug":"creation-of-tt-interphases","status":"publish","type":"post","link":"https:\/\/typetype.org\/es\/blog\/creation-of-tt-interphases\/","title":{"rendered":"Historia de la creaci\u00f3n de la familia tipogr\u00e1fica de interfaz TT Interphases"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/cover_tt_interphases_seo-3.gif\" alt=\"\" class=\"wp-image-43578\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n<\/h2>\n\n\n\n<p>En&nbsp;la&nbsp;primavera de&nbsp;2018, bas\u00e1ndonos en&nbsp;la&nbsp;experiencia adquirida con fuentes como <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-commons\/\">TT&nbsp;Commons<\/a> y&nbsp;<a href=\"https:\/\/typetype.org\/es\/fonts\/tt-norms-pro\/\">TT&nbsp;Norms<\/a>, en&nbsp;TypeType formulamos la&nbsp;idea de&nbsp;una fuente universal y&nbsp;funcional para su&nbsp;uso en&nbsp;interfaces modernas en&nbsp;la&nbsp;mayor\u00eda de&nbsp;las plataformas m\u00f3viles y&nbsp;web m\u00e1s conocidas.<\/p>\n\n\n\n<p>Esta fuente deb\u00eda contar con las mejores proporciones dentro de&nbsp;su&nbsp;categor\u00eda, adem\u00e1s de&nbsp;una amplia variedad de&nbsp;estilos, caracteres y&nbsp;funciones OpenType. Su&nbsp;integraci\u00f3n en&nbsp;el&nbsp;dise\u00f1o deb\u00eda ser fluida, permitiendo sustituir sin problemas fuentes de&nbsp;interfaz anteriores. Definimos el&nbsp;n\u00famero de&nbsp;estilos en&nbsp;la&nbsp;familia como \u00ab\u00f3ptimamente m\u00e1ximo\u00bb.<\/p>\n\n\n\n<p>Para los programadores, decidimos desarrollar una versi\u00f3n monoespaciada con cuatro estilos, conocida como la&nbsp;\u00abcuadr\u00edcula dorada\u00bb, basada en&nbsp;el&nbsp;dise\u00f1o de&nbsp;la&nbsp;familia original. Contar con una pareja tipogr\u00e1fica arm\u00f3nica siempre es&nbsp;una ventaja.<\/p>\n\n\n\n<p>Esta fuente deb\u00eda convertirse en&nbsp;una herramienta vers\u00e1til y&nbsp;pr\u00e1ctica para dise\u00f1adores que trabajan con tipograf\u00edas de&nbsp;interfaz en&nbsp;sus proyectos. Adem\u00e1s, no&nbsp;pod\u00edamos dejar de&nbsp;lado el&nbsp;aspecto creativo: deb\u00eda ser una fuente bella, elegante, pero a&nbsp;la&nbsp;vez discreta y&nbsp;neutral.<\/p>\n\n\n\n<p>Desde el&nbsp;punto de&nbsp;vista t\u00e9cnico, deb\u00eda ser perfecta, con un&nbsp;hinting moderno y&nbsp;una versi\u00f3n variable para quienes buscan lo&nbsp;\u00faltimo en&nbsp;tipograf\u00eda. As\u00ed comenz\u00f3 la&nbsp;historia de&nbsp;este proyecto, que se&nbsp;extendi\u00f3 durante m\u00e1s de&nbsp;un&nbsp;a\u00f1o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fase 1&nbsp;\u2014 Investigaci\u00f3n<\/h2>\n\n\n\n<p>Abordamos el&nbsp;proceso con rigor. Analizamos todas las familias tipogr\u00e1ficas m\u00e1s populares utilizadas en&nbsp;interfaces, las clasificamos, las agrupamos y&nbsp;realizamos un&nbsp;estudio detallado de&nbsp;cada una.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/sc1.gif\" alt=\"\" class=\"wp-image-1000004388\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Tabla con el&nbsp;an\u00e1lisis de&nbsp;las fuentes de&nbsp;interfaz existentes<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>El&nbsp;resultado de&nbsp;estos datos consolidados fue una gran presentaci\u00f3n en&nbsp;la&nbsp;que intentamos analizar e&nbsp;identificar las principales caracter\u00edsticas en&nbsp;la&nbsp;construcci\u00f3n de&nbsp;los signos, tales como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El&nbsp;grado de&nbsp;apertura o&nbsp;cierre de&nbsp;la&nbsp;apertura en&nbsp;los signos \u00aba\u00bb, \u00abc\u00bb, \u00abe\u00bb;<\/li>\n\n\n\n<li>El&nbsp;grado de&nbsp;redondez o&nbsp;cuadratura de&nbsp;los c\u00edrculos en&nbsp;los signos redondos;<\/li>\n\n\n\n<li>Las formas de&nbsp;los puntos, comas y&nbsp;otros elementos similares;<\/li>\n\n\n\n<li>Las formas condicionalmente abiertas y&nbsp;condicionalmente cerradas de&nbsp;algunos n\u00fameros, como 4, 6&nbsp;y 9.<\/li>\n<\/ul>\n\n\n\n<p>En&nbsp;la&nbsp;reuni\u00f3n general discutimos y&nbsp;definimos la&nbsp;direcci\u00f3n del trabajo futuro.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/2.gif\" alt=\"\" class=\"wp-image-1000004389\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Primera presentaci\u00f3n interna del proyecto futuro.<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>No&nbsp;pod\u00edamos ignorar las fuentes ya&nbsp;creadas y&nbsp;ampliamente utilizadas, por lo&nbsp;que analizamos las proporciones de&nbsp;todas las fuentes populares dentro de&nbsp;esta categor\u00eda&nbsp;y, a&nbsp;trav\u00e9s de&nbsp;este estudio, llegamos a&nbsp;nuestras propias conclusiones y&nbsp;proporciones. Ahora podemos estar seguros de&nbsp;que, al&nbsp;sustituir una fuente en&nbsp;los dise\u00f1os ya&nbsp;maquetados, el&nbsp;dise\u00f1ador de&nbsp;interfaces no&nbsp;enfrentar\u00e1 problemas de&nbsp;desajuste en&nbsp;las doscientas pantallas dise\u00f1adas, ni&nbsp;se&nbsp;producir\u00e1 un&nbsp;cambio dr\u00e1stico en&nbsp;el&nbsp;grado de&nbsp;negrura del texto con el&nbsp;mismo estilo tipogr\u00e1fico, pues gracias a&nbsp;un&nbsp;an\u00e1lisis detallado, \u00ablos pesos tipogr\u00e1ficos\u00bb ser\u00e1n comparables con los de&nbsp;la&nbsp;competencia.<\/p>\n\n\n\n<p>Medimos en&nbsp;unidades tipogr\u00e1ficas relativas par\u00e1metros como \u00abX-height\u00bb, para los signos en&nbsp;may\u00fascula \u00abH-weight\u00bb, el&nbsp;grosor \u00abH-stem\u00bb, el&nbsp;grosor \u00abH-crossbar\u00bb, as\u00ed como par\u00e1metros equivalentes en&nbsp;los signos en&nbsp;min\u00fascula. Como resultado, descubrimos que la&nbsp;mayor\u00eda de&nbsp;las fuentes son muy similares entre&nbsp;s\u00ed, e&nbsp;incluso algunas son pr\u00e1cticamente id\u00e9nticas en&nbsp;muchos aspectos.<\/p>\n\n\n\n<p>Tambi\u00e9n analizamos las diferencias entre los grosores de&nbsp;los trazos verticales en&nbsp;distintas variantes dentro de&nbsp;una misma familia tipogr\u00e1fica. Los resultados mostraron que estas diferencias son m\u00ednimas&nbsp;y, en&nbsp;su&nbsp;mayor\u00eda, siguen la&nbsp;f\u00f3rmula de&nbsp;Pablo Impallari, en&nbsp;la&nbsp;que el&nbsp;incremento de&nbsp;negrura en&nbsp;los estilos m\u00e1s delgados ocurre r\u00e1pidamente, mientras que en&nbsp;los estilos m\u00e1s gruesos se&nbsp;produce de&nbsp;forma m\u00e1s lenta y&nbsp;armoniosa.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/sc2.gif\" alt=\"\" class=\"wp-image-1000004390\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Tabla con las m\u00e9tricas principales de&nbsp;las fuentes de&nbsp;interfaz<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>No&nbsp;nos olvidamos de&nbsp;nuestros queridos clientes, colegas y&nbsp;amigos. Decidimos realizar un&nbsp;estudio de&nbsp;mercado cuantitativo. Para ello, elaboramos un&nbsp;cuestionario en&nbsp;l\u00ednea sobre las fuentes de&nbsp;interfaz utilizadas por los grandes gigantes de&nbsp;TI, as\u00ed como por las principales agencias digitales del pa\u00eds. Como resultado, obtuvimos m\u00e1s de&nbsp;50&nbsp;respuestas con informaci\u00f3n detallada, lo&nbsp;que nos llev\u00f3 a&nbsp;reflexionar a\u00fan m\u00e1s sobre la&nbsp;composici\u00f3n comercial y&nbsp;los matices del car\u00e1cter de&nbsp;la&nbsp;familia tipogr\u00e1fica que estamos creando.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/sc3_3.gif\" alt=\"\" class=\"wp-image-1000004392\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Resultados del estudio de&nbsp;mercado cuantitativo<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fase 2&nbsp;\u2014 Dibujo del estilo base<\/h2>\n\n\n\n<p>Despu\u00e9s de&nbsp;aprobar todas las proporciones base de&nbsp;la&nbsp;fuente y&nbsp;precisar los matices relacionados con las formas de&nbsp;los signos, comenzamos a&nbsp;dibujar los caracteres principales del estilo regular para comprobar nuestras hip\u00f3tesis. El&nbsp;primer enfoque de&nbsp;la&nbsp;fuente se&nbsp;realiz\u00f3 en&nbsp;una cuadr\u00edcula de&nbsp;5\u00d75 unidades tipogr\u00e1ficas. En&nbsp;este primer estilo se&nbsp;incorporaron todos los elementos que definen su&nbsp;identidad.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/01-1.jpg\" alt=\"\" class=\"wp-image-1000004391\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-1024x728.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-420x299.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-768x546.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-1200x853.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-600x426.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-666x473.jpg 666w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-80x57.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/01-1-300x213.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Signos principales del estilo Regular<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Durante la&nbsp;discusi\u00f3n colectiva del proyecto, surgi\u00f3 la&nbsp;hip\u00f3tesis de&nbsp;que las formas de&nbsp;los c\u00edrculos eran demasiado simples, por lo&nbsp;que se&nbsp;realizaron dos intentos para diversificarlas. El&nbsp;primer intento consisti\u00f3 en&nbsp;hacerlas m\u00e1s cuadradas, mientras que el&nbsp;segundo a\u00f1adi\u00f3 segmentos rectos en&nbsp;los trazos verticales para observar el&nbsp;resultado.<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;imagen siguiente se&nbsp;pueden ver tres variantes de&nbsp;formas circulares dentro de&nbsp;los mismos bloques de&nbsp;texto:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La&nbsp;primera (superior) variante es&nbsp;la&nbsp;forma base de&nbsp;los c\u00edrculos, implementada en&nbsp;la&nbsp;primera propuesta de&nbsp;la&nbsp;fuente;<\/li>\n\n\n\n<li>La&nbsp;segunda (media) variante tiene cada elemento ovalado cuadrado en&nbsp;cada curva en&nbsp;10&nbsp;unidades tipogr\u00e1ficas;<\/li>\n\n\n\n<li>La&nbsp;tercera (inferior) variante es&nbsp;la&nbsp;versi\u00f3n de&nbsp;los \u00f3valos con inserciones de&nbsp;distancias rectas en&nbsp;los trazos verticales de&nbsp;los \u00f3valos.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/02.jpg\" alt=\"\" class=\"wp-image-1000004393\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/02.jpg 1440w, https:\/\/typetype.org\/es\/wp-content\/uploads\/02-1024x271.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/02-1200x318.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/02-768x203.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/02-420x111.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/02-600x159.jpg 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Prueba de&nbsp;diferentes formas de&nbsp;c\u00edrculos<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Como resultado, llegamos a&nbsp;la&nbsp;conclusi\u00f3n de&nbsp;que la&nbsp;primera variante es&nbsp;la&nbsp;m\u00e1s \u00f3ptima y&nbsp;la&nbsp;que mejor responde al&nbsp;car\u00e1cter y&nbsp;a&nbsp;las funciones de&nbsp;la&nbsp;fuente. Despu\u00e9s de&nbsp;todo, la&nbsp;\u00abneutralidad\u00bb es&nbsp;ahora nuestra amiga y&nbsp;nuestro amor de&nbsp;escuela.<\/p>\n\n\n\n<p>Ahora, el&nbsp;desaf\u00edo para nuestro departamento tipogr\u00e1fico es&nbsp;dotar la&nbsp;fuente de&nbsp;un&nbsp;car\u00e1cter \u00fanico. Al&nbsp;dibujarla, nos esforzamos por ser lo&nbsp;m\u00e1s originales posible: debemos ser conquistadores&nbsp;y, bajo ninguna circunstancia, repetirnos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/03_2.jpg\" alt=\"\" class=\"wp-image-1000004394\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-1024x717.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-420x294.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-768x538.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-1200x840.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-600x420.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-676x473.jpg 676w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-80x56.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/03_2-300x210.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Comparaci\u00f3n de&nbsp;la&nbsp;fuente con la&nbsp;competencia<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>La&nbsp;composici\u00f3n final despu\u00e9s de&nbsp;la&nbsp;primera iteraci\u00f3n del dibujo de&nbsp;la&nbsp;fuente est\u00e1 lista. La&amp;nbsp;escritura latina y&nbsp;cir\u00edlica se&nbsp;ven consistentes. La&nbsp;fuente entrelaza de&nbsp;manera org\u00e1nica y&nbsp;armoniosa motivos geom\u00e9tricos y&nbsp;humanistas. Su&nbsp;car\u00e1cter se&nbsp;expresa en&nbsp;peque\u00f1os matices y&nbsp;detalles cuidadosamente elaborados. Todas las proporciones ajustadas cumplen con nuestros altos est\u00e1ndares, establecidos a&nbsp;partir de&nbsp;la&nbsp;investigaci\u00f3n, el&nbsp;an\u00e1lisis detallado de&nbsp;las fuentes de&nbsp;interfaz y&nbsp;los resultados de&nbsp;la&nbsp;encuesta realizada a&nbsp;nuestros colegas, clientes y&nbsp;amigos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/04.jpg\" alt=\"\" class=\"wp-image-1000004395\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/04.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-1024x468.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-420x192.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-768x351.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-1200x549.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-600x274.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-944x432.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-80x37.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/04-300x137.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Lat\u00edn b\u00e1sico, cir\u00edlico y&nbsp;n\u00fameros<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fase 3&nbsp;\u2014 Dibujo de&nbsp;todos los estilos de&nbsp;la&nbsp;familia base<\/h2>\n\n\n\n<p>Comienza la&nbsp;etapa m\u00e1s interesante y&nbsp;compleja del desarrollo de&nbsp;la&nbsp;familia tipogr\u00e1fica: la&nbsp;creaci\u00f3n de&nbsp;la&nbsp;primera fuente funcional, su&nbsp;expansi\u00f3n hasta convertirse en&nbsp;una familia tipogr\u00e1fica completa, la&nbsp;implementaci\u00f3n de&nbsp;funciones OpenType, la&nbsp;creaci\u00f3n del kerning, as\u00ed como numerosas pruebas.<\/p>\n\n\n\n<p>Definimos el&nbsp;repertorio de&nbsp;caracteres de&nbsp;la&nbsp;fuente y&nbsp;desarrollamos una codificaci\u00f3n personalizada. Cada fuente dentro de&nbsp;la&nbsp;familia debe incluir necesariamente los signos de&nbsp;servicio principales, los n\u00fameros, el&nbsp;cir\u00edlico y&nbsp;el&nbsp;lat\u00edn. Sin embargo, para los dise\u00f1adores es&nbsp;fundamental contar con una herramienta vers\u00e1til en&nbsp;su&nbsp;trabajo, por lo&nbsp;que tomamos la&nbsp;decisi\u00f3n de&nbsp;ampliar significativamente el&nbsp;repertorio de&nbsp;caracteres incorporando:<\/p>\n\n\n\n<p>a) Lat\u00edn extendido (el&nbsp;griego y&nbsp;los idiomas vietnamitas se&nbsp;incorporar\u00e1n m\u00e1s adelante);<\/p>\n\n\n\n<p>b) Cir\u00edlico extendido;<\/p>\n\n\n\n<p>c) Un&nbsp;amplio bloque num\u00e9rico, que incluye: cifras est\u00e1ndar, cifras min\u00fasculas, sus versiones tabulares, as\u00ed como diversos super\u00edndices, numeradores, denominadores e&nbsp;inferiores. Para todos los tipos de&nbsp;cifras se&nbsp;han previsto versiones alternativas para: 0&nbsp;(forma alternativa con tachado), 1&nbsp;(alternativa estil\u00edstica con car\u00e1cter fluido), 6&nbsp;y 9&nbsp;(formas alternativas cerradas);<\/p>\n\n\n\n<p>d) Bloque extendido de&nbsp;signos de&nbsp;moneda, que incluye versiones est\u00e1ndar, versiones tabulares y&nbsp;versiones para numeradores y&nbsp;denominadores;<\/p>\n\n\n\n<p>e) N\u00fameros racionales en&nbsp;forma de&nbsp;una paleta ampliada de&nbsp;fracciones auxiliares, as\u00ed como n\u00fameros para listas numeradas, enmarcados en&nbsp;c\u00edrculos de&nbsp;dos tipos: con relleno y&nbsp;sin relleno (los llamados \u00abbillares\u00bb);<\/p>\n\n\n\n<p>f) Versiones especiales de&nbsp;los signos de&nbsp;servicio adaptadas para su&nbsp;uso con may\u00fasculas (funci\u00f3n Case Sensitive);<\/p>\n\n\n\n<p>g) Formas alternativas para algunos signos en&nbsp;min\u00fascula, que confieren a&nbsp;la&nbsp;fuente un&nbsp;car\u00e1cter m\u00e1s suave y&nbsp;fluido;<\/p>\n\n\n\n<p>h) Un&nbsp;conjunto de&nbsp;iconos dise\u00f1ado espec\u00edficamente en&nbsp;la&nbsp;est\u00e9tica de&nbsp;la&nbsp;fuente, pensado para su&nbsp;uso en&nbsp;diversos entornos de&nbsp;interfaz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/05.jpg\" alt=\"\" class=\"wp-image-1000004396\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/05.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-1024x468.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-420x192.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-768x351.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-1200x549.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-600x274.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-944x432.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-80x37.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/05-300x137.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Repertorio ampliado de&nbsp;caracteres<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Pasamos al&nbsp;editor tipogr\u00e1fico y&nbsp;transferimos todos los signos dibujados en&nbsp;el&nbsp;editor vectorial al&nbsp;interior de&nbsp;la&nbsp;fuente. Dibujamos el&nbsp;primer conjunto de&nbsp;caracteres, comenzando por los signos de&nbsp;servicio m\u00e1s complejos y&nbsp;la&nbsp;diacr\u00edtica. Siempre debemos recordar una regla fundamental: al&nbsp;reemplazar una fuente de&nbsp;interfaz antigua en&nbsp;la&nbsp;maquetaci\u00f3n, todo debe permanecer en&nbsp;su&nbsp;lugar. Adem\u00e1s, al&nbsp;dise\u00f1ar los caracteres, seguimos teniendo presente la&nbsp;regla de&nbsp;la&nbsp;\u00abl\u00ednea media\u00bb, que cobr\u00f3 relevancia con la&nbsp;aparici\u00f3n de&nbsp;Sketch &amp;&nbsp;Figma. Debemos lograr que la&nbsp;l\u00ednea media entre los elementos ascendentes y&nbsp;descendentes de&nbsp;nuestra fuente sea similar a&nbsp;la&nbsp;de&nbsp;otras fuentes de&nbsp;interfaz. De&nbsp;lo&nbsp;contrario, el&nbsp;texto en&nbsp;los bloques de&nbsp;texto de&nbsp;los editores de&nbsp;interfaces modernos se&nbsp;desplazar\u00e1 hacia arriba o&nbsp;hacia abajo, lo&nbsp;que afectar\u00e1 directamente la&nbsp;maquetaci\u00f3n. Mantenemos esto en&nbsp;mente al&nbsp;dise\u00f1ar signos y&nbsp;contornos que sobresalen de&nbsp;la&nbsp;l\u00ednea base.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/06_2.jpg\" alt=\"\" class=\"wp-image-1000004397\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-1024x680.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-420x279.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-768x510.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-1200x797.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-600x399.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-712x473.jpg 712w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-80x53.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/06_2-300x199.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Pruebas de&nbsp;la&nbsp;l\u00ednea media<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Despu\u00e9s de&nbsp;la&nbsp;primera iteraci\u00f3n del dibujo de&nbsp;todos los signos, tanto textuales como no&nbsp;textuales, recibimos la&nbsp;retroalimentaci\u00f3n del director de&nbsp;arte del proyecto, Pavel Emelianov, sobre la&nbsp;estructura visual de&nbsp;la&nbsp;fuente, as\u00ed como sobre las primeras pruebas de&nbsp;texto y&nbsp;su&nbsp;uniformidad. Se&nbsp;toma una decisi\u00f3n dif\u00edcil pero necesaria: eliminamos los compensadores visuales y&nbsp;refinamos el&nbsp;conjunto tipogr\u00e1fico. Nuestra \u00abneutralidad\u00bb \u2014nuestro amor de&nbsp;escuela\u2014 nos obliga a&nbsp;llevar todo a&nbsp;una l\u00f3gica y&nbsp;secuencia unificadas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/10.jpg\" alt=\"\" class=\"wp-image-1000004398\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/10.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-975x1024.jpg 975w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-400x420.jpg 400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-768x806.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-1143x1200.jpg 1143w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-600x630.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-450x473.jpg 450w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-76x80.jpg 76w, https:\/\/typetype.org\/es\/wp-content\/uploads\/10-286x300.jpg 286w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Comentarios para la&nbsp;implementaci\u00f3n de&nbsp;correcciones en&nbsp;el&nbsp;dise\u00f1o<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Paralelamente, trabajamos en&nbsp;los dos extremos de&nbsp;la&nbsp;familia tipogr\u00e1fica: Thin y&nbsp;Black. En&nbsp;este proceso participa un&nbsp;equipo de&nbsp;tres personas: dos dise\u00f1adores y&nbsp;un&nbsp;responsable t\u00e9cnico. Dibujamos, corregimos. Dibujamos, corregimos. En&nbsp;esencia, se&nbsp;trata de&nbsp;un&nbsp;proceso t\u00e9cnico claro y&nbsp;bien estructurado.<\/p>\n\n\n\n<p>Para el&nbsp;lector no&nbsp;familiarizado con estos detalles, explicaremos el&nbsp;proceso con m\u00e1s detalle. Hay dos tareas principales en&nbsp;este proceso: la&nbsp;primera es&nbsp;ajustar la&nbsp;anchura percibida de&nbsp;la&nbsp;fuente, por ejemplo, un&nbsp;peso delgado parecer\u00e1 tener la&nbsp;misma anchura que el&nbsp;peso regular solo si&nbsp;f\u00edsicamente es&nbsp;m\u00e1s estrecho. La&nbsp;l\u00f3gica opuesta se&nbsp;aplica al&nbsp;peso m\u00e1s grueso: para que se&nbsp;perciba con la&nbsp;misma anchura que el&nbsp;regular, debe ser f\u00edsicamente m\u00e1s ancho.<\/p>\n\n\n\n<p>La&nbsp;segunda tarea es&nbsp;ajustar la&nbsp;altura percibida de&nbsp;los signos en&nbsp;min\u00fascula del peso regular. Dado que una fuente es&nbsp;una construcci\u00f3n \u00f3ptica, aumentamos la&nbsp;altura de&nbsp;los signos en&nbsp;min\u00fascula en&nbsp;el&nbsp;peso m\u00e1s grueso en&nbsp;20&nbsp;unidades tipogr\u00e1ficas y&nbsp;la&nbsp;reducimos en&nbsp;10&nbsp;unidades en&nbsp;el&nbsp;peso m\u00e1s delgado. De&nbsp;este modo, todos los pesos se&nbsp;presentan de&nbsp;manera consistente y&nbsp;parecer\u00e1 que se&nbsp;trata de&nbsp;la&nbsp;misma fuente, solo con diferente grosor.<\/p>\n\n\n\n<p>Con el&nbsp;primer estilo definido, obtenemos una referencia clara sobre c\u00f3mo los signos deben relacionarse entre&nbsp;s\u00ed. Ahora tenemos un&nbsp;punto de&nbsp;partida sobre el&nbsp;cual construir los dem\u00e1s estilos. Como referencia de&nbsp;medici\u00f3n utilizamos las letras \u00abH\u00bb y&nbsp;\u00abO\u00bb. Al&nbsp;aumentar o&nbsp;disminuir el&nbsp;grosor en&nbsp;otros estilos, cualquier signo debe cambiar proporcionalmente en&nbsp;relaci\u00f3n con ellas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/10_2.gif\" alt=\"\" class=\"wp-image-1000004399\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Tres pesos clave: Thin, Regular y&nbsp;Black<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Se&nbsp;puede observar en&nbsp;los dibujos c\u00f3mo cambian los signos de&nbsp;un&nbsp;estilo a&nbsp;otro. Los caracteres se&nbsp;vuelven m\u00e1s gruesos, pero sus proporciones, estructura y&nbsp;car\u00e1cter permanecen inalterados. Por ejemplo, la&nbsp;\u00ab\u041d\u00bb parece ligeramente estrecha y&nbsp;alta. La&nbsp;\u00ab\u041e\u00bb tambi\u00e9n tiende m\u00e1s a&nbsp;un&nbsp;rect\u00e1ngulo que a&nbsp;un&nbsp;cuadrado, con v\u00e9rtices y&nbsp;curvaturas que no&nbsp;son ni&nbsp;afilados ni&nbsp;claramente cuadrados. Este mismo car\u00e1cter de&nbsp;redondeo aparece en&nbsp;la&nbsp;\u00ab\u0412\u00bb, que visualmente parece un&nbsp;poco m\u00e1s ancha que la&nbsp;\u00ab\u041d\u00bb y&nbsp;un&nbsp;poco m\u00e1s estrecha que la&nbsp;\u00ab\u041e\u00bb. La&nbsp;barra horizontal se&nbsp;sit\u00faa ligeramente por encima del centro, aproximadamente al&nbsp;nivel del travesa\u00f1o de&nbsp;la&nbsp;\u00ab\u041d\u00bb. Al&nbsp;analizar la&nbsp;relaci\u00f3n y&nbsp;las proporciones de&nbsp;los semi-\u00f3valos, se&nbsp;puede ver que todos estos detalles se&nbsp;trasladan de&nbsp;un&nbsp;estilo a&nbsp;otro.<\/p>\n\n\n\n<p>El&nbsp;m\u00e1s dif\u00edcil de&nbsp;desarrollar entre los tres estilos base es&nbsp;el&nbsp;Black. Para que el&nbsp;Black mantenga la&nbsp;coherencia visual con el&nbsp;Regular, las proporciones externas de&nbsp;los signos deben estar bien definidas; no&nbsp;podemos hacerlos tres veces m\u00e1s anchos solo para acomodar astas extremadamente gruesas. Tampoco podemos eliminar por completo los espacios en&nbsp;blanco dentro de&nbsp;las letras. Por ello, recurrimos a&nbsp;la&nbsp;compensaci\u00f3n a&nbsp;trav\u00e9s del espacio interno del car\u00e1cter.<\/p>\n\n\n\n<p>Algunos signos pueden simplificarse y&nbsp;ser\u00e1n simplificados:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/10_4.gif\" alt=\"\" class=\"wp-image-1000004400\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Simplificaci\u00f3n del dise\u00f1o de&nbsp;la&nbsp;letra \u00abQ\u00bb<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;otros, buscamos el&nbsp;equilibrio mediante el&nbsp;refinamiento de&nbsp;las horizontales.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/10_5.gif\" alt=\"\" class=\"wp-image-1000004401\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Compensaci\u00f3n de&nbsp;algunas letras en&nbsp;el&nbsp;estilo Black<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Este trabajo se&nbsp;realiza manualmente para cada signo. Todo es&nbsp;muy individual y&nbsp;requiere una revisi\u00f3n constante del resultado para evitar \u00abpegotes\u00bb o&nbsp;\u00e1reas demasiado claras.<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;imagen siguiente se&nbsp;muestra la&nbsp;primera iteraci\u00f3n del dibujo del estilo delgado realizada por el&nbsp;dise\u00f1ador, junto con los comentarios enviados en&nbsp;respuesta, incorporados en&nbsp;la&nbsp;fuente por el&nbsp;responsable t\u00e9cnico. Cada color dentro de&nbsp;la&nbsp;fuente tiene un&nbsp;significado espec\u00edfico. Los dise\u00f1adores familiarizados con esta l\u00f3gica comprenden de&nbsp;inmediato qu\u00e9 ha&nbsp;sido modificado en&nbsp;la&nbsp;fuente.<\/p>\n\n\n\n<p>Despu\u00e9s de&nbsp;la&nbsp;primera iteraci\u00f3n, reducimos manualmente en&nbsp;10&nbsp;unidades tipogr\u00e1ficas la&nbsp;altura de&nbsp;los signos en&nbsp;min\u00fascula.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/11_color-scaled.jpg\" alt=\"\" class=\"wp-image-1000004402\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-scaled.jpg 851w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-157x473.jpg 157w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-399x1200.jpg 399w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-768x2311.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-681x2048.jpg 681w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-27x80.jpg 27w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-600x1806.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-100x300.jpg 100w, https:\/\/typetype.org\/es\/wp-content\/uploads\/11_color-340x1024.jpg 340w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Trabajo en&nbsp;el&nbsp;estilo Thin<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;la&nbsp;oficina, dentro del grupo de&nbsp;trabajo, se&nbsp;llevan a&nbsp;cabo debates sobre la&nbsp;necesidad de&nbsp;compensadores dentro del estilo m\u00e1s grueso, as\u00ed como sobre la&nbsp;uniformidad del texto tanto entre el&nbsp;cir\u00edlico y&nbsp;el&nbsp;lat\u00edn como entre los tres pesos tipogr\u00e1ficos. Tomamos la&nbsp;decisi\u00f3n de&nbsp;eliminar tambi\u00e9n los compensadores en&nbsp;el&nbsp;estilo m\u00e1s grueso. Ahora apostamos por formas limpias y&nbsp;una l\u00f3gica unificada en&nbsp;la&nbsp;construcci\u00f3n de&nbsp;todos los signos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/12_02-scaled.jpg\" alt=\"\" class=\"wp-image-1000004403\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-scaled.jpg 2560w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-598x473.jpg 598w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-1200x948.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-768x607.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-1536x1214.jpg 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-2048x1619.jpg 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-80x63.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-600x474.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-300x237.jpg 300w, https:\/\/typetype.org\/es\/wp-content\/uploads\/12_02-1024x809.jpg 1024w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Impresi\u00f3n de&nbsp;prueba de&nbsp;la&nbsp;fuente en&nbsp;texto compuesto<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Al&nbsp;crear el&nbsp;estilo m\u00e1s grueso, en&nbsp;el&nbsp;\u00faltimo momento nos dimos cuenta de&nbsp;que todos los signos diacr\u00edticos en&nbsp;las letras min\u00fasculas estaban demasiado cerca de&nbsp;los propios caracteres. Para evitar corregirlos manualmente, nuestro programador escribi\u00f3 un&nbsp;script en&nbsp;Python que permiti\u00f3 ajustar instant\u00e1neamente m\u00e1s de&nbsp;300&nbsp;signos, elev\u00e1ndolos a&nbsp;la&nbsp;altura necesaria exclusivamente para las letras min\u00fasculas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/14.gif\" alt=\"\" class=\"wp-image-1000004404\"\/><figcaption class=\"wp-element-caption\"><strong><br><strong>Elevaci\u00f3n de&nbsp;signos diacr\u00edticos con la&nbsp;ayuda de&nbsp;un&nbsp;script<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Cuando se&nbsp;han completado los tres dise\u00f1os clave principales, comenzamos a&nbsp;trabajar en&nbsp;los dise\u00f1os intermedios, que en&nbsp;realidad resultan ser muy precisos al&nbsp;interpolarlos. Esto sucede gracias a&nbsp;la&nbsp;precisi\u00f3n de&nbsp;los contornos originales. Dos ingenieros trabajan en&nbsp;los seis dise\u00f1os intermedios, perfeccionando los contornos hasta alcanzar un&nbsp;estado ideal. Elaboramos especificaciones detalladas y&nbsp;las enviamos a&nbsp;producci\u00f3n.<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;imagen de&nbsp;abajo se&nbsp;muestra el&nbsp;resultado del blending (promedio) de&nbsp;los contornos del dise\u00f1o en&nbsp;negrita y&nbsp;regular (arriba en&nbsp;la&nbsp;imagen) y&nbsp;la&nbsp;tipograf\u00eda editada y&nbsp;perfeccionada por el&nbsp;ingeniero; como se&nbsp;puede ver, la&nbsp;diferencia es&nbsp;peque\u00f1a.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/15.gif\" alt=\"\" class=\"wp-image-1000004405\"\/><figcaption class=\"wp-element-caption\"><strong><strong>La&nbsp;diferencia entre el&nbsp;blending y&nbsp;el&nbsp;estilo editado<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>A&nbsp;continuaci\u00f3n, para todos los dise\u00f1os rectos, se&nbsp;crean versiones inclinadas de&nbsp;los estilos en&nbsp;cursiva. Este es&nbsp;uno de&nbsp;los pasos m\u00e1s importantes, laboriosos&nbsp;y, al&nbsp;mismo tiempo, \u00ababurridos\u00bb. Para crear las versiones inclinadas usamos el&nbsp;m\u00e9todo de&nbsp;\u00absemi-inclinaci\u00f3n-semi-rotaci\u00f3n\u00bb. En&nbsp;realidad, estos son llamados \u00abOblique\u00bb y&nbsp;no&nbsp;aut\u00e9nticos \u00abItalic\u00bb, es&nbsp;decir, versiones rectas inclinadas sin modificaciones en&nbsp;las formas de&nbsp;los propios signos. La&nbsp;semi-inclinaci\u00f3n-semi-rotaci\u00f3n es&nbsp;un&nbsp;m\u00e9todo que permite evitar la&nbsp;deformaci\u00f3n por compresi\u00f3n en&nbsp;los contornos. <\/p>\n\n\n\n<p>Dentro de&nbsp;la&nbsp;oficina, realizamos 5&nbsp;versiones clave, elaboramos la&nbsp;documentaci\u00f3n para los dise\u00f1os realizados para los ingenieros que se&nbsp;integrar\u00e1n al&nbsp;proyecto y&nbsp;enviamos los dem\u00e1s estilos a&nbsp;producci\u00f3n. La&nbsp;documentaci\u00f3n es&nbsp;una parte muy importante en&nbsp;la&nbsp;creaci\u00f3n de&nbsp;cada familia tipogr\u00e1fica en&nbsp;ciertas etapas del proyecto, ya&nbsp;que permite unificar el&nbsp;proceso de&nbsp;creaci\u00f3n de&nbsp;la&nbsp;familia tipogr\u00e1fica entre diferentes personas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/16-1.jpg\" alt=\"\" class=\"wp-image-1000004406\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/16-1.jpg 1440w, https:\/\/typetype.org\/es\/wp-content\/uploads\/16-1-1024x493.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/16-1-1200x578.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/16-1-768x370.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/16-1-420x202.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/16-1-600x289.jpg 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Especificaci\u00f3n t\u00e9cnica para la&nbsp;creaci\u00f3n de&nbsp;versiones inclinadas<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Paralelamente a&nbsp;la&nbsp;creaci\u00f3n de&nbsp;los estilos intermedios, as\u00ed como a&nbsp;la&nbsp;creaci\u00f3n de&nbsp;cursivas, comenzamos la&nbsp;parte t\u00e9cnica del proyecto, es&nbsp;decir, el&nbsp;kerning, las funciones OpenType y&nbsp;la&nbsp;configuraci\u00f3n detallada del interlineado. El&nbsp;kerning dentro de&nbsp;la&nbsp;fuente lo&nbsp;hacemos \u00abunificado\u00bb, es&nbsp;decir, creamos un&nbsp;conjunto \u00fanico de&nbsp;pares de&nbsp;kerning y&nbsp;clases de&nbsp;kerning para todos los estilos. Incluso dentro de&nbsp;nuestro equipo hay opiniones divididas sobre el&nbsp;kerning unificado: algunos est\u00e1n \u00aba&nbsp;favor\u00bb, otros \u00aben&nbsp;contra\u00bb.<\/p>\n\n\n\n<p>Sin embargo, si&nbsp;al&nbsp;crear el&nbsp;kerning se&nbsp;tiene en&nbsp;cuenta el&nbsp;espaciado f\u00edsicamente diferente en&nbsp;fuentes de&nbsp;distintos grosores (en&nbsp;el&nbsp;estilo delgado habr\u00e1 un&nbsp;espaciado considerablemente mayor que en&nbsp;el&nbsp;regular, y&nbsp;mucho m\u00e1s en&nbsp;el&nbsp;estilo grueso), as\u00ed como la&nbsp;diferencia de&nbsp;blanco en&nbsp;los \u00e1ngulos triangulares (las diagonales en&nbsp;signos como \u00abA\u00bb, \u00abX\u00bb, \u00abV\u00bb y&nbsp;similares pueden cambiar su&nbsp;\u00e1ngulo dependiendo del grosor de&nbsp;la&nbsp;fuente, y&nbsp;por lo&nbsp;tanto cambiar\u00e1n las compensaciones necesarias en&nbsp;forma de&nbsp;pares de&nbsp;kerning), entonces se&nbsp;puede hacer un&nbsp;kerning que encaje perfectamente en&nbsp;los tres casos extremos&nbsp;y, por ende, tambi\u00e9n en&nbsp;todos los estilos intermedios. En&nbsp;total obtenemos 1167 pares \u00fanicos seleccionados manualmente.<\/p>\n\n\n\n<p>Como parte separada, creamos pares especiales de&nbsp;kerning para algunos signos que pueden combinarse con el&nbsp;espacio, para alinear el&nbsp;texto de&nbsp;manera \u00f3ptima. Por ejemplo, si&nbsp;se&nbsp;escribe \u00abY\u00bb y&nbsp;un&nbsp;espacio, esta combinaci\u00f3n formar\u00e1 un&nbsp;gran hueco que visualmente se&nbsp;percibir\u00e1 como un&nbsp;doble espacio. Compensamos estos espacios con un&nbsp;par de&nbsp;kerning.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/17.gif\" alt=\"\" class=\"wp-image-1000004407\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Kerning de&nbsp;compensaci\u00f3n para la&nbsp;\u00abY\u00bb al&nbsp;encontrarse con un&nbsp;espacio<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Hablemos un&nbsp;poco sobre las funciones OpenType dentro de&nbsp;la&nbsp;fuente. En&nbsp;esencia, esta es&nbsp;la&nbsp;parte del trabajo de&nbsp;los tip\u00f3grafos que casi siempre queda fuera del radar para los usuarios de&nbsp;fuentes. En&nbsp;la&nbsp;familia tipogr\u00e1fica <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT&nbsp;Interphases<\/a>, hay 32&nbsp;de estas funciones. Solo hablaremos de&nbsp;algunas de&nbsp;ellas, y&nbsp;si&nbsp;deseas conocer m\u00e1s detalles sobre las funciones que componen la&nbsp;fuente, puedes consultar la&nbsp;<a href=\"hhttps:\/\/typetype.org\/es\/wp-content\/uploads\/tt_interphases_pro_specimen.pdf\">especificaci\u00f3n detallada<\/a>.<\/p>\n\n\n\n<p>a) Pocos saben que en&nbsp;la&nbsp;mayor\u00eda de&nbsp;las fuentes modernas existe una opci\u00f3n \u00fanica para reemplazar los n\u00fameros escritos con una barra (\/) por fracciones. Esta funci\u00f3n se&nbsp;llama Frac y&nbsp;funciona de&nbsp;la&nbsp;siguiente manera: escribes 1\/2, y&nbsp;el&nbsp;resultado es&nbsp;una fracci\u00f3n compacta y&nbsp;elegante 1\u20442.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/18-1.gif\" alt=\"\" class=\"wp-image-1000004408\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Funci\u00f3n Frac (fracciones) en&nbsp;uso<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>b) Para los casos de&nbsp;uso de&nbsp;par\u00e9ntesis y&nbsp;comillas con may\u00fasculas, existe la&nbsp;funci\u00f3n Case. Esta permite \u00abelevar\u00bb ciertos signos auxiliares para lograr una combinaci\u00f3n armoniosa con las letras may\u00fasculas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/19-1.gif\" alt=\"\" class=\"wp-image-1000004409\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Funci\u00f3n Case (sensible a&nbsp;las may\u00fasculas) en&nbsp;uso<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>c) A&nbsp;veces se&nbsp;necesitan cifras tabulares y&nbsp;s\u00edmbolos de&nbsp;moneda. Esto es&nbsp;muy \u00fatil cuando es&nbsp;necesario escribirlos en&nbsp;una columna, de&nbsp;manera que un&nbsp;n\u00famero quede justo debajo del otro. Para estos casos, se&nbsp;dise\u00f1a un&nbsp;conjunto especial de&nbsp;signos, en&nbsp;el&nbsp;que los anchos de&nbsp;todas las \u00e1reas de&nbsp;los caracteres son iguales entre&nbsp;s\u00ed. El&nbsp;conjunto deja de&nbsp;ser uniforme en&nbsp;favor de&nbsp;la&nbsp;funcionalidad y&nbsp;se&nbsp;vuelve un&nbsp;poco m\u00e1s espaciado. Esta funci\u00f3n se&nbsp;llama Tnum, y&nbsp;para ella no&nbsp;solo dise\u00f1amos cifras, sino tambi\u00e9n los s\u00edmbolos de&nbsp;moneda.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/20-1.gif\" alt=\"\" class=\"wp-image-1000004410\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Funci\u00f3n Tnum (alineaci\u00f3n tabular) en&nbsp;uso<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>d) Para algunas fuentes, donde es&nbsp;necesario diferenciar el&nbsp;\u00abcero\u00bb de&nbsp;la&nbsp;letra may\u00fascula \u00abO\u00bb, se&nbsp;utiliza la&nbsp;funci\u00f3n Zero. Esta fuente no&nbsp;es&nbsp;una excepci\u00f3n. Todos los ceros en&nbsp;la&nbsp;fuente tienen versiones alternativas con una barra diagonal dentro del \u00f3valo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/21.gif\" alt=\"\" class=\"wp-image-1000004411\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Funci\u00f3n Zero (cero cortado) en&nbsp;uso<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Realmente hemos a\u00f1adido una gran cantidad de&nbsp;funciones OpenType \u00fatiles en&nbsp;la&nbsp;fuente, como salt, ordn, ccmp, sups, sinf, numr, dnom, tnum, pnum, onum, lnum, liga, dlig, calt, ss01, ss02, ss03, ss04, ss05, ss06, ss07, ss08, ss09, ss10, ss11, ss12, ss13, ss14, locl. Todas ellas est\u00e1n descritas en&nbsp;la&nbsp;familia tipogr\u00e1fica. Gracias al&nbsp;uso de&nbsp;funciones individuales o&nbsp;combin\u00e1ndolas entre&nbsp;s\u00ed, es&nbsp;posible cambiar el&nbsp;\u00abcar\u00e1cter\u00bb de&nbsp;la&nbsp;fuente de&nbsp;manera casi irreconocible.<\/p>\n\n\n\n<p>Todas las funciones son probadas y&nbsp;verificadas en&nbsp;una amplia variedad de&nbsp;combinaciones posibles, adem\u00e1s de&nbsp;comprobar su&nbsp;funcionalidad en&nbsp;diferentes programas.<\/p>\n\n\n\n<p>Para que la&nbsp;maquetaci\u00f3n de&nbsp;bloques de&nbsp;texto sea lo&nbsp;m\u00e1s conveniente posible para los dise\u00f1adores de&nbsp;interfaces, realizamos un&nbsp;estudio de&nbsp;las fuentes de&nbsp;interfaz m\u00e1s populares y&nbsp;demandadas, as\u00ed como sus par\u00e1metros t\u00e9cnicos que afectan al&nbsp;interlineado (en&nbsp;primer lugar, tales como Ascender (elemento ascendente), Descender (elemento descendente), Gap (espacio blanco obligatorio entre l\u00edneas), y&nbsp;en&nbsp;base a&nbsp;nuestra investigaci\u00f3n, creamos una tabla consolidada, a&nbsp;partir de&nbsp;la&nbsp;cual derivamos nuestros propios valores.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/sc22_2.gif\" alt=\"\" class=\"wp-image-1000004413\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Tabla con m\u00e9tricas de&nbsp;interlineado en&nbsp;fuentes de&nbsp;interfaz<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Despu\u00e9s de&nbsp;las primeras pruebas y&nbsp;comparaciones en&nbsp;la&nbsp;maquetaci\u00f3n de&nbsp;bloques de&nbsp;texto con diferentes vol\u00famenes de&nbsp;contenido, se&nbsp;observa que el&nbsp;interlineado es&nbsp;casi perfecto, pero el&nbsp;bloque de&nbsp;texto est\u00e1 ligeramente m\u00e1s alto de&nbsp;lo&nbsp;necesario. Esto no&nbsp;nos satisface, necesitamos que sea perfecto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/23_2.jpg\" alt=\"\" class=\"wp-image-1000004412\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-1024x366.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-420x150.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-768x274.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-1200x429.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-600x214.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-944x337.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-80x29.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/23_2-300x107.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Comparaci\u00f3n del interlineado con los competidores<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Tomamos la&nbsp;decisi\u00f3n de&nbsp;reducir el&nbsp;tama\u00f1o del Ascender y&nbsp;aumentar el&nbsp;tama\u00f1o del Gap, lo&nbsp;que nos proporciona el&nbsp;interlineado necesario y&nbsp;hace que el&nbsp;conjunto de&nbsp;texto se&nbsp;alinee pr\u00e1cticamente con todos los estilos de&nbsp;fuentes comparados.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/24-1.jpg\" alt=\"\" class=\"wp-image-1000004414\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-1024x432.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-420x177.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-768x324.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-1200x506.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-600x253.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-944x398.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-80x34.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/24-1-300x126.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>De\u00a0izquierda a\u00a0derecha: <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT\u00a0Interphases<\/a>, IBM Plex, Roboto, SF\u00a0Display, Source Sans, Open Sans<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fase 4&nbsp;\u2014 Creaci\u00f3n de&nbsp;iconos<\/h2>\n\n\n\n<p>Paralelamente, al&nbsp;trabajo sobre la&nbsp;fuente principal, pensamos en&nbsp;c\u00f3mo dise\u00f1ar un&nbsp;conjunto de&nbsp;iconos para ella. El&nbsp;primer enfoque resulta ser fallido, ya&nbsp;que la&nbsp;tarea no&nbsp;estaba bien formulada y&nbsp;no&nbsp;era lo&nbsp;suficientemente detallada.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/25.png\" alt=\"\" class=\"wp-image-1000004415\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/25.png 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-1024x439.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-420x180.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-768x329.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-1200x514.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-600x257.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-944x405.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-80x34.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/25-300x129.png 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Primer dise\u00f1o de&nbsp;iconos para la&nbsp;fuente<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Nos embarcamos en&nbsp;una investigaci\u00f3n, en&nbsp;la&nbsp;que estudiamos los tipos de&nbsp;iconos existentes, analizamos las est\u00e9ticas actuales&nbsp;y, al&nbsp;final, elaboramos un&nbsp;encargo t\u00e9cnico.<\/p>\n\n\n\n<p>Descubrimos que hay pocos iconos informativos adecuados para nuestra funcionalidad, generalmente son conjuntos vectoriales separados (y&nbsp;no&nbsp;est\u00e1n dentro de&nbsp;las fuentes). Estudiamos qu\u00e9 iconos (conjuntos de&nbsp;iconos para Laptop\/ Desktop\/ Phone) contienen iconos comunes, pero tambi\u00e9n otros espec\u00edficos que se&nbsp;usan exclusivamente en&nbsp;determinados tipos de&nbsp;dispositivos. Tambi\u00e9n analizamos los iconos en&nbsp;diferentes sistemas operativos como Windows, Android y&nbsp;MacOS.<\/p>\n\n\n\n<p>Analizamos y&nbsp;creamos un&nbsp;conjunto promedio = conjunto universal de&nbsp;iconos. Los iconos se&nbsp;dividieron en&nbsp;5&nbsp;grupos (acciones principales, estados, secciones del sitio, documentos y&nbsp;carpetas, interfaz m\u00f3vil) seg\u00fan los objetos y&nbsp;acciones.<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;primera etapa del trabajo, era importante entender c\u00f3mo combinar los iconos con la&nbsp;fuente, creando una conexi\u00f3n entre ellos no&nbsp;solo a&nbsp;trav\u00e9s del grosor de&nbsp;las l\u00edneas, sino tambi\u00e9n en&nbsp;la&nbsp;coherencia de&nbsp;los contornos de&nbsp;los iconos y&nbsp;las letras.<\/p>\n\n\n\n<p>Obtenemos un&nbsp;boceto de&nbsp;los primeros iconos y&nbsp;los evaluamos en&nbsp;diferentes tama\u00f1os y&nbsp;sobre distintos fondos. Los ajustamos para que combinen estil\u00edsticamente bien con la&nbsp;fuente (por ejemplo, las formas de&nbsp;los redondeos y&nbsp;los finales de&nbsp;los trazos). Observamos el&nbsp;equilibrio entre el&nbsp;negro y&nbsp;el&nbsp;blanco para que las versiones Black y&nbsp;Thin se&nbsp;vean arm\u00f3nicas entre&nbsp;s\u00ed, a\u00f1adiendo peque\u00f1os rellenos negros en&nbsp;algunos iconos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/26_02.jpg\" alt=\"\" class=\"wp-image-1000004416\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-1024x775.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-420x318.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-768x581.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-1200x909.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-600x454.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-625x473.jpg 625w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-80x61.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_02-300x227.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Segunda representaci\u00f3n de&nbsp;los iconos para la&nbsp;fuente<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/26_01.jpg\" alt=\"\" class=\"wp-image-1000004417\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-1024x775.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-420x318.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-768x581.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-1200x909.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-600x454.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-625x473.jpg 625w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-80x61.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/26_01-300x227.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Segunda representaci\u00f3n de&nbsp;los iconos para la&nbsp;fuente (inversi\u00f3n)<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;esta etapa del trabajo sobre los iconos, cuando ya&nbsp;se&nbsp;hab\u00eda elaborado el&nbsp;encargo t\u00e9cnico y&nbsp;se&nbsp;ten\u00eda una comprensi\u00f3n clara del conjunto principal de&nbsp;pictogramas, surgi\u00f3 la&nbsp;cuesti\u00f3n de&nbsp;cu\u00e1nto se&nbsp;puede alejar de&nbsp;las formas convencionales. En&nbsp;la&nbsp;discusi\u00f3n se&nbsp;lleg\u00f3 a&nbsp;la&nbsp;conclusi\u00f3n de&nbsp;que se&nbsp;deben mantener las formas establecidas, pero algunos pictogramas pueden ser actualizados, como el&nbsp;caso de&nbsp;los relojes.<\/p>\n\n\n\n<p>Dise\u00f1amos todo el&nbsp;conjunto de&nbsp;iconos para tres estilos, los editamos y&nbsp;ajustamos nuevamente, obteniendo una gran cantidad de&nbsp;iconos para los tres grosores (thin, regular, black). A&nbsp;partir de&nbsp;estos se&nbsp;crear\u00e1n los iconos para los 9&nbsp;estilos rectos.<\/p>\n\n\n\n<p>Los pictogramas forman parte de&nbsp;la&nbsp;fuente, por lo&nbsp;que deben cambiar su&nbsp;saturaci\u00f3n en&nbsp;las mismas proporciones en&nbsp;las que cambia cada estilo. Al&nbsp;trabajar este aspecto, se&nbsp;descubri\u00f3 que el&nbsp;grosor principal para los pictogramas no&nbsp;ser\u00e1 el&nbsp;stem de&nbsp;las letras may\u00fasculas, sino el&nbsp;stem de&nbsp;los caracteres especiales. Los pictogramas ajustan su&nbsp;peso seg\u00fan la&nbsp;l\u00f3gica de&nbsp;la&nbsp;fuente, manteniendo la&nbsp;legibilidad sin perder claridad en&nbsp;los estilos gruesos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/27.jpg\" alt=\"\" class=\"wp-image-1000004418\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/27.jpg 1440w, https:\/\/typetype.org\/es\/wp-content\/uploads\/27-1024x454.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/27-1200x533.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/27-768x341.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/27-420x186.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/27-600x266.jpg 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Iconos para 3&nbsp;estilos clave de&nbsp;peso<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Otra tarea t\u00e9cnica compleja, pero interesante, en&nbsp;este proyecto era el&nbsp;hecho de&nbsp;que los nombres de&nbsp;los glifos de&nbsp;los iconos no&nbsp;tienen un&nbsp;valor de&nbsp;Unicode, lo&nbsp;que significa que, al&nbsp;ordenar los glifos dentro de&nbsp;la&nbsp;fuente, se&nbsp;dispersar\u00e1n en&nbsp;un&nbsp;orden aleatorio.<\/p>\n\n\n\n<p>Cuando abramos el&nbsp;panel de&nbsp;glifos, por ejemplo, en&nbsp;Adobe Illustrator, veremos que algunos iconos estar\u00e1n juntos, pero otros estar\u00e1n distribuidos de&nbsp;forma aleatoria. Este enfoque aleatorio se&nbsp;debe evitar, por lo&nbsp;que estamos pensando en&nbsp;c\u00f3mo resolver este problema.<\/p>\n\n\n\n<p>Otro problema es&nbsp;que en&nbsp;programas como PowerPoint, los glifos sin Unicode simplemente no&nbsp;se&nbsp;mostrar\u00e1n en&nbsp;el&nbsp;panel de&nbsp;inserci\u00f3n de&nbsp;s\u00edmbolos, y&nbsp;no&nbsp;podr\u00e1n ser accedidos desde el&nbsp;teclado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/28.jpg\" alt=\"\" class=\"wp-image-1000004419\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/28.jpg 1440w, https:\/\/typetype.org\/es\/wp-content\/uploads\/28-1024x484.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/28-1200x567.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/28-768x363.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/28-420x198.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/28-600x283.jpg 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Asignaci\u00f3n de&nbsp;valores Unicode para todos los iconos<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Por lo&nbsp;tanto, le&nbsp;pedimos a&nbsp;nuestro programador que escriba un&nbsp;script llamado Unicode Filler, que rellene las celdas seleccionadas con valores Unicode de&nbsp;un&nbsp;rango libre de&nbsp;este est\u00e1ndar, manteniendo un&nbsp;orden espec\u00edfico.<\/p>\n\n\n\n<p>De&nbsp;esta manera, podremos conservar nuestra secuencia de&nbsp;iconos al&nbsp;seleccionarlos desde el&nbsp;panel de&nbsp;glifos en&nbsp;los productos de&nbsp;Adobe y&nbsp;permitir la&nbsp;selecci\u00f3n y&nbsp;adici\u00f3n de&nbsp;iconos en&nbsp;programas como PowerPoint. Adem\u00e1s, los iconos podr\u00e1n ser f\u00e1cilmente copiados de&nbsp;un&nbsp;programa a&nbsp;otro, \u00a1lo cual es&nbsp;realmente genial!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/27_2.gif\" alt=\"\" class=\"wp-image-1000004420\"\/><figcaption class=\"wp-element-caption\"><strong><strong>100 iconos incluidos en\u00a0los estilos b\u00e1sicos de\u00a0<a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT\u00a0Interphases<\/a><\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fase 5&nbsp;\u2014 Creaci\u00f3n de&nbsp;la&nbsp;familia monoespaciada<\/h2>\n\n\n\n<p>Desde el&nbsp;principio, quer\u00edamos crear una familia monoespaciada sat\u00e9lite para programadores, que complementara la&nbsp;familia principal. Analizamos las fuentes monoespaciadas m\u00e1s populares que se&nbsp;utilizan para escribir c\u00f3digo. Estudiamos todos los matices y&nbsp;caracter\u00edsticas de&nbsp;este tipo de&nbsp;fuentes, adem\u00e1s de&nbsp;consultar con diferentes programadores.<\/p>\n\n\n\n<p>Como resultado de&nbsp;la&nbsp;investigaci\u00f3n, elaboramos una tabla consolidada en&nbsp;la&nbsp;que definimos los valores de&nbsp;las proporciones de&nbsp;una \u00abfuente monoespaciada ideal\u00bb. En&nbsp;particular, nos interesaban par\u00e1metros como: el&nbsp;ancho del \u00e1rea de&nbsp;la&nbsp;caja, las dimensiones de&nbsp;los stems para el&nbsp;estilo regular y&nbsp;negrita, las configuraciones t\u00e9cnicas del interlineado, similares a&nbsp;la&nbsp;versi\u00f3n regular de&nbsp;la&nbsp;fuente. El&nbsp;n\u00famero de&nbsp;estilos, como en&nbsp;la&nbsp;mayor\u00eda de&nbsp;los casos con fuentes similares, se&nbsp;propuso limitar a&nbsp;cuatro.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/sc4_2.gif\" alt=\"\" class=\"wp-image-1000005224\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Tabla con el&nbsp;an\u00e1lisis de&nbsp;fuentes monoespaciadas existentes<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Despu\u00e9s de&nbsp;definir todas las proporciones y&nbsp;m\u00e9tricas clave, nos sorprendi\u00f3 mucho que incluso las dimensiones de&nbsp;los stems en&nbsp;los estilos regular y&nbsp;negrita de&nbsp;la&nbsp;fuente monoespaciada coincidieran relativamente con nuestra fuente principal. Consideramos esto como una buena se\u00f1al y&nbsp;comenzamos a&nbsp;dise\u00f1ar la&nbsp;fuente en&nbsp;una cuadr\u00edcula de&nbsp;10\u00d710. <\/p>\n\n\n\n<p>Durante el&nbsp;proceso, mantuvimos y&nbsp;cuidadosamente transpusimos a&nbsp;la&nbsp;\u00abnueva realidad\u00bb las caracter\u00edsticas principales de&nbsp;la&nbsp;construcci\u00f3n de&nbsp;los signos del estilo base, espec\u00edficamente su&nbsp;apertura (grado de&nbsp;apertura\/cierre de&nbsp;los signos redondeados) y&nbsp;el&nbsp;grado de&nbsp;redondeo de&nbsp;las formas circulares. <\/p>\n\n\n\n<p>Debido a&nbsp;que la&nbsp;fuente es&nbsp;monoespaciada, es&nbsp;decir, el&nbsp;ancho del \u00e1rea de&nbsp;la&nbsp;caja en&nbsp;todos sus signos es&nbsp;el&nbsp;mismo (600 unidades tipogr\u00e1ficas), surgi\u00f3 la&nbsp;necesidad de&nbsp;modificar la&nbsp;forma de&nbsp;algunos signos para que el&nbsp;conjunto fuera uniforme y&nbsp;no&nbsp;se&nbsp;crearan \u00abagujeros\u00bb ni&nbsp;\u00abpegotes\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/30.jpeg\" alt=\"\" class=\"wp-image-1000005226\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/30.jpeg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-1024x157.jpeg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-420x65.jpeg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-768x118.jpeg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-1200x184.jpeg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-600x92.jpeg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-944x145.jpeg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-80x12.jpeg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/30-300x46.jpeg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Cambio en&nbsp;la&nbsp;forma de&nbsp;algunos signos<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Para el&nbsp;equilibrio entre el&nbsp;blanco y&nbsp;el&nbsp;negro, decidimos reintroducir los compensadores de&nbsp;los que hab\u00edamos prescindido en&nbsp;la&nbsp;fuente base regular. Esto a\u00f1adir\u00e1 al&nbsp;tipo monoespaciado, adem\u00e1s de&nbsp;un&nbsp;balance adecuado entre el&nbsp;blanco y&nbsp;el&nbsp;negro, tambi\u00e9n car\u00e1cter. En&nbsp;este caso, esto es&nbsp;m\u00e1s que apropiado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/31.jpg\" alt=\"\" class=\"wp-image-1000004421\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/31.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-1024x227.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-420x93.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-768x170.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-1200x266.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-600x133.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-944x209.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-80x18.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/31-300x66.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Diferencia en&nbsp;los compensadores visuales entre las subfamilias<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Como resultado, algunas letras resultaron ser muy anchas (como \u00ab\u0448\u00bb, \u00ab\u0449\u00bb,&nbsp;\u00ab\u0436\u00bb, \u00abm\u00bb), y&nbsp;les resultaba \u00abdif\u00edcil\u00bb encajar en&nbsp;el&nbsp;\u00e1rea de&nbsp;la&nbsp;caja tipogr\u00e1fica (600) en&nbsp;su&nbsp;forma y&nbsp;proporciones naturales. Para que pudieran ser legibles sin alterar su&nbsp;forma, compensamos el&nbsp;stem vertical medio.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/32.jpeg\" alt=\"\" class=\"wp-image-1000005229\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/32.jpeg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-1024x439.jpeg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-420x180.jpeg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-768x329.jpeg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-1200x514.jpeg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-600x257.jpeg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-944x405.jpeg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-80x34.jpeg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/32-300x129.jpeg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Compensaci\u00f3n adicional de&nbsp;los signos de&nbsp;la&nbsp;fuente monoespaciada<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Continuamos trabajando en&nbsp;las compensaciones y&nbsp;el&nbsp;equilibrio entre el&nbsp;blanco y&nbsp;el&nbsp;negro, lo&nbsp;que result\u00f3 en&nbsp;cambios significativos en&nbsp;algunos signos. Esta deformaci\u00f3n no&nbsp;solo tiene un&nbsp;car\u00e1cter est\u00e9tico, sino que tambi\u00e9n aporta al&nbsp;tipo de&nbsp;letra una imagen y&nbsp;estilo \u00fanicos que lo&nbsp;hacen reconocible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/33.jpg\" alt=\"\" class=\"wp-image-1000004422\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/33.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-1024x124.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-420x51.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-768x93.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-1200x146.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-600x73.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-944x115.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-80x10.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/33-300x36.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Trabajo en&nbsp;la&nbsp;compensaci\u00f3n y&nbsp;el&nbsp;equilibrio entre el&nbsp;blanco y&nbsp;el&nbsp;negro<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Observamos c\u00f3mo se&nbsp;ve&nbsp;la&nbsp;fuente, realizamos ajustes en&nbsp;los espacios entre palabras y&nbsp;las formas, y&nbsp;reforzamos los compensadores, ya&nbsp;que la&nbsp;fuente se&nbsp;ve&nbsp;bastante oscura.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/34.jpg\" alt=\"\" class=\"wp-image-1000004423\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/34.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-1024x373.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-420x153.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-768x280.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-1200x437.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-600x219.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-944x344.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-80x29.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/34-300x109.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Trabajo en&nbsp;las compensaciones y&nbsp;ajustes de&nbsp;las formas de&nbsp;algunas letras<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Hablemos un&nbsp;poco sobre el&nbsp;tema de&nbsp;la&nbsp;composici\u00f3n de&nbsp;signos en&nbsp;fuentes monoespaciadas. De&nbsp;una forma u&nbsp;otra, su&nbsp;composici\u00f3n difiere de&nbsp;la&nbsp;composici\u00f3n de&nbsp;signos en&nbsp;nuestra fuente principal para interfaces. Realizamos una peque\u00f1a investigaci\u00f3n cualitativa sobre fuentes monoespaciadas, analizamos lo&nbsp;que ya&nbsp;tenemos, lo&nbsp;que necesitamos eliminar y&nbsp;lo&nbsp;que debe a\u00f1adirse a&nbsp;las fuentes.<\/p>\n\n\n\n<p>Ajustamos la\u00a0codificaci\u00f3n de\u00a0la\u00a0fuente base <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\"><a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT\u00a0Interphases<\/a><\/a> para convertirla en\u00a0la\u00a0codificaci\u00f3n necesaria para TT\u00a0Interphases Mono. Eliminamos los n\u00fameros tabulares y\u00a0los s\u00edmbolos de\u00a0moneda tabulares, ya\u00a0que ahora no\u00a0son necesarios, dado que toda la\u00a0fuente es\u00a0monoespaciada.<\/p>\n\n\n\n<p>Tambi\u00e9n eliminamos los iconos que creamos para la&nbsp;fuente principal. Suprimimos las ligaduras, ya&nbsp;que para los programadores, en&nbsp;particular, su&nbsp;presencia podr\u00eda representar un&nbsp;\u00abpeligro\u00bb: en&nbsp;el&nbsp;c\u00f3digo no&nbsp;debe haber reemplazo de&nbsp;varios signos por uno solo. A\u00f1adimos a&nbsp;la&nbsp;codificaci\u00f3n los s\u00edmbolos especiales necesarios para los programadores.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/35.jpg\" alt=\"\" class=\"wp-image-1000004424\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/35.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-1024x219.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-420x90.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-768x165.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-1200x257.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-600x129.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-944x202.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-80x17.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/35-300x64.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Implementaci\u00f3n de&nbsp;s\u00edmbolos adicionales en&nbsp;la&nbsp;familia monoespaciada<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Despu\u00e9s de&nbsp;probar las funciones, nos dimos cuenta de&nbsp;que la&nbsp;funci\u00f3n Frac (responsable de&nbsp;las fracciones) no&nbsp;funcionaba, y&nbsp;a\u00fan debemos pensar en&nbsp;su&nbsp;operatividad. Normalmente, en&nbsp;este tipo de&nbsp;fuentes, no&nbsp;se&nbsp;implementan funciones como esta, sin embargo, decidimos mantenerla y&nbsp;comenzamos a&nbsp;trabajar en&nbsp;la&nbsp;l\u00f3gica de&nbsp;este funcionalidad.<\/p>\n\n\n\n<p>Al&nbsp;final, para que Frac funcionara correctamente, a\u00f1adimos un&nbsp;conjunto separado de&nbsp;numeradores y&nbsp;denominadores con aperturas negativas, para que, al&nbsp;combinarse con la&nbsp;fracci\u00f3n, el&nbsp;\u00e1rea de&nbsp;la&nbsp;caja fuera igual a&nbsp;600 unidades tipogr\u00e1ficas. Suena complicado y&nbsp;poco claro, pero al&nbsp;final todo funcion\u00f3.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/36.gif\" alt=\"\" class=\"wp-image-1000004425\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Funci\u00f3n Frac (fracciones) en&nbsp;uso<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Probamos la&nbsp;fuente sobre un&nbsp;fondo oscuro, ya&nbsp;que generalmente se&nbsp;utiliza para escribir c\u00f3digo por parte de&nbsp;los programadores. Pedimos a&nbsp;nuestro colega que nos env\u00ede un&nbsp;fragmento real de&nbsp;c\u00f3digo, lo&nbsp;remaquetamos y&nbsp;probamos el&nbsp;resultado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/37.jpg\" alt=\"\" class=\"wp-image-1000004426\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/37.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-1024x527.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-420x216.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-768x395.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-1200x617.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-600x309.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-920x473.jpg 920w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-80x41.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/37-300x154.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Prueba de&nbsp;la&nbsp;fuente monoespaciada<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>El&nbsp;resultado es&nbsp;satisfactorio. La&nbsp;letra \u00ab\u043e\u00bb no&nbsp;se&nbsp;confunde con el&nbsp;n\u00famero \u00ab0\u00bb, ni&nbsp;la&nbsp;\u00abl\u00bb con el&nbsp;\u00ab1\u00bb, todo es&nbsp;legible y&nbsp;distinguible.<\/p>\n\n\n\n<p>Pasamos a&nbsp;los estilos monoespaciados inclinados. Observamos y&nbsp;analizamos los an\u00e1logos existentes&nbsp;y, como siempre, creamos una tabla que ten\u00eda en&nbsp;cuenta las proporciones principales, as\u00ed como el&nbsp;\u00e1ngulo de&nbsp;inclinaci\u00f3n. Como resultado de&nbsp;la&nbsp;investigaci\u00f3n, se&nbsp;hizo evidente que el&nbsp;\u00ab\u00e1ngulo ideal\u00bb de&nbsp;inclinaci\u00f3n es&nbsp;de&nbsp;11&nbsp;grados.<\/p>\n\n\n\n<p>Al&nbsp;trabajar en&nbsp;los estilos inclinados, decidimos divertirnos un&nbsp;poco y&nbsp;dibujamos bocetos en&nbsp;los que probamos diferentes formas extra\u00f1as y&nbsp;curiosas de&nbsp;los signos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/38.jpg\" alt=\"\" class=\"wp-image-1000004427\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/38.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-1024x549.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-420x225.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-768x411.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-1200x643.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-600x321.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-883x473.jpg 883w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-80x43.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/38-300x161.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Bocetos del estilo inclinado de&nbsp;la&nbsp;fuente monoespaciada<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;el&nbsp;proceso de&nbsp;trabajo sobre la&nbsp;fuente, decidimos no&nbsp;hacer simplemente un&nbsp;estilo inclinado, sino una verdadera cursiva. A&nbsp;continuaci\u00f3n, comenz\u00f3 una nueva fase de&nbsp;bocetos. Quer\u00edamos darle car\u00e1cter a&nbsp;la&nbsp;cursiva, pero sin perder la&nbsp;neutralidad. Como resultado, decidimos abandonar las formas extremas en&nbsp;favor de&nbsp;signos m\u00e1s limpios y&nbsp;legibles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/40.jpg\" alt=\"\" class=\"wp-image-1000004428\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/40.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-1024x146.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-420x60.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-768x110.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-1200x171.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-600x86.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-944x135.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-80x11.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/40-300x43.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Trabajo en&nbsp;el&nbsp;dise\u00f1o de&nbsp;las formas<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Cambiamos algunas formas de&nbsp;las letras que se&nbsp;utilizan tradicionalmente en&nbsp;los estilos de&nbsp;cursiva, lo&nbsp;que le&nbsp;da&nbsp;a&nbsp;los estilos inclinados un&nbsp;toque de&nbsp;\u00abescritura a&nbsp;mano\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/41.jpg\" alt=\"\" class=\"wp-image-1000004429\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/41.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-1024x132.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-420x54.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-768x99.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-1200x154.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-600x77.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-944x121.jpg 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-80x10.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/41-300x39.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Diferencias entre los estilos recto e&nbsp;inclinado<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fase 6&nbsp;\u2014 Creaci\u00f3n del hinting<\/h2>\n\n\n\n<p>El&nbsp;hinting es&nbsp;un&nbsp;proceso t\u00e9cnico complejo de&nbsp;optimizaci\u00f3n del dise\u00f1o de&nbsp;la&nbsp;fuente para ciertos tipos de&nbsp;rasterizadores (pantallas, navegadores, programas). En&nbsp;nuestra empresa, el&nbsp;hinting es&nbsp;un&nbsp;proceso tecnol\u00f3gico separado que requiere mucho tiempo.<\/p>\n\n\n\n<p>Inicialmente, para la&nbsp;creaci\u00f3n del hinting no&nbsp;todos los estilos estaban listos, sino solo cinco de&nbsp;los nueve: Black, Regular, ExtraLight, Light y&nbsp;Thin. Mientras se&nbsp;completaban los otros estilos&nbsp;\u2014 se&nbsp;agregaban iconos y&nbsp;se&nbsp;finalizaba la&nbsp;parte t\u00e9cnica&nbsp;\u2014 nuestro experto en&nbsp;hinting, Viktor, decidi\u00f3 comenzar la&nbsp;optimizaci\u00f3n con el&nbsp;estilo Regular y&nbsp;luego ir&nbsp;avanzando hacia los estilos m\u00e1s ligeros. Es&nbsp;decir, despu\u00e9s de&nbsp;Regular, se&nbsp;aplicar\u00eda el&nbsp;hinting en&nbsp;los estilos m\u00e1s ligeros como Light, ExtraLight y&nbsp;Thin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/42_2.jpg\" alt=\"\" class=\"wp-image-1000004430\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2.jpg 1400w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-1024x658.jpg 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-420x270.jpg 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-768x493.jpg 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-1200x771.jpg 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-600x385.jpg 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-737x473.jpg 737w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-80x51.jpg 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/42_2-300x193.jpg 300w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Fotograf\u00eda del c\u00f3digo real de&nbsp;hinting de&nbsp;las fuentes TypeType<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>\u00bfPor qu\u00e9 son necesarios los estilos intermedios cuando se&nbsp;realiza el&nbsp;hinting de&nbsp;una familia tipogr\u00e1fica?<\/p>\n\n\n\n<p>Normalmente, para el&nbsp;<a href=\"https:\/\/typetype.org\/es\/hinting\/\">hinting de&nbsp;las fuentes<\/a> <a href=\"https:\/\/typetype.org\/es\/\">TypeType<\/a> utilizamos una herramienta de&nbsp;hinting de&nbsp;Microsoft llamada Visual TrueType (VTT). Sin embargo, para acelerar y&nbsp;mejorar el&nbsp;trabajo de&nbsp;hinting, tambi\u00e9n utilizamos un&nbsp;software adicional desarrollado internamente en&nbsp;nuestro estudio.<\/p>\n\n\n\n<p>Una de&nbsp;las funciones clave de&nbsp;este software es&nbsp;transferir los hints entre fuentes de&nbsp;manera glifo por glifo. Cuanto m\u00e1s cercanos en&nbsp;forma (en&nbsp;este caso, en&nbsp;grosor) est\u00e9n los estilos entre&nbsp;s\u00ed, menos errores ocurrir\u00e1n al&nbsp;transferir la&nbsp;informaci\u00f3n de&nbsp;hinting, lo&nbsp;que significa que se&nbsp;necesitar\u00e1 menos trabajo manual para hacer correcciones.<\/p>\n\n\n\n<p>En&nbsp;cuanto a&nbsp;nuestro software, este script sigue un&nbsp;algoritmo que busca puntos similares en&nbsp;un&nbsp;estilo adyacente en&nbsp;grosor y&nbsp;transfiere los hints cuidadosamente. Como los contornos no&nbsp;pueden ser completamente id\u00e9nticos, en&nbsp;el&nbsp;10-30% de&nbsp;los casos se&nbsp;presentan errores que deben corregirse manualmente. A&nbsp;pesar de&nbsp;esto, se&nbsp;reduce el&nbsp;tiempo de&nbsp;trabajo en&nbsp;el&nbsp;hinting ca\nfa5\nsi en&nbsp;un&nbsp;5&nbsp;veces.<\/p>\n\n\n\n<p>As\u00ed que el&nbsp;primer estilo en&nbsp;ser procesado fue el&nbsp;Regular. Se&nbsp;realiz\u00f3 el&nbsp;auto-hinting con las herramientas de&nbsp;VTT. Con esta herramienta, se&nbsp;hizo un&nbsp;mapeo preliminar, se&nbsp;definieron los grupos de&nbsp;caracteres y&nbsp;se&nbsp;establecieron los valores de&nbsp;control para ellos. Los grupos de&nbsp;valores de&nbsp;control son valores de&nbsp;referencia para los caracteres cuyos contornos deben estar sincronizados entre s\u00ed&nbsp;tanto en&nbsp;ancho como en&nbsp;altura, por lo&nbsp;que los contornos de&nbsp;los glifos dentro de&nbsp;un&nbsp;mismo grupo tendr\u00e1n caracter\u00edsticas comunes.<\/p>\n\n\n\n<p>Adem\u00e1s de&nbsp;los cuatro grupos est\u00e1ndar que se&nbsp;definen autom\u00e1ticamente: UpperCase, LowerCase, Figure y&nbsp;Other, se&nbsp;a\u00f1adieron cuatro m\u00e1s: Superior, OldStyle, Icon, Balls, Numr. Posteriormente, durante el&nbsp;proceso de&nbsp;trabajo, se&nbsp;definieron y&nbsp;asignaron manualmente valores de&nbsp;control propios para estos grupos personalizados, los cuales se&nbsp;utilizaron para el&nbsp;hinting de&nbsp;los caracteres dentro de&nbsp;estos grupos.<\/p>\n\n\n\n<p>En&nbsp;total, se&nbsp;a\u00f1adieron aproximadamente 60&nbsp;valores adicionales a&nbsp;cada estilo, y&nbsp;cuanto m\u00e1s grueso se&nbsp;vuelve el&nbsp;estilo, m\u00e1s necesario es&nbsp;utilizar una mayor cantidad de&nbsp;valores para tener un&nbsp;control m\u00e1s flexible sobre los stems.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/43.gif\" alt=\"\" class=\"wp-image-1000004431\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Algunos grupos de&nbsp;caracteres utilizados en&nbsp;el&nbsp;hinting de&nbsp;la&nbsp;fuente<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Despu\u00e9s de&nbsp;utilizar el&nbsp;auto-hinting y&nbsp;antes de&nbsp;comenzar la&nbsp;edici\u00f3n manual del mapa de&nbsp;p\u00edxeles de&nbsp;la&nbsp;fuente, se&nbsp;aplicaron adem\u00e1s desarrollos internos. Por ejemplo, el&nbsp;hinting de&nbsp;los signos compuestos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/44.png\" alt=\"\" class=\"wp-image-1000004432\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/44.png 185w, https:\/\/typetype.org\/es\/wp-content\/uploads\/44-58x80.png 58w\" sizes=\"(max-width: 185px) 100vw, 185px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Hinting del signo Amacron<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;la&nbsp;imagen mostrada se&nbsp;presenta el&nbsp;signo Amacron, de&nbsp;tama\u00f1o entre 12&nbsp;y 15&nbsp;p\u00edxeles a&nbsp;una resoluci\u00f3n de&nbsp;72&nbsp;dpi, utilizando la&nbsp;rasterizaci\u00f3n de&nbsp;tipo DirectWrite en&nbsp;el&nbsp;estilo Bold. Presta atenci\u00f3n a&nbsp;c\u00f3mo se&nbsp;rasteriza el&nbsp;signo diacr\u00edtico Macron.<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;primera l\u00ednea&nbsp;\u2014 la&nbsp;rasterizaci\u00f3n del signo antes del hinting;<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;segunda&nbsp;\u2014 la&nbsp;rasterizaci\u00f3n despu\u00e9s del auto-hinting; <\/p>\n\n\n\n<p>En&nbsp;la&nbsp;tercera&nbsp;\u2014 la&nbsp;rasterizaci\u00f3n despu\u00e9s de&nbsp;aplicar los scripts de&nbsp;desarrollo propio. <\/p>\n\n\n\n<p>Despu\u00e9s de&nbsp;todas las manipulaciones para preparar la&nbsp;fuente, finalmente pasamos al&nbsp;hinting en&nbsp;s\u00ed.<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;imagen siguiente se&nbsp;muestra la&nbsp;fuente TT&nbsp;Interphases Mono Regular antes del hinting. Se&nbsp;puede notar que en&nbsp;diferentes tama\u00f1os hay un&nbsp;problema de&nbsp;coherencia en&nbsp;el&nbsp;grosor de&nbsp;los p\u00edxeles, tanto entre los stems de&nbsp;un&nbsp;mismo glifo como entre diferentes glifos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/45.png\" alt=\"\" class=\"wp-image-1000004433\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/45.png 514w, https:\/\/typetype.org\/es\/wp-content\/uploads\/45-420x319.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/45-300x228.png 300w, https:\/\/typetype.org\/es\/wp-content\/uploads\/45-80x61.png 80w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>TT&nbsp;Interphases Mono Regular antes del hinting<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Para resolver este problema, se&nbsp;definieron transiciones de&nbsp;grosor de&nbsp;p\u00edxeles para un&nbsp;aumento uniforme del stem con el&nbsp;incremento del tama\u00f1o de&nbsp;la&nbsp;fuente. Se&nbsp;restaur\u00f3 la&nbsp;coherencia entre todos los stems de&nbsp;la&nbsp;fuente, y&nbsp;los contornos ahora se&nbsp;ven uniformes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/46.png\" alt=\"\" class=\"wp-image-1000004434\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/46.png 511w, https:\/\/typetype.org\/es\/wp-content\/uploads\/46-420x317.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/46-300x227.png 300w, https:\/\/typetype.org\/es\/wp-content\/uploads\/46-80x60.png 80w\" sizes=\"(max-width: 511px) 100vw, 511px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>TT&nbsp;Interphases Mono Regular despu\u00e9s del hinting<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Lo&nbsp;mismo se&nbsp;muestra en&nbsp;la&nbsp;siguiente imagen entre los signos num\u00e9ricos y&nbsp;sus versiones min\u00fasculas en&nbsp;TT&nbsp;Interphases DemiBold, donde las min\u00fasculas comienzan a&nbsp;volverse m\u00e1s delgadas demasiado pronto en&nbsp;comparaci\u00f3n con las versiones regulares.<\/p>\n\n\n\n<p>Por supuesto, hay que entender que el&nbsp;principal objetivo del hinting es&nbsp;la&nbsp;legibilidad de&nbsp;la&nbsp;fuente, y&nbsp;para lograr este objetivo, a&nbsp;veces es&nbsp;necesario sacrificar la&nbsp;coherencia de&nbsp;los stems debido a&nbsp;la&nbsp;falta de&nbsp;espacio en&nbsp;blanco. <\/p>\n\n\n\n<p>Por ejemplo, en&nbsp;la&nbsp;imagen de&nbsp;abajo se&nbsp;muestra que en&nbsp;tama\u00f1os de&nbsp;12, 13, 15&nbsp;y mayores, todos los stems tienen el&nbsp;mismo grosor, pero en&nbsp;el&nbsp;tama\u00f1o&nbsp;14, debido a&nbsp;la&nbsp;falta de&nbsp;espacio en&nbsp;los glifos del euro, la&nbsp;grivna y&nbsp;la&nbsp;rupia, las horizontales se&nbsp;hicieron intencionalmente m\u00e1s delgadas.<\/p>\n\n\n\n<p>De&nbsp;no&nbsp;ser as\u00ed, sin distorsionar los contornos, debido a&nbsp;los grosores iguales, se&nbsp;podr\u00eda repetir la&nbsp;situaci\u00f3n que se&nbsp;puede ver en&nbsp;la&nbsp;parte superior del signo de&nbsp;la&nbsp;grivna en&nbsp;el&nbsp;tama\u00f1o&nbsp;14, en&nbsp;esta misma imagen a&nbsp;la&nbsp;derecha.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/47.png\" alt=\"\" class=\"wp-image-1000004435\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/47.png 505w, https:\/\/typetype.org\/es\/wp-content\/uploads\/47-420x240.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/47-300x171.png 300w, https:\/\/typetype.org\/es\/wp-content\/uploads\/47-80x46.png 80w\" sizes=\"(max-width: 505px) 100vw, 505px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>N\u00fameros regulares, min\u00fasculos y&nbsp;s\u00edmbolos de&nbsp;moneda en&nbsp;TT&nbsp;Interphases DemiBold antes del hinting<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/48.png\" alt=\"\" class=\"wp-image-1000004436\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/48.png 485w, https:\/\/typetype.org\/es\/wp-content\/uploads\/48-420x247.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/48-300x176.png 300w, https:\/\/typetype.org\/es\/wp-content\/uploads\/48-80x47.png 80w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>N\u00fameros regulares, min\u00fasculos y&nbsp;s\u00edmbolos de&nbsp;moneda en&nbsp;TT&nbsp;Interphases DemiBold despu\u00e9s del hinting<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;los estilos finos, la&nbsp;situaci\u00f3n es&nbsp;un&nbsp;poco diferente: adem\u00e1s de&nbsp;la&nbsp;coherencia, tambi\u00e9n es&nbsp;necesario restaurar el&nbsp;grosor de&nbsp;los stems. En&nbsp;la&nbsp;imagen de&nbsp;abajo se&nbsp;puede ver que algunos stems se&nbsp;vuelven tan finos que desaparecen por completo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/49.png\" alt=\"\" class=\"wp-image-1000004437\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/49.png 448w, https:\/\/typetype.org\/es\/wp-content\/uploads\/49-420x365.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/49-300x260.png 300w, https:\/\/typetype.org\/es\/wp-content\/uploads\/49-80x69.png 80w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>TT&nbsp;Interphases ExtraLight antes del hinting<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/50.png\" alt=\"\" class=\"wp-image-1000004439\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/50.png 450w, https:\/\/typetype.org\/es\/wp-content\/uploads\/50-420x364.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/50-300x260.png 300w, https:\/\/typetype.org\/es\/wp-content\/uploads\/50-80x69.png 80w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>TT&nbsp;Interphases ExtraLight despu\u00e9s del hinting<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Es&nbsp;importante entender que en&nbsp;todas las im\u00e1genes mostradas anteriormente bajo el&nbsp;t\u00edtulo \u00abDespu\u00e9s del hinting\u00bb, el&nbsp;resultado es&nbsp;en&nbsp;realidad el&nbsp;producto final de&nbsp;todo el&nbsp;trabajo realizado en&nbsp;los contornos de&nbsp;cada glifo: la&nbsp;sincronizaci\u00f3n de&nbsp;los grosores, la&nbsp;correcci\u00f3n de&nbsp;distorsiones y&nbsp;desigualdades, el&nbsp;control de&nbsp;la&nbsp;posici\u00f3n de&nbsp;los trazos y&nbsp;la&nbsp;restauraci\u00f3n de&nbsp;la&nbsp;legibilidad.<\/p>\n\n\n\n<p>Por ejemplo, para mejorar la&nbsp;legibilidad del signo Hbar en&nbsp;TT&nbsp;Interphases ExtraBold, los p\u00edxeles de&nbsp;la&nbsp;barra superior fueron desplazados manualmente; tales operaciones se&nbsp;denominan deltas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/51_52_2.png\" alt=\"\" class=\"wp-image-1000004440\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2.png 1401w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-1024x366.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-420x150.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-768x275.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-1200x429.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-600x215.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-944x338.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-80x29.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/51_52_2-300x107.png 300w\" sizes=\"(max-width: 1401px) 100vw, 1401px\" \/><figcaption class=\"wp-element-caption\"><strong><strong>Hbar despu\u00e9s del desplazamiento manual de&nbsp;p\u00edxeles en&nbsp;TT&nbsp;Interphases ExtraBold<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Para cada fuente de\u00a0la\u00a0familia <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT\u00a0Interphases<\/a>, se\u00a0utilizaron alrededor de\u00a0170\u00a0deltas, lo\u00a0que da\u00a0un\u00a0total de\u00a03740 deltas para los 18\u00a0estilos de\u00a0la\u00a0familia principal y\u00a0los 4\u00a0estilos de\u00a0la\u00a0familia monoespaciada. Es\u00a0importante entender que, cuanto m\u00e1s delgado sea el\u00a0estilo, probablemente se\u00a0necesitar\u00e1n menos deltas en\u00a0\u00e9l.<\/p>\n\n\n\n<p>En&nbsp;general, cuanto menos deltas se&nbsp;utilicen, mejor, porque cada instrucci\u00f3n delta ocupar\u00e1 un&nbsp;byte separado en&nbsp;el&nbsp;archivo de&nbsp;la&nbsp;fuente, y&nbsp;muchas veces esto es&nbsp;muy importante para los servicios y&nbsp;sitios web masivos.<\/p>\n\n\n\n<p>Adem\u00e1s, como ejemplo, en&nbsp;la&nbsp;letra cir\u00edlica may\u00fascula \u00ab\u0418\u00bb en&nbsp;TT&nbsp;Interphases Medium Italic, no&nbsp;est\u00e1bamos satisfechos con el&nbsp;grosor de&nbsp;la&nbsp;diagonal: en&nbsp;tama\u00f1os peque\u00f1os, se&nbsp;volvi\u00f3 demasiado delgada.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/53.gif\" alt=\"\" class=\"wp-image-1000004443\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Glifo \u00ab\u0418\u00bb antes de&nbsp;las correcciones y&nbsp;despu\u00e9s del desplazamiento delta en&nbsp;TT&nbsp;Interphases Medium Italic<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Tambi\u00e9n se&nbsp;debe se\u00f1alar que en&nbsp;algunos s\u00edmbolos se&nbsp;corrigieron las posiciones de&nbsp;los componentes. Un&nbsp;componente en&nbsp;una fuente es&nbsp;un&nbsp;contorno que se&nbsp;usa con frecuencia y&nbsp;al&nbsp;cual simplemente hacemos referencia en&nbsp;los glifos donde se&nbsp;utiliza. El&nbsp;componente se&nbsp;toma del contorno principal como una referencia, por lo&nbsp;que si&nbsp;se&nbsp;cambia el&nbsp;contorno principal, el&nbsp;componente en&nbsp;los dem\u00e1s signos donde se&nbsp;usa tambi\u00e9n cambiar\u00e1.<\/p>\n\n\n\n<p>Adem\u00e1s, el&nbsp;archivo final de&nbsp;la&nbsp;fuente pesar\u00e1 mucho menos, ya&nbsp;que se&nbsp;ahorra espacio dentro del archivo debido a&nbsp;la&nbsp;ausencia de&nbsp;informaci\u00f3n innecesaria.<\/p>\n\n\n\n<p>Por ejemplo, en&nbsp;la&nbsp;imagen de&nbsp;abajo, en&nbsp;el&nbsp;signo de&nbsp;la&nbsp;\u00abbola de&nbsp;billar\u00bb 0\u00d72473, el&nbsp;componente del cero se&nbsp;desplaz\u00f3 una unidad tipogr\u00e1fica (un&nbsp;valor muy peque\u00f1o) en&nbsp;relaci\u00f3n con el&nbsp;componente del dos, lo&nbsp;que hizo que en&nbsp;ciertos tama\u00f1os el&nbsp;componente del cero estuviera un&nbsp;p\u00edxel m\u00e1s abajo (lo&nbsp;cual es&nbsp;un&nbsp;cambio bastante grande).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/56.gif\" alt=\"\" class=\"wp-image-1000004442\"\/><figcaption class=\"wp-element-caption\"><strong><strong>S\u00edmbolo 0\u00d72473 antes y&nbsp;despu\u00e9s de&nbsp;la&nbsp;correcci\u00f3n de&nbsp;la&nbsp;posici\u00f3n de&nbsp;los componentes en&nbsp;TT&nbsp;Interphases ExtraLight<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Cabe destacar que logramos reducir el\u00a0tama\u00f1o de\u00a0los archivos de\u00a0fuentes con hinting manual en\u00a0un\u00a0promedio del\u00a018% en\u00a0comparaci\u00f3n con el\u00a0auto-hinting en\u00a0<a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT\u00a0Interphases<\/a>, y\u00a0en\u00a0el\u00a0caso de\u00a0TT\u00a0Interphases Mono, un\u00a05%. Es\u00a0posible que esto sea una buena noticia para algunos de\u00a0nuestros muy respetados usuarios de\u00a0nuestras fuentes, que las utilizan activamente en\u00a0la\u00a0web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/logo.gif\" alt=\"\" class=\"wp-image-1000004444\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Hinting del logotipo de&nbsp;la&nbsp;fuente de&nbsp;la&nbsp;estudio TypeType<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fase 7&nbsp;\u2014 Creaci\u00f3n de&nbsp;estilos variables<\/h2>\n\n\n\n<p>Para comenzar, abrimos todos los estilos que formar\u00e1n la&nbsp;base de&nbsp;nuestra fuente variable. El&nbsp;n\u00famero \u00f3ptimo de&nbsp;maestros para crear una fuente variable var\u00eda entre tres y&nbsp;cinco. Para crear TT&nbsp;Interphases Variable, elegimos cuatro maestros principales: Thin, Regular, Bold, Black. <\/p>\n\n\n\n<p>Trabajamos con fontinfo, a\u00f1adimos el&nbsp;maestro mediante copia, configuramos el&nbsp;valor del peso y&nbsp;corregimos los nombres de&nbsp;la&nbsp;fuente para asegurarnos de&nbsp;que se&nbsp;muestre correctamente en&nbsp;los programas. A\u00f1adimos el&nbsp;eje de&nbsp;variabilidad que necesitamos, en&nbsp;nuestro caso Weight. <\/p>\n\n\n\n<p>Escribimos todos los dem\u00e1s estilos como instancias y&nbsp;asignamos los grosores de&nbsp;los stems de&nbsp;nuestros estilos a&nbsp;trav\u00e9s de \u00ab=\u00bb. Una vez que las pesta\u00f1as Names, Axes, Masters e&nbsp;Instances est\u00e9n correctamente completadas, podemos pasar a&nbsp;verificar la&nbsp;compatibilidad de&nbsp;los contornos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/sc58_2.gif\" alt=\"\" class=\"wp-image-1000004445\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Trabajo en&nbsp;la&nbsp;creaci\u00f3n de&nbsp;una fuente variable<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Si&nbsp;nuestros maestros son compatibles, todos estar\u00e1n resaltados en&nbsp;verde en&nbsp;el&nbsp;panel Layers. A&nbsp;veces es&nbsp;necesario ajustar manualmente los puntos de&nbsp;inicio y&nbsp;verificar las direcciones de&nbsp;los contornos, ya&nbsp;que su&nbsp;desajuste tambi\u00e9n puede causar distorsiones durante la&nbsp;interpolaci\u00f3n.<\/p>\n\n\n\n<p>En&nbsp;el&nbsp;caso de&nbsp;TT&nbsp;Interphases, necesitamos a\u00f1adir tres puntos a&nbsp;la&nbsp;letra \u00abM\u00bb en&nbsp;el&nbsp;estilo Black. Para ello, seleccionamos cada punto de&nbsp;forma secuencial y&nbsp;presionamos Ctrl+D, o&nbsp;hacemos clic derecho sobre el&nbsp;punto y&nbsp;seleccionamos \u00abDuplicate\u00bb. Despu\u00e9s de&nbsp;a\u00f1adir los puntos faltantes, presionamos \u00abMatch Masters\u00bb y&nbsp;verificamos la&nbsp;variabilidad en&nbsp;la&nbsp;capa Instance o&nbsp;en&nbsp;el&nbsp;panel Preview. <\/p>\n\n\n\n<p>Una vez que todas las configuraciones de&nbsp;verificaci\u00f3n est\u00e9n completas, podemos comenzar con tranquilidad el&nbsp;testeo de&nbsp;la&nbsp;fuente variable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/var.gif\" alt=\"\" class=\"wp-image-1000004446\"\/><figcaption class=\"wp-element-caption\"><strong><strong>Prueba del estilo variable TT&nbsp;Interphases Variable Roman<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Gracias por tomarse el&nbsp;tiempo para leer la&nbsp;historia de&nbsp;la&nbsp;creaci\u00f3n de&nbsp;la&nbsp;familia tipogr\u00e1fica <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT&nbsp;Interphases<\/a>. Nos esforzamos por contar de&nbsp;manera detallada el&nbsp;proceso interno de&nbsp;la&nbsp;estudio de&nbsp;tipograf\u00eda y&nbsp;mostrarles todas las etapas de&nbsp;la&nbsp;creaci\u00f3n de&nbsp;una familia tipogr\u00e1fica compleja.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/final.gif\" alt=\"\" class=\"wp-image-1000004447\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Equipo del proyecto TT&nbsp;Interphases<\/h2>\n\n\n\n<p>El\u00a0equipo que trabaj\u00f3 en\u00a0la\u00a0creaci\u00f3n de\u00a0la\u00a0familia tipogr\u00e1fica <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">TT\u00a0Interphases<\/a> estuvo compuesto por nueve personas, incluidos dise\u00f1adores de\u00a0fuentes, ingenieros de\u00a0fuentes y\u00a0gerentes. La\u00a0lista completa de\u00a0los participantes en\u00a0el\u00a0proyecto es\u00a0la\u00a0siguiente:<\/p>\n\n\n\n<p>Ivan Gladkikh&nbsp;\u2014 Jefe de&nbsp;proyecto;<br>Irina Tatarskaya&nbsp;\u2014 Gerente de&nbsp;proyecto;<br>Pavel Emelyanov&nbsp;\u2014 Director art\u00edstico, autor de&nbsp;la&nbsp;investigaci\u00f3n y&nbsp;el&nbsp;estilo base;<br>Marina Khodak&nbsp;\u2014 Dise\u00f1adora tipogr\u00e1fica senior, l\u00edder t\u00e9cnica del proyecto;<br>Ksenia Karataeva&nbsp;\u2014 Dise\u00f1adora tipogr\u00e1fica, autora de&nbsp;la&nbsp;subfamilia monoespaciada y&nbsp;la&nbsp;investigaci\u00f3n sobre iconos;<br>Nadezhda Polomoshnova&nbsp;\u2014 Dise\u00f1adora tipogr\u00e1fica, autora de&nbsp;los iconos;<br>Yuri Nakonechny&nbsp;\u2014 Ingeniero t\u00e9cnico, tester;Nadir Rakhimov&nbsp;\u2014 Dise\u00f1ador tipogr\u00e1fico, ingeniero t\u00e9cnico;<br>Viktor Rubenko&nbsp;\u2014 Ingeniero t\u00e9cnico, programador y&nbsp;especialista en&nbsp;hinting.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Enlaces \u00fatiles<\/h2>\n\n\n\n<p><a href=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/tt_interphases_specimen.pdf\" data-type=\"URL\" data-id=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/tt_interphases_specimen.pdf\"><\/a><a href=\"hhttps:\/\/typetype.org\/es\/wp-content\/uploads\/tt_interphases_pro_specimen.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Specimen<\/a>&nbsp;| <a href=\"https:\/\/www.behance.net\/gallery\/143016151\/TT-Interphases-Pro\"><\/a><a href=\"https:\/\/www.behance.net\/gallery\/221084509\/TT-Interphases-Pro\" target=\"_blank\" rel=\"noreferrer noopener\">Presentaci\u00f3n gr\u00e1fica del proyecto<\/a>&nbsp;| <a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\"><\/a><a href=\"https:\/\/typetype.org\/es\/fonts\/tt-interphases\/\">Comprar o&nbsp;probar la&nbsp;fuente<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comentarios<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Decidimos intentar informarle sobre la\u00a0creaci\u00f3n de\u00a0una compleja familia de\u00a0fuentes TT\u00a0Interphases en\u00a0la\u00a0fundici\u00f3n independiente de\u00a0fuentes. Esperamos que disfrute de\u00a0nuestra historia y\u00a0descubra algo interesante y\u00a0nuevo.<\/p>\n","protected":false},"author":1,"featured_media":10000050606,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[183,184],"class_list":["post-4387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-font-creation","tag-typetype-fonts"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/posts\/4387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/comments?post=4387"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/posts\/4387\/revisions"}],"predecessor-version":[{"id":47628,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/posts\/4387\/revisions\/47628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/media\/10000050606"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/media?parent=4387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/categories?post=4387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/tags?post=4387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}