Con el aumento de los dispositivos móviles como medio usual para acceder a internet, es importante que lo tomes en cuenta al momento de diseñar un sitio web. Por suerte existen frameworks que se especializan en diseño adaptativo y actualmente HTML y CSS están optimizadas para ofrecer una buena experiencia en dispositivos móviles. Es decir, cuentas con muchas herramientas para poder crear un sitio web optimizado para móviles.
Sin embargo, también debes considerar tus recursos usuales como las imágenes y la tipografía, elemento esencial en todo diseño web. Existe un gran desafío al respecto: en los dispositivos móviles las pantallas son más pequeñas. En este artículo te damos algunos consejos generales para que optimizar tu tipografía en estas pantallas más pequeñas.
Piensa en los espacios
Aunque no lo parezca, la tipografía tiene mucho que ver con los espacios que existen alrededor de ella. Y no nos referimos sólo al espacio que existe entre una letra y otra, sino el espacio que conforma una tipografía. Si piensa un momento en ello, notarás que muchas letras del alfabeto como la “o”, la “b” o la “p” poseen agujeros. A estos agujeros se le suelen llamar “ojos” y aunque su tamaño varía según las particularidades de cada letra, siempre los encontrarás en cualquier tipo de fuente. Estos agujeros en las letras ayudan a crear espacio, de modo que ayudan con la legibilidad.
Ya que el espacio mejora la legibilidad es importante tenerlo muy en cuenta al momento de diseñar un sitio o aplicación para móviles. Una regla general que deberías tener siempre en mente es que el espacio entre letras es menor que el espacio existente entre palabras. Y este espacio entre palabras, a su vez, es menor que el espacio entre líneas. De esta manera, se genera una especie de jerarquía respecto al espacio adecuado que debes usar en tus diseños.
Para mejorar la legibilidad en móviles se debe prestar especial atención al espacio y a la jerarquía de la que hemos hablado previamente. Esta jerarquía permite crear la sensación de grupo, de modo que el usuario sabe qué párrafo se diferencia de otro y puede leer el texto con mayor fluidez.
Determina la longitud ideal de una línea de texto
¿Por qué es importante tener en cuenta la longitud de la línea? Legibilidad, eso es todo. Si la línea es muy larga o corta, se pierde la fluidez y el ritmo del diseño visual y es mucho más complicado leer el párrafo.
La medida ideal para ordenadores es usualmente de 65 caracteres. En cuanto al espacio que ocupe depende del tipo de tipografía que emplees y la extensión del texto que desees incluir. Asimismo, se debe tener en cuenta el formato: si está en itálica, en negritas, el puntaje, etc. Hay muchos factores que pueden influir en el espacio total que ocupe tu texto en el diseño
Sin embargo, esta medida de 65 caracteres es probable que sobrepase los límites de un navegador en un dispositivo móvil. Por esta razón, el número de caracteres debe ser menor. Usualmente se coloca 35 caracteres como una longitud apta en dispositivos móviles. Esta longitud también se ve afectada por los mismos factores que influyen en un ordenador móvil (tipo de letra, puntaje, formato, etc).
Debes tener en cuenta que esta medida ideal no es siempre la más óptima para tus diseños, pero al menos te ayuda a tener una base para establecer la longitud ideal en tus diseños específicos. Sólo asegúrate de observar tu texto y leerlo para verificar que no existen problemas de legibilidad.
Modifica el interlineado
Ya hablamos de espacio anteriormente, sin embargo, le prestamos especial atención al interlineado pues ayuda a agrupar y diferenciar párrafos. Cuando el interlineado es demasiado alto, interrumpe la lectura pues el lector no entiende muy bien qué línea continúa y cuál pertenece al párrafo. Cuando el interlineado es muy bajo puede que las astas de ciertas letras choquen con la base de otras, esto dificulta la legibilidad. Para que haya una legibilidad óptima, el interlineado debe ser el adecuado.
En programas como Photoshop, el interlineado se asocia de manera predeterminada, pero te sugerimos modificarlo ligeramente o al menos probar cómo se ve el párrafo si usas otra medida de interlineado. Puede que notes que con una medida más alta o baja el texto luce mejor. Es difícil de creer, pero pequeños detalles como estos pueden ayudar a mejorar la legibilidad de tus texto.
En general, el interlineado suele ser menor en dispositivos móviles debido al tamaño de pantalla, sin embargo, esa medida no debería poner en riesgo la legibilidad de tus textos en dispositivos móviles.
Reduce el contraste
Es usual emplear el puntaje de un texto para indicar la importancia del mismo. Es así que los títulos suelen estar en un puntaje más alto (e incluso en negritas) que los subtítulos y el cuerpo de texto. Si bien en ordenadores esto funciona a la perfección, en móviles sucede lo opuesto debido a la cantidad de texto que es visible en pantalla.
Es importante generar contraste y jerarquía, pero en el caso de los móviles debe reducirse el puntaje de los títulos, subtítulos y cuerpo de texto de modo que sean legibles. La jerarquía sigue estando presente y es reconocible, pero el contraste entre las tipografías no es tan exagerado como en los ordenadores. En los ordenadores esto funciona por el tamaño de la pantalla, debido a que puedes ver toda o gran parte de la composición, reconoces de inmediato qué texto es más importante que otro.
Modificar el tracking
Cuando tengas que modificar el tamaño de tu fuente para móviles, debes tener en cuenta el tracking. El tracking hace referencia al espaciado que existe en todo el grupo de caracteres que conforman una palabra. Usualmente, este valor se asocia de manera predeterminada, pero puedes modificarlo si notas problemas de legibilidad.
Es probable que estos problemas se den en los títulos o en las notas de pie de página. Recuerda que mientras mayor es el puntaje de una tipografía, menor debe ser el tracking y viceversa. Esto se debe debido a que una tipografía en gran puntaje se puede leer fácilmente y por esta razón no necesita tantos espacios en blanco como puede necesitar una tipografía en puntaje bajo.
Cada vez que modifiques el tamaño de tus fuentes para móviles, ten en cuenta que mientras más pequeña es una fuente, más alto deberá ser el valor de tracking.
