{"id":5859,"date":"2021-06-25T15:34:09","date_gmt":"2021-06-25T12:34:09","guid":{"rendered":"https:\/\/typetype.org\/es\/?p=5859"},"modified":"2026-02-03T08:56:04","modified_gmt":"2026-02-03T05:56:04","slug":"variable-fonts-whats-new-in-them-for-designers","status":"publish","type":"post","link":"https:\/\/typetype.org\/es\/blog\/variable-fonts-whats-new-in-them-for-designers\/","title":{"rendered":"Fuentes variables: \u00bfqu\u00e9 son y c\u00f3mo usarlas?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/var_fonts.gif\" alt=\"\" class=\"wp-image-1000005860\"\/><\/figure>\n\n\n\n<p>En&nbsp;este art\u00edculo hablaremos sobre las <a href=\"https:\/\/typetype.org\/es\/blog\/variable-fonts-whats-new-in-them-for-designers\/\">fuentes variables<\/a>&nbsp;\u2014 una herramienta interesante y&nbsp;\u00fatil, aunque a&nbsp;menudo subestimada. Tambi\u00e9n mencionaremos sus inconvenientes y&nbsp;los matices que hay que tener en&nbsp;cuenta al&nbsp;trabajar con ellas.<\/p>\n\n\n\n<p>En&nbsp;el&nbsp;art\u00edculo trataremos los siguientes puntos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Historia de&nbsp;su&nbsp;aparici\u00f3n;<\/li>\n\n\n\n<li>Caracter\u00edsticas t\u00e9cnicas;<\/li>\n\n\n\n<li>Ventajas y&nbsp;desventajas;<\/li>\n\n\n\n<li>Particularidades de&nbsp;uso;<\/li>\n\n\n\n<li>Ejemplos de&nbsp;uso creativo.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Historia de&nbsp;su&nbsp;aparici\u00f3n<\/h2>\n\n\n\n<p>Para empezar, y&nbsp;ponerte en&nbsp;contexto, hablemos de&nbsp;la&nbsp;historia del desarrollo de&nbsp;las tecnolog\u00edas tipogr\u00e1ficas.<\/p>\n\n\n\n<p>En&nbsp;la&nbsp;segunda mitad de&nbsp;los a\u00f1os 80&nbsp;del siglo XX&nbsp;se presentaron los formatos PostScript, desarrollado por Adobe, y&nbsp;TrueType, creado por Apple, para la&nbsp;elaboraci\u00f3n de&nbsp;archivos tipogr\u00e1ficos. Ambos utilizaban curvas de&nbsp;B\u00e9zier para construir los signos. Estos formatos, en&nbsp;versiones actualizadas, siguen siendo los que usamos hoy en&nbsp;d\u00eda para trabajar con archivos de&nbsp;fuentes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-8.png\" alt=\"\" class=\"wp-image-1000005861\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8.png 3001w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-1024x328.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-768x246.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-1200x384.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-2048x655.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-8-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">A\u00f1os 80&nbsp;\u2014 PostScript (Adobe), TrueType (Apple)<\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;1991, Adobe present\u00f3 la&nbsp;tecnolog\u00eda Multiple Master como una extensi\u00f3n del formato PostScript, que permit\u00eda almacenar en&nbsp;un&nbsp;solo archivo tipogr\u00e1fico varias versiones del contorno para un&nbsp;mismo glifo. Estas versiones eran puntos extremos en&nbsp;un&nbsp;eje, entre los cuales se&nbsp;pod\u00edan generar valores intermedios, por ejemplo, modificando el&nbsp;peso o&nbsp;el&nbsp;ancho.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-9.png\" alt=\"\" class=\"wp-image-1000005862\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9.png 3001w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-768x245.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-1200x383.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-2048x654.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-9-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">1991&nbsp;\u2014 Multiple Master (Adobe)<\/figcaption><\/figure>\n\n\n\n<p>Para utilizar una fuente de&nbsp;este tipo, primero era necesario generar un&nbsp;estilo est\u00e1tico mediante un&nbsp;programa especial (Adobe Type Manager) y&nbsp;luego cargarlo en&nbsp;el&nbsp;sistema para poder usarlo en&nbsp;un&nbsp;editor gr\u00e1fico. Debido a&nbsp;su&nbsp;complejidad de&nbsp;uso, este formato nunca lleg\u00f3 a&nbsp;ser popular, y&nbsp;los dise\u00f1adores tipogr\u00e1ficos siguieron publicando estilos est\u00e1ticos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-10.png\" alt=\"\" class=\"wp-image-1000005863\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10.png 3001w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-768x245.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-1200x383.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-2048x654.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-10-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">Estilo est\u00e1tico<\/figcaption><\/figure>\n\n\n\n<p>En&nbsp;1997, Adobe y&nbsp;Microsoft presentaron conjuntamente la&nbsp;tecnolog\u00eda OpenType. Basada en&nbsp;el&nbsp;formato TrueType, permit\u00eda integrar una cantidad considerablemente mayor de&nbsp;caracteres (65&nbsp;000, frente al&nbsp;l\u00edmite anterior de&nbsp;256), as\u00ed como funciones OpenType, sin las cuales hoy no&nbsp;concebimos una fuente moderna. Nos referimos, por ejemplo, a&nbsp;la&nbsp;compatibilidad con versalitas, cifras tabulares, super\u00edndices, juegos estil\u00edsticos, alternativas contextuales, etc. El&nbsp;formato OpenType sigue siendo el&nbsp;m\u00e1s utilizado en&nbsp;la&nbsp;actualidad.<\/p>\n\n\n\n<p>Finalmente, en&nbsp;2016, Adobe, Apple, Google y&nbsp;Microsoft anunciaron una nueva versi\u00f3n del formato OpenType: OpenType Font Variables. Desde ese momento, los dise\u00f1adores tipogr\u00e1ficos tienen la&nbsp;posibilidad de&nbsp;incluir informaci\u00f3n sobre varios estilos de&nbsp;una familia tipogr\u00e1fica en&nbsp;un&nbsp;solo archivo. El&nbsp;concepto de&nbsp;este formato se&nbsp;asemeja al&nbsp;Multiple Master, con una diferencia fundamental: ya&nbsp;no&nbsp;es&nbsp;necesario generar de&nbsp;antemano los estilos est\u00e1ticos. Los par\u00e1metros pueden ajustarse directamente en&nbsp;el&nbsp;editor gr\u00e1fico.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-12.gif\" alt=\"\" class=\"wp-image-1000005864\"\/><figcaption class=\"wp-element-caption\">2016&nbsp;\u2014 OpenType Font Variables<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Caracter\u00edsticas t\u00e9cnicas<\/h2>\n\n\n\n<p>Deteng\u00e1monos con m\u00e1s detalle en&nbsp;qu\u00e9 diferencia este formato del OpenType cl\u00e1sico.<\/p>\n\n\n\n<p>Cuando un&nbsp;dise\u00f1ador adquiere una familia tipogr\u00e1fica, por ejemplo, una grotesca compuesta por 9&nbsp;grosores, obtiene 9&nbsp;archivos tipogr\u00e1ficos individuales. Estos estilos fueron preparados de&nbsp;antemano por el&nbsp;dise\u00f1ador tipogr\u00e1fico, y&nbsp;la&nbsp;distribuci\u00f3n de&nbsp;pesos fue calculada para que las transiciones fueran uniformes desde el&nbsp;m\u00e1s fino hasta el&nbsp;m\u00e1s grueso.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-13.png\" alt=\"\" class=\"wp-image-1000005865\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13.png 3001w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-768x245.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-1200x383.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-2048x654.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-13-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/es\/fonts\/tt-norms-pro\/\">TT\u00a0Norms Pro<\/a><\/figcaption><\/figure>\n\n\n\n<p>Una fuente <a href=\"https:\/\/typetype.org\/es\/fonts\/variable\/\">variable<\/a>, en&nbsp;cambio, es&nbsp;un&nbsp;\u00fanico archivo, y&nbsp;el&nbsp;rango de&nbsp;estilos est\u00e1 limitado \u00fanicamente por el&nbsp;grosor m\u00e1s fino y&nbsp;el&nbsp;m\u00e1s grueso. El&nbsp;dise\u00f1ador puede seleccionar libremente cualquier punto intermedio que desee dentro de&nbsp;ese rango.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-14.gif\" alt=\"\" class=\"wp-image-1000005866\"\/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/es\/fonts\/tt-norms-pro\/\">TT\u00a0Norms Pro<\/a> Variable<\/figcaption><\/figure>\n\n\n\n<p>Si&nbsp;observamos el&nbsp;interior de&nbsp;la&nbsp;fuente, veremos que cada glifo tiene puntos de&nbsp;control sobre los cuales se&nbsp;construye. Si&nbsp;el&nbsp;n\u00famero de&nbsp;esos puntos coincide en&nbsp;los estilos m\u00e1s fino y&nbsp;m\u00e1s grueso, el&nbsp;programa puede conectar esos puntos y&nbsp;calcular posiciones intermedias. Por supuesto, el&nbsp;desarrollo de&nbsp;una fuente no&nbsp;es&nbsp;tan simple ni&nbsp;lineal, y&nbsp;muchas veces necesitamos definir m\u00e1s de&nbsp;dos estilos base, pero esto no&nbsp;afecta en&nbsp;nada la&nbsp;experiencia del usuario final.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-15.png\" alt=\"\" class=\"wp-image-1000005867\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15.png 3000w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-768x246.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-1200x384.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-2048x655.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-15-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\">Estilos base<\/figcaption><\/figure>\n\n\n\n<p>El&nbsp;rango entre los dos estilos extremos se&nbsp;denomina eje. En&nbsp;los editores gr\u00e1ficos, como los de&nbsp;Adobe, aparece como una l\u00ednea con un&nbsp;control deslizante que se&nbsp;puede mover para ajustar el&nbsp;valor deseado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-16.gif\" alt=\"\" class=\"wp-image-1000005868\"\/><figcaption class=\"wp-element-caption\">Control deslizante en&nbsp;el&nbsp;editor gr\u00e1fico<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Ejes de&nbsp;variabilidad disponibles:<\/h4>\n\n\n\n<p><strong>El&nbsp;primer eje<\/strong>&nbsp;\u2014 es&nbsp;el&nbsp;ya&nbsp;mencionado eje de&nbsp;peso. En&nbsp;la&nbsp;mayor\u00eda de&nbsp;las familias tipogr\u00e1ficas existen varios estilos seg\u00fan el&nbsp;grosor, y&nbsp;en&nbsp;teor\u00eda todos ellos podr\u00edan ser variables.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-17.gif\" alt=\"\" class=\"wp-image-1000005869\"\/><figcaption class=\"wp-element-caption\">Eje de&nbsp;peso (Weight axis)<\/figcaption><\/figure>\n\n\n\n<p>Imaginemos que compraste una familia tipogr\u00e1fica tradicional y&nbsp;planeas usarla para maquetar un&nbsp;libro o&nbsp;un&nbsp;sitio web con mucho texto. Sabes cu\u00e1l deber\u00eda ser el&nbsp;grosor del texto principal para que la&nbsp;lectura sea c\u00f3moda, pero te&nbsp;enfrentas a&nbsp;un&nbsp;problema: el&nbsp;estilo Regular te&nbsp;parece demasiado ligero, y&nbsp;el&nbsp;siguiente, por ejemplo Medium, demasiado grueso. La&nbsp;opci\u00f3n ideal ser\u00eda un&nbsp;grosor intermedio, pero no&nbsp;existe. Si&nbsp;esta fuente fuera variable, bastar\u00eda con mover el&nbsp;control deslizante en&nbsp;el&nbsp;editor gr\u00e1fico o&nbsp;definir un&nbsp;valor intermedio en&nbsp;CSS para obtener exactamente el&nbsp;peso deseado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-18-1-1.png\" alt=\"\" class=\"wp-image-1000005874\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1.png 3001w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-768x245.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-1200x383.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-2048x654.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1-1-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">B\u00fasqueda del peso tipogr\u00e1fico \u00f3ptimo<\/figcaption><\/figure>\n\n\n\n<p><strong>El&nbsp;siguiente eje bastante com\u00fan<\/strong> es&nbsp;el&nbsp;de&nbsp;ancho. En&nbsp;familias est\u00e1ticas sueles tener varias opciones de&nbsp;anchura, como Normal, Condensed o&nbsp;Extended. En&nbsp;una fuente variable puedes ajustar manualmente la&nbsp;anchura entre el&nbsp;estilo m\u00e1s estrecho y&nbsp;el&nbsp;m\u00e1s ancho.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-19.gif\" alt=\"\" class=\"wp-image-1000005871\"\/><figcaption class=\"wp-element-caption\">Eje de&nbsp;anchura (Width axis)<\/figcaption><\/figure>\n\n\n\n<p>Esta opci\u00f3n puede ser \u00fatil, por ejemplo, al&nbsp;maquetar texto en&nbsp;columnas estrechas, donde necesitas encajar la&nbsp;mayor cantidad de&nbsp;contenido posible. El&nbsp;ancho normal puede ser demasiado grande para esa funci\u00f3n, pero el&nbsp;estrecho puede dificultar la&nbsp;lectura de&nbsp;bloques largos. Una fuente variable te&nbsp;permite hacer el&nbsp;estilo un&nbsp;poco m\u00e1s estrecho sin perder legibilidad.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-18.png\" alt=\"\" class=\"wp-image-1000005870\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18.png 3001w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-768x245.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1200x383.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-2048x654.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-18-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">B\u00fasqueda del ancho tipogr\u00e1fico \u00f3ptimo<\/figcaption><\/figure>\n\n\n\n<p><strong>El tercer eje<\/strong> es el de inclinaci\u00f3n. Este se aplica cuando las letras en estilo cursivo tienen la misma estructura que las rectas. Este tipo de aplicaci\u00f3n suele encontrarse sobre todo en fuentes grotescas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-22.gif\" alt=\"\" class=\"wp-image-1000005875\"\/><figcaption class=\"wp-element-caption\">Eje de inclinaci\u00f3n (Slant axis)<\/figcaption><\/figure>\n\n\n\n<p>Puedes ajustar t\u00fa mismo el \u00e1ngulo de inclinaci\u00f3n de la fuente, lo que permite controlar cu\u00e1nto destaca el estilo dentro de un bloque de texto. Esta opci\u00f3n es \u00fatil cuando necesitas utilizar cursiva en grandes vol\u00famenes de texto sin comprometer la comodidad de lectura.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-23.png\" alt=\"\" class=\"wp-image-1000005877\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23.png 3001w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-768x245.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-1200x383.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-2048x654.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-23-300x96.png 300w\" sizes=\"(max-width: 3001px) 100vw, 3001px\" \/><figcaption class=\"wp-element-caption\">B\u00fasqueda de la inclinaci\u00f3n tipogr\u00e1fica \u00f3ptima<\/figcaption><\/figure>\n\n\n\n<p>Y por \u00faltimo, otro eje menos com\u00fan pero tambi\u00e9n contemplado en el formato OTF Var: <strong>el eje de<\/strong> <strong>tama\u00f1o \u00f3ptico<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-24.png\" alt=\"\" class=\"wp-image-1000005878\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24.png 3000w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-768x246.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-1200x384.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-2048x655.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-24-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/es\/fonts\/tt-fors\/\">TT Fors<\/a> Display<\/figcaption><\/figure>\n\n\n\n<p>Quiz\u00e1s hayas visto subfamilias como Display y Text en algunas fuentes variables. Las Display suelen tener mayor contraste, detalles m\u00e1s finos y un espaciado m\u00e1s estrecho. Se utilizan para t\u00edtulos, carteles y cualquier aplicaci\u00f3n en la que el texto aparezca en gran tama\u00f1o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-25.png\" alt=\"\" class=\"wp-image-1000005879\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25.png 3000w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-768x246.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-1200x384.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-2048x655.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-25-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/es\/fonts\/tt-fors\/\">TT Fors<\/a> Display<\/figcaption><\/figure>\n\n\n\n<p>La subfamilia Text, en cambio, tiene menos contraste y detalles m\u00e1s robustos. Est\u00e1 pensada para mantener la legibilidad en tama\u00f1os peque\u00f1os y en bloques extensos de texto.<\/p>\n\n\n\n<p>En una fuente variable, puedes generar un estilo intermedio que siga siendo legible a tama\u00f1os reducidos, pero que resulte m\u00e1s refinado que una versi\u00f3n est\u00e1ndar de texto. Este punto intermedio es ideal, por ejemplo, para subt\u00edtulos peque\u00f1os.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-26.png\" alt=\"\" class=\"wp-image-1000005880\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26.png 3000w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-768x246.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-1200x384.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-1536x491.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-2048x655.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-26-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/es\/fonts\/tt-fors\/\">TT Fors<\/a> Text<\/figcaption><\/figure>\n\n\n\n<p>Hemos descrito los ejes que ya han sido definidos por los desarrolladores del formato. Cada uno de ellos cuenta con una abreviatura espec\u00edfica:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wght \u2014 peso<\/li>\n\n\n\n<li>wdth \u2014 anchura<\/li>\n\n\n\n<li>slnt \u2014 \u00e1ngulo de inclinaci\u00f3n<\/li>\n\n\n\n<li>ital \u2014 cursividad<\/li>\n\n\n\n<li>opsz \u2014 tama\u00f1o \u00f3ptico<\/li>\n<\/ul>\n\n\n\n<p>Sin embargo, los dise\u00f1adores tipogr\u00e1ficos pueden idear e implementar sus propios ejes de variabilidad.<\/p>\n\n\n\n<p>Existen ejemplos ya desarrollados donde pueden modificarse la longitud de las serifas, la altura de las min\u00fasculas o may\u00fasculas, la altura de los rasgos ascendentes o descendentes, el contraste, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-28.gif\" alt=\"\" class=\"wp-image-1000005881\"\/><figcaption class=\"wp-element-caption\">Recurso: <a href=\"https:\/\/www.axis-praxis.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis.org<\/a><\/figcaption><\/figure>\n\n\n\n<p>Y por supuesto, una fuente tambi\u00e9n puede transformarse con fines decorativos. Aqu\u00ed, el \u00fanico l\u00edmite es la imaginaci\u00f3n del autor.<\/p>\n\n\n\n<p>Ahora imagina esto: un solo eje puede ofrecer miles de variantes de una misma fuente. Si hay dos ejes, ya hablamos de un mill\u00f3n. Y con ejes personalizados, las posibilidades se vuelven pr\u00e1cticamente infinitas.<\/p>\n\n\n\n<p>En resumen, con las fuentes variables es posible resolver pr\u00e1cticamente cualquier tarea tipogr\u00e1fica.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ventajas y desventajas de las fuentes variables<\/h2>\n\n\n\n<p>Ahora hablemos de algunos problemas que encontramos al usar fuentes <a href=\"https:\/\/typetype.org\/es\/fonts\/variable\/\">variables<\/a> y de formas interesantes de aprovecharlas.<\/p>\n\n\n\n<p>Cabe se\u00f1alar que la tecnolog\u00eda de fuentes variables existe desde hace muchos a\u00f1os. Aunque las herramientas de edici\u00f3n tipogr\u00e1fica han avanzado considerablemente y hoy es cada vez m\u00e1s f\u00e1cil crear este tipo de fuentes, a\u00fan no han ganado popularidad ni uso masivo. Esto puede indicar que:&nbsp; no existe a\u00fan un campo de aplicaci\u00f3n suficientemente claro, el producto todav\u00eda no responde a las exigencias del mercado, o bien que las herramientas no permiten utilizarlas c\u00f3modamente. Actualmente, no todos los editores gr\u00e1ficos ni navegadores web admiten fuentes variables. Por ejemplo, no todos los navegadores son compatibles con aplicaciones de dise\u00f1o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-31-33.1.png\" alt=\"\" class=\"wp-image-1000005883\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1.png 1440w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-1024x327.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-768x245.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-1200x383.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.1-300x96.png 300w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><figcaption class=\"wp-element-caption\">Recurso: <a href=\"https:\/\/v-fonts.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-31-33.2.png\" alt=\"\" class=\"wp-image-1000005884\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2.png 3000w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-1024x328.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-768x246.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-1200x384.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-1536x492.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-2048x655.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-31-33.2-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\">Recurso: <a href=\"https:\/\/v-fonts.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a><\/figcaption><\/figure>\n\n\n\n<p>La mayor desventaja de las fuentes variables es su baja calidad. La gran mayor\u00eda se produce de forma mediocre y, como resultado, pueden comportarse de manera impredecible en el momento menos oportuno.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-34.gif\" alt=\"\" class=\"wp-image-1000005885\"\/><figcaption class=\"wp-element-caption\">Ejemplo de fuente variable de baja calidad<\/figcaption><\/figure>\n\n\n\n<p>Otro ejemplo. Si tu sitio web recibe 1 000 000 de visitas al d\u00eda y usas toda la familia Norms Pro con todos sus estilos, el total de archivos ocupa 5306 kilobytes. Si en su lugar utilizas una versi\u00f3n variable de esta misma familia, solo ocupar\u00e1 1875 kilobytes. Observa la tabla a continuaci\u00f3n: podemos ver que con tal volumen de visitas, se genera una diferencia de 3272 GB en datos transferidos desde el servidor. Es evidente que, para una sola visita, la diferencia es insignificante, pero en conjunto adquiere relevancia.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-35-35.png\" alt=\"\" class=\"wp-image-1000005886\" srcset=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35.png 3000w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-1024x328.png 1024w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-420x134.png 420w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-768x246.png 768w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-1200x384.png 1200w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-1536x492.png 1536w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-2048x655.png 2048w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-600x192.png 600w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-944x302.png 944w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-80x26.png 80w, https:\/\/typetype.org\/es\/wp-content\/uploads\/slajd-35-35-300x96.png 300w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><figcaption class=\"wp-element-caption\">Diferencia entre estilos est\u00e1ticos y variables<\/figcaption><\/figure>\n\n\n\n<p>Tambi\u00e9n es importante se\u00f1alar que la mayor\u00eda de las fuentes variables no est\u00e1n \u201chintingeadas\u201d (no tienen hinting). Este es un proceso complejo que requiere formaci\u00f3n, y como resultado, las fuentes variables no siempre se renderizan correctamente en tama\u00f1os peque\u00f1os.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-37.mp4\"><\/video><figcaption class=\"wp-element-caption\">Hinting de una fuente variable<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo usar fuentes variables<\/h2>\n\n\n\n<p>Ahora te explicamos c\u00f3mo utilizar fuentes <a href=\"https:\/\/typetype.org\/es\/fonts\/variable\/\">variables<\/a> en tu trabajo.<\/p>\n\n\n\n<p>Empecemos con Adobe Illustrator. Por ejemplo, escribes un texto y deseas aplicarle una fuente variable que ya tengas instalada. En la lista general, estas fuentes est\u00e1n marcadas con una etiqueta especial: \u201cvar\u201d. Por cierto, Adobe incluye sus propias fuentes variables en las versiones m\u00e1s recientes de sus programas, as\u00ed que puedes empezar a experimentar con ellas.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-39.mp4\"><\/video><figcaption class=\"wp-element-caption\">Selecci\u00f3n de una fuente variable en Adobe Illustrator<\/figcaption><\/figure>\n\n\n\n<p>Cuando eliges una fuente variable, en el panel Character aparece un bot\u00f3n adicional llamado Variable Font. Ah\u00ed se encuentran todos los ejes de variabilidad que tenga la fuente, y sus valores se pueden ajustar con controles deslizantes. El resultado se ve de inmediato. El resto de opciones del panel permanecen iguales.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-40.mp4\"><\/video><figcaption class=\"wp-element-caption\">Ejes de variabilidad en el panel Character<\/figcaption><\/figure>\n\n\n\n<p>Tambi\u00e9n puedes seleccionar uno de los estilos predefinidos de la lista y usar la familia como si fuera est\u00e1tica.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-41.mp4\"><\/video><figcaption class=\"wp-element-caption\">Fuente variable como estilo est\u00e1tico<\/figcaption><\/figure>\n\n\n\n<p>En Sketch el principio es exactamente el mismo, solo que estas fuentes no llevan ninguna indicaci\u00f3n especial.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-42.mp4\"><\/video><figcaption class=\"wp-element-caption\">Selecci\u00f3n de fuente variable en Sketch<\/figcaption><\/figure>\n\n\n\n<p>Tambi\u00e9n puedes integrar fuentes variables en la web mediante CSS. No entraremos en detalles aqu\u00ed. Pero puedes ver ejemplos de c\u00f3mo se integran las fuentes variables en sitios web:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-44.mp4\"><\/video><figcaption class=\"wp-element-caption\">Transiciones CSS<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-45.mp4\"><\/video><figcaption class=\"wp-element-caption\">Animaci\u00f3n CSS<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-46.mp4\"><\/video><figcaption class=\"wp-element-caption\">Animaci\u00f3n de cada glifo por separado<\/figcaption><\/figure>\n\n\n\n<p>Puedes profundizar en el uso de fuentes variables en la web con los art\u00edculos de Richard Rutter en medium.com:<\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@clagnut\/get-started-with-variable-fonts-c055fd73ecd7\" target=\"_blank\" rel=\"noreferrer noopener\">Get started with variable fonts<\/a> \u2014 una introducci\u00f3n breve pero muy \u00fatil<br><a href=\"https:\/\/clearleft.com\/posts\/how-to-use-variable-fonts-in-the-real-world\" target=\"_blank\" rel=\"noreferrer noopener\">How to use variable fonts in the real world<\/a> \u2014 una descripci\u00f3n de los posibles problemas y c\u00f3mo resolverlos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ejemplos creativos de uso<\/h2>\n\n\n\n<p>Aqu\u00ed te mostramos algunos ejemplos creativos que demuestran c\u00f3mo se pueden utilizar las fuentes <a href=\"https:\/\/typetype.org\/es\/fonts\/variable\/\">variables<\/a> con un poco de imaginaci\u00f3n.<\/p>\n\n\n\n<p>Ejemplos donde el texto se estira din\u00e1micamente seg\u00fan los bordes del contenedor<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-21.mp4\"><\/video><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/vimeo.com\/303531520\" target=\"_blank\" rel=\"noreferrer noopener\">Recurso<\/a><\/figcaption><\/figure>\n\n\n\n<p>Ejemplo interesante de uso de fuentes variables en realidad aumentada<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-49.mp4\"><\/video><figcaption class=\"wp-element-caption\">Recurso: <a href=\"https:\/\/vimeo.com\/303531635\" target=\"_blank\" rel=\"noreferrer noopener\">Variable fonts in AR<\/a><\/figcaption><\/figure>\n\n\n\n<p>Ejemplo de una fuente que cambia dependiendo de la distancia desde la que se visualiza<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-50.mp4\"><\/video><figcaption class=\"wp-element-caption\">Recurso: <a href=\"https:\/\/vimeo.com\/178954414\" target=\"_blank\" rel=\"noreferrer noopener\">Distance Based Interpolation<\/a><\/figcaption><\/figure>\n\n\n\n<p>Ejemplos de c\u00f3mo ajustar el peso de la fuente en funci\u00f3n de las condiciones de lectura, por ejemplo la iluminaci\u00f3n<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/typetype.org\/es\/wp-content\/uploads\/sites\/11\/slajd-51.mp4\"><\/video><figcaption class=\"wp-element-caption\">Recurso: <a href=\"https:\/\/blog.prototypr.io\/an-exploration-of-variable-fonts-37f85a91a048\" target=\"_blank\" rel=\"noreferrer noopener\">Variable font in different reading conditions<\/a><\/figcaption><\/figure>\n\n\n\n<p>Incluso se puede ir m\u00e1s all\u00e1 y crear im\u00e1genes en movimiento a partir de una fuente, como propone el sitio <a href=\"https:\/\/www.axis-praxis.org\/playground\/horse\/\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis<\/a>. Es posible, adem\u00e1s, darles color superponiendo varias letras, como se muestra en los experimentos de <a href=\"https:\/\/www.axis-praxis.org\/playground\/horse\/\" target=\"_blank\" rel=\"noreferrer noopener\">Toshi Omagari<\/a>. Aunque claro, esto ya no ser\u00eda un uso tipogr\u00e1fico en el sentido tradicional.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/typetype.org\/wp-content\/uploads\/slajd-52-53.gif\" alt=\"\" class=\"wp-image-1000005902\"\/><figcaption class=\"wp-element-caption\">Im\u00e1genes en movimiento<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Recursos \u00fatiles<\/h2>\n\n\n\n<p>Queremos recomendarte algunos recursos donde puedes probar y experimentar con fuentes <a href=\"https:\/\/typetype.org\/es\/fonts\/variable\/\">variables<\/a>.<\/p>\n\n\n\n<p>En primer lugar, est\u00e1 <a href=\"https:\/\/www.axis-praxis.org\/specimens\/__DEFAULT__\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis.org<\/a>, donde se re\u00fane una gran cantidad de fuentes variables. Tambi\u00e9n puedes subir tus propias fuentes y probarlas all\u00ed.<\/p>\n\n\n\n<p>En segundo lugar, <a href=\"https:\/\/v-fonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a>, donde igualmente puedes experimentar con distintas fuentes en una versi\u00f3n simplificada.<\/p>\n\n\n\n<p>Y por \u00faltimo, un sitio excelente que usamos activamente en nuestro trabajo para probar fuentes variables: <a href=\"https:\/\/dinamodarkroom.com\/gauntlet\/\" target=\"_blank\" rel=\"noreferrer noopener\">dinamodarkroom.com<\/a>, del estudio Dinamo. En este sitio no solo puedes testear los ejes de variabilidad, sino tambi\u00e9n las funciones OpenType, e incluso exportar versiones est\u00e1ticas con par\u00e1metros personalizados.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p>Las fuentes <a href=\"https:\/\/typetype.org\/es\/fonts\/variable\/\">variables<\/a> tienen el potencial de convertirse en una parte fundamental del mundo tipogr\u00e1fico. En los \u00faltimos a\u00f1os, se ha hablado mucho de ellas, aunque todav\u00eda no se han masificado. Hoy en d\u00eda ya son una herramienta eficaz para resolver una serie de tareas espec\u00edficas.<\/p>\n\n\n\n<p>Cabe destacar que el n\u00famero de fuentes variables sigue creciendo, y cada vez m\u00e1s editores gr\u00e1ficos y de v\u00eddeo comienzan a ofrecer compatibilidad con este formato. \u00a1Las fuentes variables conquistar\u00e1n el mundo! \u00a1Es solo cuesti\u00f3n de tiempo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En\u00a0este art\u00edculo hablaremos sobre las fuentes variables\u00a0\u2014 una herramienta interesante y\u00a0\u00fatil, aunque a\u00a0menudo subestimada. Tambi\u00e9n mencionaremos sus inconvenientes y\u00a0los matices que hay que tener en\u00a0cuenta al\u00a0trabajar con ellas.<\/p>\n","protected":false},"author":1,"featured_media":1000005860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[188],"class_list":["post-5859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-work-with-fonts"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/posts\/5859","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=5859"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/posts\/5859\/revisions"}],"predecessor-version":[{"id":47630,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/posts\/5859\/revisions\/47630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/media\/1000005860"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/media?parent=5859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/categories?post=5859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/es\/wp-json\/wp\/v2\/tags?post=5859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}