Contáctenos

Volver arriba

Bill Gates dijo; “El contenido es el rey” y cuando se trata de la experiencia del usuario en línea es la verdad del 100%. Ofrecer una excelente experiencia de usuario no solo significa entregar contenido excelente, sino también proporcionar ese contenido en un formato utilizable y útil que aliente la lectura y la interacción en lugar de hacer clic fuera del sitio porque no se puede leer.

Por lo tanto, la tipografía en la web se convierte en una parte vitalmente importante del trabajo del diseñador. Más que cualquier otra parte del diseño: elegir las fuentes adecuadas y mostrar esas fuentes de la manera correcta hará que la experiencia del usuario se rompa o se rompa.

“La tipografía es el uso del tipo para defender, comunicar, celebrar, educar, elaborar, iluminar y diseminar. En el camino, las palabras y las páginas se convierten en arte “. James Felici, autor de The Complete Manual of Typography.


Autor / titular del copyright: Kevin Kirsche. Términos y licencia de copyright: CC BY-NC-SA 2.0

La tipografía tiene una larga e interesante historia. Ha sido importante desde la producción de medios impresos y no es algo nuevo para Internet.

Pautas para el uso de la tipografía en Internet

Hay muchas pautas que se pueden utilizar para informar su elección de tipografía en línea. También vale la pena señalar que cualquiera (y de hecho todas) estas directrices se pueden romper si está buscando crear un efecto o si sus usuarios lo prefieren. No existe un modelo de tipografía “de talla única” y la investigación de usuarios en esta área de UX es tan importante como lo es en otras áreas de UX.

Así que echemos un vistazo a cómo aprovechar al máximo la tipografía en línea:

Encabezados

Los títulos son una parte vital de la experiencia de contenido: deben escribirse para captar la atención del usuario o avanzar rápidamente para hacer otra cosa. Sin embargo, también deben mostrarse correctamente y eso significa obtener el tamaño correcto de la fuente y la fuente misma.

¡El titular típico en línea ahora ocupa 38 px! Eso es un gran aumento en la última década más o menos. También significa una mayor comprensión de que si no captas la atención del usuario, se irán a otro lado. Otros títulos tienden a estar entre 20 y 32 píxeles.

En cuanto a las fuentes en sí mismas; hay una división uniforme entre las fuentes serif y sans-serif que se usan en línea y las fuentes serif más populares son Georgia y Chapparal Pro, con Arial y Freight Sans Pro como las fuentes sans-serif más populares. No tenga miedo de experimentar con las fuentes, pero asegúrese de obtener comentarios de los usuarios sobre su legibilidad.


Autor / titular del copyright: Markus Angermeier. Términos y licencia de copyright: CC BY-SA 2.5

No es necesario ser un fanático de las nubes de palabras para ver que el encabezado en esta nube hace el trabajo de llamar la atención. Los encabezados deben captar la atención del lector para que sean efectivos.

Cuerpo de texto

La copia del cuerpo es tan importante como los títulos. Los encabezados pueden atraer a los lectores, pero es el texto del cuerpo lo que les hace esperar. Una vez más, la visualización del contenido es vital para esto.

Los tamaños de fuente más populares para la copia del cuerpo son 14-16 px, que de nuevo ha crecido en la última década cuando las fuentes más pequeñas volvieron a ser populares. El entendimiento es que la copia debe ser fácil de leer ahora.

También vale la pena señalar que, comúnmente, hay una relación entre el tamaño de fuente del encabezado y el texto del cuerpo que se emplea en línea y que los encabezados tienden a ser 2,5 veces más grandes que el texto del cuerpo.

También hay un conjunto de reglas que se aplican al espaciado entre líneas y la longitud de línea para la copia web (al menos para los sitios web comunes: los sitios móviles se manejan de manera diferente, como veremos pronto). Esto indica que la altura de la línea debe ser 1,46 veces mayor que la altura de la fuente y que la longitud de línea óptima es 24,9 veces la altura de la línea óptima. La longitud de la línea también se puede expresar en caracteres, siendo aproximadamente 85 caracteres óptimos. Esta regla de oro aún debería permitir márgenes, relleno, etc. que hacen que el cuerpo sea atractivo visualmente.

En cuanto a las fuentes mismas; la mayoría de los sitios web (casi 2/3 de todos los sitios web) usan fuentes serif para la copia del cuerpo y el resto usan fuentes sans-serif. Las fuentes más populares para serif son las mismas que para los encabezados, pero con sans-serif son Arial y Helvetica las que ganan el día.


Autor / titular del copyright: Fvasconcellos. Términos y licencia de copyright: dominio público.

Georgia es una de las fuentes más populares en línea cuando se usa “de fábrica”, pero la tipografía a medida también es increíblemente popular y brinda libertad a los diseñadores para crear experiencias precisas.

Fuentes personalizadas

Vale la pena señalar que, a pesar de los consejos anteriores, la mayoría de los sitios web no utilizan fuentes estándar en absoluto. Emplean fuentes a medida diseñadas para sus marcas. Eso significa que siempre que haga un poco de investigación por parte del usuario, hay muchas maneras de hacer que su copia se destaque de la de su competidor.

Going Mobile

La web móvil no sigue las mismas reglas que la web estándar y los diseñadores necesitarán examinar la forma en que las fuentes receptivas pueden emplearse para garantizar experiencias consistentes entre las diferentes plataformas.

Colores de fuente

Para hacer la vida más confusa, hay algunos consejos contradictorios sobre el uso de colores de fuente para el texto más legible. Los estándares web W3C recomiendan que use fuentes que contrasten con el fondo en una proporción de 3: 1 como mínimo. Sin embargo, otras fuentes afirman que este contraste puede ser desalentador e incluso puede afectar la capacidad de los lectores disléxicos para analizar el texto. Esto significa que es imperativo que pruebe los colores (con usuarios reales) de sus fuentes antes de grabarlas en piedra.


Autor / titular del copyright: Danny PiG. Términos y licencia de copyright: CC BY-SA 2.0

Los colores deben crear contraste, pero exactamente cuánto contraste se debate. Existen pautas contradictorias para esto y querrás probarlas con tus usuarios para estar seguros.

The Take Away

El contenido realmente es King en línea. No importa cuán hermosos sean sus diseños o cuán maravillosa sea su navegación : sin contenido, los usuarios se dirigen a otro lado. Para maximizar la experiencia del usuario de ese contenido; Deberá mostrarlo de tal manera que incite al lector a interactuar con el contenido y hacer que el acto de leer el contenido sea placentero. Las reglas anteriores proporcionan una base firme para entregar contenido que es agradable a la vista, pero como siempre; no son un sustituto de la investigación y las pruebas con sus usuarios.

Referencias

Puede encontrar algunos proyectos de tipografía interesantes e inspiradores en Behance –https://www.behance.net/search?field=97

Los estándares del W3C sobre tipografía se pueden encontrar aquí –https://www.w3.org/wiki/Typography_on_the_Web

El geek usabilidad da su opinión sobre las mejores prácticas de tipografía para la usabilidad aquí –http://usabilitygeek.com/12-typography-guidelines-for-good-website-usability/

Imagen del héroe: autor / titular del copyright: Kostya Sasquatch. Términos y licencia de copyright: CC BY-NC 2.0