{"id":14933,"date":"2020-12-09T13:31:09","date_gmt":"2020-12-09T11:31:09","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=14933"},"modified":"2021-01-29T15:03:27","modified_gmt":"2021-01-29T13:03:27","slug":"tipografia-para-interactivos","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/tipografia-para-interactivos\/","title":{"rendered":"Tipograf\u00eda para interactivos"},"content":{"rendered":"<h2><strong>Introducci\u00f3n<\/strong><\/h2>\n<p>El <strong>texto<\/strong> es el material b\u00e1sico con el que se construye el contenido de las p\u00e1ginas. La aplicaci\u00f3n de tipograf\u00eda en pantalla tiene unas caracter\u00edsticas particulares, que la diferencian de su tratamiento en entornos tradicionales. Al dise\u00f1ar una interfaz resulta fundamental favorecer la legibilidad del texto, un factor cr\u00edtico debido a la menor resoluci\u00f3n, en comparaci\u00f3n con el medio impreso, de los soportes digitales.<\/p>\n<p>A continuaci\u00f3n, se describen los factores m\u00e1s importantes para el tratamiento de texto en aplicaciones interactivas.<\/p>\n<h2><strong>Formatos de tipograf\u00eda para pantalla<\/strong><\/h2>\n<p>En tipograf\u00eda para pantalla es importante tener en cuenta el entorno en el que se trabaja, para elegir el formato m\u00e1s adecuado:<\/p>\n<ul>\n<li>En <strong>web<\/strong>, el usuario ver\u00e1 la fuente que tenga disponible en su equipo: si el dise\u00f1ador utiliza una fuente especial, el usuario la ver\u00e1 sustituida por la que tenga disponible en su equipo.<\/li>\n<li>En <strong><em>apps<\/em><\/strong> y otros <strong>formatos cerrados<\/strong> (PDF, etc.), el dise\u00f1ador puede integrar cualquier fuente, porque puede incrustarlas de manera que cualquier usuario la vea correctamente, disponga o no de ella en su equipo.<\/li>\n<\/ul>\n<p>Teniendo en cuenta estos preliminares, veamos cu\u00e1les son los formatos con los que puede trabajarse el texto en interactivos.<\/p>\n<h3><strong>Fuentes del sistema (<em>safe web fonts<\/em>)<\/strong><\/h3>\n<p>Corresponde a las fuentes disponibles en todos los dispositivos en general, y que vienen instaladas por defecto en los equipos inform\u00e1ticos.<\/p>\n<p>Puesto que existen algunas diferencias entre sistemas operativos (entre Windows y Mac, por ejemplo), la propiedad CSS <strong>font-family<\/strong> permite definir combinaciones de fuentes, de manera que si el usuario no dispone de la primera, la fuente se sustituye por la segunda de la lista.<\/p>\n<p>Por ejemplo, una combinaci\u00f3n<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-81 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_13.jpg\" alt=\"\" width=\"350\" height=\"17\" \/><\/p>\n<p>implica que dise\u00f1amos la p\u00e1gina con texto en Arial, pero si el usuario no dispone de ella la ver\u00e1 sustituida por una Helvetica y en \u00faltima instancia por una Sans-serif.<\/p>\n<p>Las <a href=\"https:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.asp\" target=\"_blank\" rel=\"noopener noreferrer\">combinaciones m\u00e1s utilizadas<\/a> son las siguientes:<\/p>\n<p><strong>Serif<\/strong><\/p>\n<p>Georgia, serif<br \/>\n\u00abPalatino Linotype\u00bb, \u00abBook Antiqua\u00bb, Palatino, serif<br \/>\n\u00abTimes New Roman\u00bb, Times, serif<\/p>\n<p><strong>Sans-Serif<\/strong><\/p>\n<p>Arial, Helvetica, sans-serif<br \/>\n\u00abArial Black\u00bb, Gadget, sans-serif<br \/>\n\u00abComic Sans MS\u00bb, cursive, sans-serif<br \/>\nImpact, Charcoal, sans-serif<br \/>\n\u00abLucida Sans Unicode\u00bb, \u00abLucida Grande\u00bb, sans-serif<br \/>\nTahoma, Geneva, sans-serif<br \/>\n\u00abTrebuchet MS\u00bb, Helvetica, sans-serif<br \/>\nVerdana, Geneva, sans-serif<\/p>\n<p><strong>Monospace<\/strong><\/p>\n<p>\u00abCourier New\u00bb, Courier, monospace<br \/>\n\u00abLucida Console\u00bb, Monaco, monospace<\/p>\n<h3><strong><em>Webfonts<\/em><\/strong><\/h3>\n<p>Desde el 2010, los navegadores soportan el formato de fuente <strong>WOFF<\/strong> (<em>web open font format<\/em>) o <strong>WOFF2<\/strong> (versi\u00f3n optimizada). Esto implica que los dise\u00f1adores pueden utilizar una amplia variedad de fuentes, m\u00e1s all\u00e1 de las <em>web safe fonts<\/em>.<\/p>\n<p>Las <em>webfonts<\/em> no tienen por qu\u00e9 estar instaladas en el equipo del usuario, ya que el navegador accede a ellas y las carga a trav\u00e9s del servidor en el que est\u00e1n alojadas. De esta manera, el dise\u00f1ador se asegura de que cualquier usuario pueda ver el dise\u00f1o de la p\u00e1gina que ha previsto, sin depender de las fuentes que este tenga instaladas en su ordenador.<\/p>\n<p>En CSS la llamada a la <em>webfont<\/em> se realiza mediante <strong>@fontface<\/strong>. El siguiente c\u00f3digo, por ejemplo, carga la fuente desde su ubicaci\u00f3n https y despu\u00e9s declara el estilo <em>body<\/em>:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-82 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_14.jpg\" alt=\"\" width=\"550\" height=\"170\" \/><\/p>\n<p>En cuanto a la licencia, las <em>webfonts<\/em> pueden ser gratuitas o de pago. Esta no es una cuesti\u00f3n menor, puesto que el coste de la licencia puede ser notable. Para algunas fuentes, la licencia se compra una vez (cuando se compra), pero en otros casos el coste est\u00e1 asociado al n\u00famero de visitas a la web en la que se utiliza. Esto implica que si una web tiene muchas visitas, habr\u00e1 que contar con un coste continuo asociado al pago de la <em>webfont<\/em>.<\/p>\n<p>No obstante, existen muchas <em>webfonts<\/em> gratuitas que los dise\u00f1adores pueden utilizar libremente, ya que tienen licencia abierta. El repositorio m\u00e1s grande es <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a>, aunque existen otros sitios que contienen algunas fuentes gratuitas, como por ejemplo <a href=\"https:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">FontSquirrel<\/a>.<\/p>\n<h3><strong>Texto como imagen<\/strong><\/h3>\n<p>Es la opci\u00f3n m\u00e1s desaconsejable, que se recomienda evitar siempre que sea posible.<\/p>\n<p>El texto como imagen implica que el texto se ha preparado desde una herramienta de edici\u00f3n de im\u00e1genes (por ejemplo, Photoshop), y que se integra como bitmap (.png, .gif, .jpg, etc.).<\/p>\n<p>Este formato tiene m\u00e1s desventajas que ventajas: incrementa notablemente el tiempo de descarga de la p\u00e1gina y comporta problemas de accesibilidad (el usuario no puede aumentar o disminuir su tama\u00f1o y no es accesible desde un lector de pantalla).<\/p>\n<p>Se trata de un formato reservado para casos muy especiales, en los que se requiere que el texto tenga alg\u00fan efecto gr\u00e1fico especial que no se puede conseguir a trav\u00e9s del estilo.<\/p>\n<h2><strong>Composici\u00f3n de texto para pantalla<\/strong><\/h2>\n<p>Aunque siempre hay que tener en cuenta las normas generales de tipograf\u00eda, existen pautas espec\u00edficas para la composici\u00f3n de texto en pantalla.<\/p>\n<h3><strong>Legibilidad<\/strong><\/h3>\n<p>El primer paso para conseguir que el texto en pantalla sea legible, consiste en elegir una fuente que favorezca la legibilidad. Los factores que contribuyen a ello son:<\/p>\n<ul>\n<li>Que tenga una buena altura X.<\/li>\n<li>Que los blancos internos sean bien visibles.<\/li>\n<li>Ascendentes y descendentes prominentes.<\/li>\n<\/ul>\n<h3><strong>Tama\u00f1o del texto<\/strong><\/h3>\n<p>Si el texto es muy peque\u00f1o, es menos legible porque la forma de las letras no puede distinguirse con facilidad, y la velocidad de lectura se reduce. Si el texto es demasiado grande, se hace dif\u00edcil seguir el hilo, y adem\u00e1s pueden existir problemas para alojar el contenido en el espacio disponible.<\/p>\n<p>Teniendo en cuenta la resoluci\u00f3n de las pantallas actuales y la diversidad de dispositivos, en general se recomienda trabajar a un tama\u00f1o para el texto base (<em>body<\/em>) alrededor de 14 o 16 px, aunque siempre hay que comprobar los resultados seg\u00fan el tipo de letra que se haya elegido.<\/p>\n<h3><strong>Alineaci\u00f3n<\/strong><\/h3>\n<p>Aunque el texto justificado acent\u00faa la legibilidad en papel, en entorno digital suele evitarse ya que las condiciones de visualizaci\u00f3n pueden ser muy diversas, y por lo tanto resulta muy dif\u00edcil controlar el espacio entre palabras.<\/p>\n<p>Por su parte, las alineaciones a la derecha y centradas dificultan la lectura y se reservan para textos breves. La centrada, por ejemplo, se utiliza t\u00edpicamente para textos cortos a gran tama\u00f1o que introduzcan conceptos o ideas clave.<\/p>\n<p>Para textos extensos, la alineaci\u00f3n m\u00e1s recomendable en entorno digital es la alineada a la izquierda. Cada l\u00ednea empieza en el mismo punto, lo que hace que la lectura y el escaneado visual r\u00e1pido resulten f\u00e1ciles.<\/p>\n<h3><strong>Interlineado<\/strong><\/h3>\n<p>El interlineado influye fundamentalmente en dos aspectos del texto:<\/p>\n<ul>\n<li><strong>Densidad visual<\/strong>: con un interlineado escaso el texto se ve denso; con uno amplio, adquiere ligereza.<\/li>\n<li><strong>Legibilidad<\/strong>: las l\u00edneas demasiado juntas se confunden; las demasiado separadas dificultan una lectura continua.<\/li>\n<\/ul>\n<p>En pantalla, los par\u00e1metros \u00f3ptimos de interlineado son diferentes a los que se utilizan en soporte papel. En general, el interlineado ideal se sit\u00faa alrededor del 150 % del tama\u00f1o del texto, aunque debe ajustarse seg\u00fan el tipo de letra, su tama\u00f1o, la cantidad de contenido\u2026<\/p>\n<h3><strong>Longitud de l\u00ednea<\/strong><\/h3>\n<p>En pantalla, los usuarios suelen escanear el texto para realizar una lectura r\u00e1pida. Si las l\u00edneas son muy largas, el ritmo se hace mucho m\u00e1s lento y resulta m\u00e1s dif\u00edcil identificar el inicio de la siguiente l\u00ednea. Si son demasiado cortas, rompen el ritmo de las frases y generan un aspecto visual de margen demasiado irregular, en el lado en el que el texto no se encuentre alineado.<\/p>\n<p>En general, una anchura de entre 45 y 75 caracteres (incluyendo signos de puntuaci\u00f3n y espacios) es adecuada, aunque como en el caso del interlineado, deber\u00e1 ajustarse comprobando visualmente el resultado seg\u00fan el tipo de letra y el tama\u00f1o elegido.<\/p>\n<h2><strong>Estilo<\/strong><\/h2>\n<p>Adem\u00e1s de los aspectos b\u00e1sicos de la composici\u00f3n, para trabajar el texto en pantalla hay que tener en cuenta tambi\u00e9n unos criterios de estilo.<\/p>\n<h3><strong>Jerarqu\u00eda<\/strong><\/h3>\n<p>Los textos complejos tienen que subdividirse, para que el usuario no se sienta abrumado por la obligaci\u00f3n de tener que leer un contenido denso y demasiado extenso.<\/p>\n<p>Para ello se utiliza la jerarqu\u00eda, que establece estilos de texto distintos seg\u00fan el nivel de importancia que tenga. En HTML, el estilo H1 es el de mayor nivel y suele corresponder al t\u00edtulo principal de la p\u00e1gina. A continuaci\u00f3n vienen el H2, H3, y los niveles que sean necesarios.<\/p>\n<p>Las diferencias en el estilo de los diferentes niveles tienen que ser evidentes, aunque tambi\u00e9n hay que preservar la coherencia respecto a los criterios b\u00e1sicos que se han determinado para el dise\u00f1o.<\/p>\n<p>Pongamos por caso que se elige una Arial como tipograf\u00eda base de un dise\u00f1o: H1 y todos los niveles siguientes deber\u00edan aplicar Arial a diferentes tama\u00f1os de manera que la diferencia sea evidente (por ejemplo, H1 a 30 px, H2 a 24 px, etc.). Tambi\u00e9n se puede articular la variaci\u00f3n de la fuente: negrita para unos estilos, regular para otros\u2026<\/p>\n<p>Es fundamental definir un sistema para establecer los diferentes niveles de jerarqu\u00eda; de lo contrario, el usuario ver\u00e1 una mezcla de estilos sin sentido.<\/p>\n<h3><strong>Combinaci\u00f3n de fuentes<\/strong><\/h3>\n<p>En general, se recomienda no utilizar m\u00e1s de dos fuentes para un mismo dise\u00f1o, ya que el resultado visual podr\u00eda ser ca\u00f3tico.<\/p>\n<p>Si se quiere a\u00f1adir una segunda fuente, esta ha de tener rasgos que contrasten claramente con los de la primera. Si se van a utilizar dos fuentes similares, entonces es mejor limitarse a una.<\/p>\n<p>En todo caso, la combinaci\u00f3n de fuentes tiene que basarse en un sistema que defina para qu\u00e9 estilos va a utilizarse una u otra de manera coherente.<\/p>\n<h2><strong>Referencias<\/strong><\/h2>\n<p><strong><em>Adobe typekit blog<\/em><\/strong> [en l\u00ednea]. &lt;<a href=\"https:\/\/blog.typekit.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/blog.typekit.com\/<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n<p><strong>Franz, L.<\/strong> (2017). \u00abTypographic Web Design\u00bb [en l\u00ednea]. &lt;<a href=\"http:\/\/www.typographicwebdesign.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.typographicwebdesign.com\/<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n<p><strong>Monjo, T.<\/strong> <em>Disseny d\u2019interf\u00edcies multim\u00e8dia<\/em>. Barcelona: FUOC.<\/p>\n<p><strong>Turnbull, C.<\/strong> \u00abSetting Web Type to a Baseline Grid\u00bb [en l\u00ednea]. &lt;<a href=\"https:\/\/webdesign.tutsplus.com\/articles\/setting-web-type-to-a-baseline-grid--webdesign-3414\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/webdesign.tutsplus.com\/articles\/setting-web-type-to-a-baseline-grid&#8211;webdesign-3414<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n El texto es el material b\u00e1sico con el que se construye el contenido de las p\u00e1ginas. La aplicaci\u00f3n de tipograf\u00eda en pantalla tiene unas caracter\u00edsticas particulares, que la diferencian de su tratamiento en entornos tradicionales. Al dise\u00f1ar una interfaz resulta fundamental favorecer la legibilidad del texto, un factor cr\u00edtico debido a la menor resoluci\u00f3n, [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,31],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14933\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=14933"}],"version-history":[{"count":6,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14933\/revisions\/"}],"predecessor-version":[{"id":17707,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14933\/revisions\/17707\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18267\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=14933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=14933"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=14933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}