Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

Ajustes Tipográficos Adecuados para Dispositivos Móviles

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Pongámonos serios con respecto a la tipografía en dispositivos móviles; todos sabemos que el uso del móvil se ha extendido de forma masiva, y también estaremos de acuerdo en que la tipografía es un aspecto super importante dentro de cualquier diseño. La tipografía es un elemento de diseño fundamental; personalmente, yo prefiero empezar con ella nada más iniciar un diseño porque me ayuda a establecer un buen punto de partida para el resto del diseño. Por tanto, hablemos sobre cómo podemos crear la mejor tipografía posible para los dispositivos móviles.

Las Pantallas Móviles son Restrictivas

Cuando diseñas para móviles, nuestro peor enemigo es lógicamente el tamaño de la pantalla. Algunos smartphones son extremadamente pequeños, como el antiguo, pero aún ampliamente extendido iPhone 4/4S. Según UNITY, un 15.9% de la gente todavía utiliza este anticuado modelo. En EE.UU esa cifra se traduce en casi 24 millones de personas. Sí, efectivamente, son muchas personas con pantallas muy muy pequeñas. Después también nos con encontramos pantallas más grandes como la del iPhone 6 Plus, la del Galaxy Note 4  el Nexus 6. El hecho de que exista un rango tan amplio de tamaños de pantalla ya constituye una restricción en sí, ya que lo que tiene un buen aspecto en un iPhone 4 no siempre lo tendrá en un iPhone 6 Plus.

Podría ser interesante que echases un vistazo a tus estadísticas para comprobar cuál es el dispositivo más empleado para visitar tu sitio web. No obstante, por lo general se supone que un enfoque agnóstico respecto a los dispositivos te será más útil a largo plazo.

Echa un vistazo a la imagen superior y observa cómo se renderizan los textos de un mismo tamaño en cada dispositivo. Ni siquiera podría encajar al completo el “Heading 1” en el iPhone 5S, demostrando que la tipografía responsiva debe empezar teniendo en cuenta el tamaño de la pantalla.

Otros Posibles Obstáculos

Entre otros obstáculos que encontraremos cuando diseñemos para smartphones se incluye la iluminación del ambiente del entorno en el que esté el usuario, así como la proximidad con la que sostengan su teléfono con respecto a su rostro.

Comencemos abordando el último punto. Al usar nuestros móviles con las manos, tendemos a sostenerlos a una distancia igual a la longitud de nuestro brazo e incluso algo más cerca de nuestro rostro. Esto significa que la tipografía puede ser un poco más pequeña en los móviles ya que la distancia entre la pantalla y nuestros ojos es más corta que la que usualmente existe cuando usamos un portátil o un ordenador de sobremesa.

Al ser posible reducir el tamaño de la fuente, podremos introducir más texto en una misma cantidad de espacio, proporcionándonos más “medidas”. A cambio, esto nos da un alivio para las pantallas más pequeñas, aunque sólo ligeramente. Puedes ver como funciona esto en la imagen de abajo.

Fuentes de menor tamaño en pantallas más pequeñas

Contraste

La gente usa sus móviles todo el tiempo, en cualquier parte. En el metro, en el parque, en sus sofás o en sus camas. Tu app o tu sitio web puede acabar usándose en distintos entornos y con diferente iluminación, lo que significa que debes ser también consciente del otro factor, el contraste. Leer en el parque es posible–incluso con luz solar directa–si el contraste del texto con respecto a su fondo es lo suficientemente alto. En este tipo de situaciones, disponer de un texto de mayor tamaño también ayuda. El contraste será menos necesario si se está leyendo en el metro, donde la iluminación no produce tantos reflejos, o por ejemplo, durante la noche en la cama.

Gizmodo publicó un detallado artículo sobre qué dispositivo móvil se usaba más en exteriores (incluyendo tanto tablets como smartphones). Realizaron un estudio comparativo de los colores en relación a la distinta iluminación solar. Los resultados parecían indicar que el Samsung Galaxy S tenía un mejor rendimiento que el iPhone 4 con luz solar indirecta, la cual es la peor condición lumínica en exteriores. Consulta el artículo completo si quieres conocer más detalles sobre este asunto.

Mi argumento es sencillo, existen muchos partes involucradas en lo referente al diseño para la legibilidad en dispositivos móviles. Descubre quienes son tus usuarios de manera que puedas determinar mejor cual será el contexto de su lectura, empieza por sus tipos de móviles y termina definiendo su entorno.

Texto del Cuerpo y Titulares

Existen por ahí cientos de tutoriales que te ayudan a determinar los píxeles exactos que debería tener tu texto según el ratio de oro o simplemente observando lo que tiene buen aspecto. Establecer una buena escala tipográfica para ordenadores de sobremesa es bastante sencillo. También es bastante fácil para dispositivos móviles. Typecast tiene un estupendo artículo que detalla cómo podrías descubrir las medidas tipográficas adecuadas tanto para los ordenadores de sobremesa como para los dispositivos móviles: A More Modern Scale for Web Typography. Dicho artículo explica con claridad porque la tipografía debe ser responsiva. Pero yo quiero dar más detalles que únicamente afirmar que “la gente tiende a leer de forma distinta desde dispositivos móviles” – ¡es mucho más que eso!

Como puedes ver, los dispositivos móviles son el medio menos estable con el que tenemos que lidiar como diseñadores. Como ya he mencionado anteriormente, la gente lee en dispositivos móviles desde cualquier lugar, en entornos que cambian continuamente. Para optimizar mejor la experiencia de su lectura debemos comprender la psicología de lo que realmente logra convertir esa lectura en una buena experiencia.

Tu Principal Preocupación: El Texto del Cuerpo

Me gustaría pensar que el diseño de la mejor experiencia de usuario para los dispositivos móviles empieza por crear un cuerpo de texto perfecto. Sea la cual sea la fuente que utilices, asegúrate de que es lo suficientemente flexible como soportar distintos tamaños de pantalla con un mismo tamaño de fuente manteniendo un buen aspecto. Si eliges la Helvetica Neue como familia tipográfica deberías asegurarte de que se vea bien en un iPhone 4s con un tamaño de 16px e igualmente en un móvil Nokia o un Galaxy.

Ten en cuenta también el grosor de la fuente que selecciones, ya que algunos móviles mostrarán los textos en versión regular, bold o light de forma distinta unos de otros.

Tu Otra Principal Preocupación: Los Titulares

¡Exacto, los titulares son igualmente importantes! Con ellos tienes más libertad creativa, ya que puedes sacrificar su legibilidad en cierta medida a cambio de un mayor impacto, pero ten en cuenta también su escala. Un titular, como hemos demostrado en la primera imagen sobre los tamaños de pantalla, tiene más probabilidades de acabar siendo ilegible al tener un tamaño excesivo para pantallas pequeñas. Además, al usar un titular grande se malgasta mucho espacio, ya que evitas que los usuarios alcancen pronto el contenido principal.

La Importancia del Ritmo Vertical

Otra cosa a recordar cuando estés perfeccionando el cuerpo del texto es el ritmo vertical. El ritmo vertical es un término que hace referencia al espacio vertical y a la alineación de la tipografía y de otros elementos en la página. El término ritmo implica la repetición de un patrón. Un buen ritmo vertical asegura una buena experiencia de lectura ya que permite equilibrar la composición de forma que asista como guía a la visión del lector.

Extraído de http://modulargrid.org

Ya sea el interlineado pequeño o amplio, su consistencia es lo más importante. Pero hay que destacar que el interlineado en los dispositivos móviles puede reflejarse en las pantallas pequeñas. Que no te asuste apretar las cosas, especialmente si has reducido el tamaño de fuente, pero establece un ritmo vertical de manera que se asegure una cómoda lectura al usuario.

Si necesitas ayuda para determinar las mejores medidas para el ritmo vertical, Andre Morton tiene un generador de ritmo vertical en su blog.

Cumple los Fundamentos Tipográficos Básicos

Existen ciertas reglas generales que me gustaría compartir contigo en lo que respecta al diseño tipográfico en general, pero que es especialmente cierto en la tipografía responsiva y móvil.

No Modifiques el Kerning

Nunca deberías tener que ajustar el kerning para los sitios web o apps de ningún tipo. ¡Es un proceso complejo y muy poco fiable en la web! Las fuentes de calidad cuentan con un kerning adecuado de origen, y si la fuente que has escogido no dispone de un buen kerning, deséchala.

Asegura un Margen Claro

Cuando no existe un margen claro en el bloque derecho o izquierdo del texto, es posible que tenga una alineación justificada (y los textos en los sitios web nunca deben justificarse).  Un margen mal formado creará huecos y saltos enormes en el espacio en blanco; es más fácil leer y analizar un texto cuando tiene un margen claro. ¿Como se rompe tu texto al final de las líneas en los distintos tamaños de pantalla? Podríamos solucionarlo fácilmente con un pequeño ajuste que elimine unos cuanto píxeles del elemento que contiene el texto, o añadiendo algunos.

Optimiza los Enlaces Insertados en las Líneas

No hay nada más frustrante que intentar pulsar una pequeña área en un móvil sin conseguirlo debido a que es excesivamente pequeña–o peor aún, acabar pulsando en su lugar cualquier otra. Quizá el mejor consejo en esta situación sea ¡colocar los mínimos posibles! Cuando sólo existe un enlace en la línea es mucho más fácil pulsarlo, ya que no existe ninguna otra cosa que puedas abrir accidentalmente. Después, asegúrate de que el enlace sea bien evidente. Puedes conseguir esto de distintas formas, por ejemplo haciendo el texto en negrita, o usando el habitual patrón del subrayado. En ocasiones cambiar sólo el color no será suficiente si el contraste es demasiado bajo (¿recuerdas cuando hablamos sobre los colores de la pantalla y los problemas con la luz?)

Por último, asegúrate de que los enlaces situados dentro de líneas disponen de un área pulsable más amplia de la que se percibe. Puedes lograrlo aplicando la regla display: inline-block; a los elementos anchor, pero cerciórate de que cualquier padding o line-height extra aplicados no desfiguran el texto principal.

Conclusión

Establecer la tipografía en dispositivos móviles consta de muchos aspectos variables de los que deberías ser consciente. Espero que este artículo te haya proporcionado algunas nociones sobre cómo mejorar tus diseños para dispositivos móviles. ¡Cuéntanos tus propios trucos y consejos a través de un comentario!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.