El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017. Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el estudio. España es en este sentido uno de los países más “adictos” a su uso, un 91% de los usuarios online se conecta a través de su Smartphone, los mismos que Hong Kong o en Singapore.Un 64% ve vídeos online y un 79% utiliza su móvil para realizar búsquedas, una de las cifras más altas del mundo, muy por encima de la media mundial que es del 65%.
Estos datos son suficientemente relevantes como para prestar una mayor atención al diseño web móvil, especialmente a las tipografías utilizadas. Desgraciadamente nuestra labor como diseñadores web viene condicionada en la mayoría de las ocasiones por las guías de estilo establecidas por nuestros clientes.
El uso correcto de la tipografía en el diseño web móvil es fundamental en la usabilidad y experiencia del usuario, veamos lo que dicen los expertos sobre cómo mejorar este uso en dispositivos móviles.
La adaptación de desktop a mobile suele jugar malas pasadas en cuanto al tamaño de fuentes, demasiado pequeñas, demasiado finas, demasiado juntas… Es complicado encontrar un equilibrio.
TAMAÑO DE LAS TIPOGRAFÍAS
La regla general es que el tamaño de fuente debe ser de 16 píxeles en sitios web móviles. Cualquier tamaño más pequeño compromete la legibilidad para usuarios con algún problema visual. Este tamaño hace referencia al texto principal, no al encabezado. Para encabezados, existe un estudio de Nielsen Norman Group que llega a la conclusión de que las secuencias de texto corto permiten lecturas más rápidas y con mayor compresión cuando son más grandes que el texto al que acompañan, están en mayúsculas y el ancho de letras es regular, no condensado.
Las letras en minúsculas requieren un 26% más de tiempo para una lectura precisa que en mayúsculas, y el texto condensado requiere un 11,2% más de tiempo que el habitual. También hubo efectos de interacción significativos entre el caso y el tamaño, lo que sugiere que los efectos negativos de las letras minúsculas se agravan con los tamaños de letra pequeños.
COLOR Y CONTRASTE
El color es uno de los pilares en nuestro trabajo, transmite sensaciones, nos ayuda a captar la atención, pero en este caso más que el color lo que nos debe importar es el contraste entre el color de la fuente y el color de la base en la que se encuentra, este contraste, importante siempre, se acentúa más en el caso del diseño en móvil, ya que además tendremos que añadir que la lectura de estos textos se producirá en numerosas ocasiones en condiciones no muy óptimas, como es el exceso de luz sobre la pantalla cuando estamos en exteriores.
Las Pautas de Accesibilidad para el Contenido Web ( WCAG ) contienen recomendaciones de cómo abordar el diseño de estas fuentes. Estas pautas nos aconsejan que se establezca un contraste mínimo de 4,5 a 1 entre texto y fondo de texto para una legibilidad óptima. Si no sabes cómo conseguir estos datos para comprobar el contraste en tus diseños, puedes utilizar la herramienta gratuita WEBAIM. Esta recomendación tiene algunas excepciones:
- Cuando el tamaño del texto es de 18 puntos o de 14 puntos en negrita solo necesita un contraste de 3 a 1.
- Cuando el texto no aparece en una parte activa de la página web no necesita cumplir con esta regla.
- Cuando el texto aparece dentro de un logotipo.
DENSIDAD DE TEXTO
Además, se recomienda que para una mejor lectura, el número de caracteres por línea no sea superior a 40, si bien este dato es muy relativo, ya que depende directamente de la resolución de pantalla, no es lo mismo una pantalla de 4 pulgadas que una de 7, las resoluciones tienen una tendencia en los últimos años de ir creciendo, en 2018 la mayoría de móviles tiene una resolución de entre 5 y 6 pulgadas.
Tanto en desktop como en móvil, el interlineado es muy importante para una experiencia de usuario mejor. Es fundamental además separar las ideas in párrafos y utilizar un interlineado que permita no con fundirnos de línea cuando estamos leyendo un texto. Para todo esto, la recomendación de la WCAG es que la distancia entre líneas debe ser de 1,5 y de 2,5 para párrafos.
Otras recomendaciones:
- Usar un efecto de desplazamiento para resaltar un párrafo, elementos de lista o celdas de tabla
- Presentar texto en fuente sans serif o proporcionar un mecanismo para lograr esto
- Usar listas verticales (con viñetas o numeradas) en lugar de listas en línea
- Uso de mayúsculas y minúsculas de acuerdo con las convenciones ortográficas del idioma del texto
- Proporcionar fuentes grandes de forma predeterminada
- Evitar el uso de texto en imágenes de trama
- Evitar escalar tamaños de fuente más pequeños que el predeterminado del usuario-agente
- Proporcionar suficiente espacio entre columnas
- Evitar texto alineado centralmente
- Evitar fragmentos de texto en cursiva
- Evitar el uso excesivo de diferentes estilos
- Hacer enlaces visualmente distintos
- Proporcionar viñetas expandibles
- Mostrar / ocultar viñetas
- Poner un em-space o dos espacios después de las oraciones
FUENTES RECOMENDADAS
-
Para teléfonos Android
-
Para teléfonos IOS, Apple
- Apple tiene su propio conjunto de pautas de tipografía para iOS junto con su propia tipografía de sistema: San Francisco.
En general, podemos decir que lo recomendable es usar fuentes sans serif o serif, podemos usar para llamar la atención otros tipos, pero sólo para pequeños textos, nunca para contenidos, asegurándonos por supuesto que exista una buena relación entre ambos tipos, no es recomendable usar más de dos distintos. Y si quieres apostar sobre seguro, las fuentes con más compatibilidad en dispositivos móviles, son la Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS y Verdana.
