El móvil es grande en este momento. Pero a menudo la tipografía es pequeña. Cuando se trata de crear un gran tipo en pantallas pequeñas, hay muchos desafíos.
Entonces, ¿cómo puede aprovechar al máximo la capacidad de respuesta, el diseño móvil y la tipografía? El primer paso es realmente entender el tipo y el segundo es pensar cómo las personas leen. Ponga los dos juntos y obtendrá una idea de cómo crear un gran tipo de dispositivo móvil en poco tiempo. Es una habilidad que todo diseñador necesita dominar en la era digital.
Fundamentos de tipografía móvil y receptiva
A diferencia del tipo diseñado para la impresión e incluso muchos proyectos de diseño web de escritorio, la tipografía móvil y sensible a menudo no se mide utilizando el sistema de puntos tradicional. En lugar de seleccionar un tipo de letra y usarlo en? 14 puntos con 15 puntos de liderazgo ,? El tipo móvil y sensible está diseñado con píxeles, ems o rems. Estas unidades flexibles están basadas en porcentajes y pueden ayudar a los diseñadores a crear tipos para múltiples dispositivos más fácilmente.
Dos de las consideraciones más importantes al diseñar el tipo para dispositivos móviles son el tamaño y el espacio. El tipo debe ser lo suficientemente grande para que se pueda leer fácilmente y debe haber suficiente espacio entre las líneas para que el texto no se vea abarrotado en el espacio pequeño.
No hay una fórmula mágica para qué tamaño o espacio usar. Pero, por lo general, el tipo de dispositivo móvil debería ser un poco más grande que el de los escritorios e incluir más espacio entre líneas. Si bien muchos sostienen que el número óptimo de caracteres por línea para el diseño de escritorio y de impresión es de 60 a 75 caracteres, para los móviles, este número se debe reducir a la mitad.
Como la gente lee
La clave para cualquier estilo de tipografía, en cualquier dispositivo, es la legibilidad. Si el usuario no puede leerlo, el diseño no funciona.
Esto es especialmente importante en dispositivos móviles. Y hay tantas opciones móviles que es prácticamente imposible saber cómo se representarán sus letras en cada dispositivo. Así que realmente trabaja para refinar tu tipo para los anchos de pantalla de dispositivos más populares.
Piensa en cómo las personas leen cuando planifican tu diseño móvil. Es posible que deba ajustar las relaciones entre diferentes elementos de tipo, como el encabezado y el texto principal. (El sitio de Chattanooga Renaissance Fund, arriba, hace un gran trabajo de esto). Cualquier tipo que sea demasiado grande puede acabar con la pantalla rápidamente, distrayendo a los lectores. El tipo que es demasiado pequeño se puede pasar por alto o no es importante.
Considera la alineación también. Generalmente, la gente lee de izquierda a derecha. Especialmente en un dispositivo pequeño, mantenga los estilos de alineación simples para una máxima legibilidad.
Se trata de ancho
El factor clave al diseñar el tipo para dispositivos móviles, aplicaciones o tabletas es el ancho de la pantalla. Y recuerde, hay que considerar dos anchos: vertical (cómo la mayoría de la gente sostiene sus teléfonos) y horizontal.
El texto que es demasiado grande creará muchos saltos en el tipo y, si usa guiones, muchos guiones. (Cabe señalar que pocos diseñadores web usan guiones; son un carácter que rara vez se encuentra en el texto del cuerpo de la web). Las frecuentes interrupciones en el flujo de texto pueden hacer que el lector se detenga con demasiada frecuencia y haga que el mensaje sea entrecortado y más difícil. comprender.
El texto que es demasiado pequeño puede hacer que el lector se esfuerce y que sea difícil concentrarse en el texto. También puede ser difícil encontrar el principio y el final de las líneas de texto cuando hay demasiadas letras para digerir a la vez.
Diseño en el espacio
Cuando se trata de pantallas pequeñas, el espacio es una consideración clave. Piense en los elementos que pueden encontrar sus usuarios: bajo contraste en la pantalla debido a la iluminación, el relleno para que el texto no golpee el borde de la pantalla (o una funda de teléfono que no se ajuste bien) o en algún lugar donde los usuarios puedan desplazarse por la pantalla sin hacer clic involuntariamente. enlazar.
Al agregar un poco de espacio al texto, tanto entre líneas como en los márgenes, está ayudando a los usuarios a interactuar mejor con las palabras. El buen espaciado también ayuda a la legibilidad, especialmente en condiciones inferiores. Al igual que con otras técnicas, la cantidad correcta de espacio es crítica y una gran cantidad de espacio en blanco puede quitar el área de contenido en la pantalla o incluso dificultar la legibilidad.
Un buen lugar para comenzar es en el rango de 10 a 20 por ciento. Juegue con los números como guía en cuanto a cuánto espacio extra para agregar entre líneas de tipo. También puede considerar el uso del espacio entre párrafos, ya que los gráficos pueden verse más largos en pantallas más pequeñas. Este espacio adicional les da a los lectores la percepción de que el texto no es demasiado denso y se sentirá más fácil de leer.
Mantener tipografías simples
Hay una razón por la que ves tantos tipos de letra sans serif en sitios web móviles y en aplicaciones. Generalmente son fáciles de leer.
Al seleccionar tipos de letra para bloques de texto en el diseño móvil, piense en algo más que un logotipo o elemento de arte tipográfico, vaya con algo simple, de un peso estándar y que tenga un ancho de trazo bastante uniforme. Evite las tipografías novedosas, los estilos condensados y las formas de letra con trazos finos.
Más diseñadores están optando por usar un segundo conjunto de tipos de letra para sitios móviles en lugar de la versión de escritorio, que puede incluir una paleta de tipos más elaborada. Si bien este concepto tiene ventajas y desventajas, puede ser una solución si tiene el corazón en una cierta tipografía especializada para el diseño de escritorio.
También ten cuidado con los trucos de tipo. Los efectos tales como sombras o biseles pueden verse muy bien en tamaños más grandes, pero pueden quedar cortos o dificultar la legibilidad en una pantalla de solo unos centímetros de ancho. Olvídate de los trucos cuando trabajes en un plan de tipo para tu sitio móvil.
Proporciones móviles y escala
Si bien no hay una solución perfecta, Jason Pamental de H + W Design tiene uno de los mejores que hay. Detalló su escala moderna medida para el blog Typecast con CSS y una escala completa de números.
La idea es que cada pieza de tipo diferente en un diseño web se debe pensar y escalar por separado para una experiencia de diseño web optimizada. A menudo, nosotros (colectivamente como diseñadores) escalamos todo al mismo tiempo.Pamental muestra por qué esta no es la mejor idea a través de un ejemplo simple, donde el encabezado ocupa casi la totalidad de la pantalla.
Ninguna conversación sobre tipografía web móvil estaría completa sin pensar en la pieza de Pamental. Asegúrate de leerlo por ti mismo y ver cómo sus ideas podrían traducirse en tu trabajo.
Considerar la funcionalidad
Una última cosa en la que pensar al diseñar tipografía móvil es cómo funciona realmente. Si bien algunos tipos en sitios web de escritorio están diseñados para hacer clic y vincularse, la tipografía móvil a menudo hace aún más. Algunos textos pueden permitir a los usuarios hacer una llamada, otro tipo contiene un enlace, otros pueden permitir a los usuarios comprar un producto o el texto en una aplicación puede ser parte de un juego.
Diseñe este tipo para que los usuarios sepan exactamente lo que hará. Y haz que sea lo suficientemente grande para que los usuarios completen esta acción con facilidad. Los cuadros de texto activos deben ser lo suficientemente grandes para tocarlos y separarlos de otras acciones de texto para que solo ocurra una cosa a la vez. Cualquier otra configuración probablemente confundirá y frustrará a los usuarios.
Conclusión
Al igual que con cualquier proyecto de diseño, las pautas y los consejos son solo un lugar para comenzar. La tipografía móvil es una de esas áreas en las que los diseñadores realmente están empezando a sumergirse y las tendencias evolucionarán.
Asegúrese de mezclar y combinar las ideas anteriores con las suyas para obtener los mejores resultados. (Y si tiene consejos adicionales, nos encantaría escucharlos). El consejo número 1 es probar, probar, probar. Cuantos más dispositivos pruebes con los estilos de texto, mejor idea tendrás de cómo se ve y cómo funciona para los usuarios.
Fuente de la imagen: Phil Roeder. Nota sobre las imágenes: las imágenes de esta publicación se muestran en la vista de escritorio y también en un iPhone 5S.