¿Qué debes considerar al usar tipografías web?
Se ha repetido hasta el cansancio la importancia del contenido para cualquier sitio web. Está claro que llamarlo el rey es una exageración, aunque no disminuye su papel esencial para atraer visitas desde plataformas de búsqueda y redes sociales. Pero no solo el texto tiene relevancia en este esquema, también influye el diseño de la presentación de estas palabras. Aquí el diseño web se juega sus cartas en el despliegue de tipografías atractivas, funcionales y útiles para el despliegue de contenidos.
La regla @fontface se ha consolidado como la herramienta definitiva para aumentar la compatibilidad y estandarización de las fuentes utilizadas en la web. Así cualquier tipografía disponible en internet puede integrarse al diseño, abriendo la posibilidad a innovaciones creativas antes limitadas a las fuentes instaladas en los computadores.
Está claro que las técnicas del diseño gráfico quedaron obsoletas en el diseño web. A continuación mostramos algunas consideraciones básicas para implementar tipografías en sitios web, ya sea en el diseño o en el desarrollo de estas plataformas digitales.
Consideraciones de diseño
Contraste texto/fondo
¿De qué sirve generar el mejor post de la historia si un contraste inadecuado impide leerlo? El contraste entre el fondo de tu diseño y las fuentes será esencial para facilitar la lectura del texto, evitando efectos desagradables para el usuario.
En la W3C existen recomendaciones claras para controlar el contraste adecuado entre el texto y el fondo de un diseño, siendo el patrón mínimo 4,5:1. Esta regla permite la correcta accesibilidad del contenido para personas con visión reducida y evita molestias a los lectores asiduos.
Referencia: Recomendación de contraste entre texto y fondo de las Pautas de Accesibilidad para el Contenido Web de la W3C.
Interlineado
En esto también dicta pauta la W3C, al otorgar un interlineado mínimo de un espacio y medio dentro de los párrafos y 1,5 veces mayor para el espacio entre líneas.
Referencia: Recomendación de presentación visual de las Pautas de Accesibilidad para el Contenido Web de la W3C.
Caracteres por línea
El ancho de una línea en un párrafo no debe exceder los 80 caracteres. Debes poner atención a este punto en diseños responsive, donde el texto se adaptará a la pantalla.
Referencia: Recomendación de presentación visual de las Pautas de Accesibilidad para el Contenido Web de la W3C.
Diferencias gráficas entre elementos
Un buen uso tipográfico debe contemplar jerarquías diferenciadas para cada elemento del contenido, como por ejemplo entre títulos, párrafos, negritas y cursivas. Además, es necesario considerar las etiquetas H de los títulos, las listas itemizadas y las citas, que deben poseer un correlato coherente para ordenar la lectura.
¿Y en la implementación del diseño en el sitio web?
Uno de los elementos más importantes para la correcta integración de una tipografía web es el control del tamaño del texto. Hablando del código, la medida absoluta más utilizadas para tipografías web se expresa en pixeles (px). Su característica más importante es la de mantener el valor asignado, sin variar según la pantalla donde se visualizan.
Errores comunes versiónes antiguas de Internet Explorer obligaron a desarrollar una solución para que el usuario pudiera manipular el tamaño del texto. Es así como se masifican los tamaños relativos a través de las etiquetas em, rem y porcentajes. Estos elementos vienen a superar el problema de accesibilidad que generaba el pixel, al no adaptarse a tamaños y dispositivos de lectura.
- EM: Corresponde al tamaño de la fuente (font-size) del documento padre. Se expresa en decimales adaptados al tamaño de la fuente definida en el documento.
- REM: Funciona de la misma forma que em, solo actuando según el tamaño de fuente definido en el elemento raíz.
Otro punto importante está dado en el tamaño de fuentes para dispositivos móviles. Considerando el aumento de la navegación web a través de móviles y el diseño responsive, se hace necesario establecer un tamaño mínimo para la correcta lectura de contenidos. En los diseños que desarrollamos en IDA utilizamos 14px como un piso mínimo, considerando que muchos smartphone poseen resoluciones bajas y una fuente más pequeña haría el texto ilegible. En teléfonos móviles con tecnología retina display esta limitante es superada por el aumento de la densidad de pixeles.
Acerca del Autor
Agregar un comentario