19 habilidades de tipografía que todo diseñador debe saber

Más del 90% de toda la información web consiste en texto. Aunque los diseñadores pasan mucho tiempo decidiendo los gráficos, la interfaz y el estilo de la página, se requiere una cantidad de tiempo igual para elegir la tipografía perfecta. Especialmente cuando se trata de dispositivos móviles, la tipografía de la web móvil requiere atención especial ya que viene con 2 desafíos principales: espacio disponible y tamaño tipográfico. Este artículo transmitirá 19 consejos de tipografía necesarios para desbloquear una interfaz de usuario impresionante para su diseño web móvil con una rica experiencia de usuario.

Dar algo de espacio

La tipografía móvil no se trata de organizar letras en la pantalla, se trata de organizarlas de una manera que las haga legibles para los usuarios. Utilice el espacio en blanco correctamente y proporcione el espacio adecuado entre las letras, líneas y párrafos para que el usuario pueda leer el contenido correctamente sin la necesidad de acercarse.

Consejo extra: Kerning

Kerning no era parte de esta lista hasta que entendí lo importante que podría ser desde una perspectiva de diseño de interfaz de usuario. Por lo tanto, sabemos desde el primer consejo que es necesario proporcionar espacio, pero Kerning lo lleva a un nivel superior. Kerning es el arte de ajustar el espacio proporcionado entre los personajes para que el contenido se destaque y sea fácil de leer al mismo tiempo. Hay 3 tipos de kerning, uno puede optar por ir.

Aunque es visible en la imagen de arriba, hay mucho más que saber sobre la diferencia entre estos diversos tipos de interletraje. ¿Curioso? Léalo en este blog, "Kerning: no obstaculice su estilo".

Tamaño de fuente apropiado

Puede mantener las fuentes de su escritorio en un tamaño de 14px, pero cuando se hace lo mismo en dispositivos móviles, puede resultar en un contenido más pequeño o más grande dependiendo de la resolución del dispositivo. Verifique el tamaño de fuente en todas las resoluciones y use consultas de medios para que la tipografía resultante de la web móvil sea legible en todos los dispositivos portátiles de diferentes resoluciones.

Utilice unidades de medida adecuadas

Para el tamaño de fuente de la web móvil, la tipografía no usa puntos (pt). En su lugar, use ems o rems. Esto es preferido por la mayoría de los diseñadores ya que estas unidades hacen que el contenido sea escalable ya que se basan en porcentajes y no en ningún tamaño estático.

Elige colores contrastantes

Un mejor contraste garantiza una mejor legibilidad. Mientras piensa en el color de la tipografía web móvil, piense en la comparación entre brillante y oscuro. Si el fondo de la página es de color oscuro, use fuentes de colores brillantes. Por ejemplo, fuentes blancas sobre fondo negro y viceversa.

Garantizar una mejor legibilidad

Hay muchas fuentes gratuitas y emocionantes disponibles hoy en día, pero si planea usarlas en su contenido, debe verificar cada alfabeto para asegurarse de que la familia de fuentes y el tamaño que está usando hacen que esos contenidos sean legibles. No tiene sentido usar esas fuentes geniales si el lector no puede entender su contenido.

Alinear los textos correctamente

La alineación es un factor importante cuando se trata de la tipografía web móvil. Al cerebro humano le gusta leer el texto en bloques en una pantalla pequeña. Por lo general, los textos se dejan alineados, lo que significa que hay un borde irregular en el lado derecho del bloque. Ajústelo correctamente y asegúrese de que si está usando una alineación "justificada", no se obtenga un espacio en blanco que no sea consistente.

Establecer el liderazgo

La tipografía en la web móvil exige un liderazgo constante (el espacio entre líneas). Cuando es demasiado pequeño, en un contenido grande, el final de una línea y el comienzo de la siguiente es difícil de seguir. Si es demasiado grande, genera espacios en blanco innecesarios. Asegúrese de no interrumpir el flujo suave de una línea.

Encontrar tu punto dulce

Todas las fuentes tienen un punto ideal. La combinación de tamaño de fuente y guía donde aseguran la mejor legibilidad y menos distorsión causada por el suavizado predeterminado del navegador. Experimente con el tipo de letra que está utilizando y encuentre ese punto óptimo.

Utilización de espacios en blanco

Los espacios en blanco son usualmente utilizables. En el caso de los CTA o enlaces en los que se puede hacer clic, utilice espacios en blanco para que se puedan distinguir y hacer clic con el índice o el pulgar. Dado que el usuario no está usando un mouse como en un escritorio, el pulgar o el índice se considera el cursor, que tiene un grosor de aproximadamente un milímetro. Piense en eso y utilice espacios en blanco de manera efectiva.

Tome el ancho de pantalla en cuenta

Mientras diseña la tipografía en la web móvil, debe pensar en cómo las personas leen los textos. Por lo general, hay 2 tipos de ancho en un dispositivo móvil, vertical y horizontal. Por lo tanto, al diseñar la tipografía, tenga en cuenta ambos anchos y establezca la alineación y el espaciado en consecuencia.

Haz que tu tipografía sea distinguible

La tipografía de su página web móvil debe tener una característica distinta, ya sea en apariencia o en color o efectos adicionales. Especialmente, en los contenidos que desea que lean los usuarios, elija cuidadosamente los tipos de letra para los encabezados que los hagan destacar del resto.

Verificación de escala y proporciones

Verifique los contenidos en diferentes dispositivos móviles de diferentes resoluciones. Además, acerque y aleje para asegurarse de que su tipografía web móvil se ajuste y se ajuste a todo el ancho de la pantalla. La capacidad de respuesta de su contenido es imprescindible y debe probarlo y escribir consultas de medios en caso de que haya alguna interrupción para una resolución determinada.

Tener en cuenta la funcionalidad

Hay muchos elementos de texto en un sitio web móvil que permiten al usuario realizar ciertas acciones, como enviar un mensaje o hacer una llamada. La tipografía de la web móvil debe diseñarse cuidadosamente para garantizar que los usuarios comprendan que un texto específico es en realidad un CTA o ejecuta una determinada funcionalidad.

¿La página tiene mucho texto?

Si su página es pesada en términos de texto, como un blog o un artículo de noticias, se necesita muy poca interacción. El objetivo principal del usuario es leer, asegurarse de que la tipografía de la web móvil esté diseñada en consecuencia.

¿La página tiene mucha interacción?

Si su página implica más acciones de desplazamiento y clics junto con la escritura, la edición, etc., ajuste sus textos en consecuencia. Asegúrese de que el tamaño de la fuente no sea inferior a 18 píxeles para que los usuarios puedan comprender que se supone que suceda alguna acción una vez que hagan clic o desplace el mouse sobre el texto.

Diseño web adaptable

Como se mencionó anteriormente, los píxeles deben evitarse durante la tipografía de la web móvil. Tienen una dimensión fija estándar. Use em o rem en su lugar. Se basan en porcentajes y escalables. Cuando el contenido se ve en un dispositivo móvil con una resolución diferente, ajustan su tamaño en consecuencia. Recuerde, el contenido de texto de su página web receptiva debe ser escalable y ajustar su tamaño automáticamente de acuerdo con el ancho de la pantalla. Puede usar LambdaTest para realizar sus pruebas de respuesta. Con un solo clic, puede verificar la capacidad de respuesta de su sitio en más de 44 dispositivos móviles con diferentes resoluciones.

Emparejar varias fuentes

Mientras diseña la tipografía de la web móvil, puede combinar diferentes fuentes para encabezado y párrafo, etiquetas, etc. Pero asegúrese de que coincidan entre sí. Mezclar argelino para encabezado y cómic sin MS para un párrafo es una mala idea.

Peso de fuente: ¿pesado o liviano?

Las fuentes móviles son relativamente más pequeñas en comparación con las computadoras de escritorio. Se debe tener cuidado para que sean legibles o clicables cuando impliquen su funcionalidad. La clave para decidir el peso de la fuente es experimentar. Aunque en la actualidad, la tipografía en negrita y grande para la web móvil es una tendencia, debe usar el peso de varias fuentes y probar la aplicación en diferentes resoluciones para asegurarse de que no haya interrupciones en ninguna parte.

Mantenga el fondo en mente

Si el fondo es estático y monocromático, como se mencionó anteriormente, puede usar colores de fuente del contraste opuesto. Pero cuando un fondo es una imagen o un video, la opción ideal sería experimentar con diferentes colores y verificar cuál se ajusta correctamente y hacer que el contenido sea legible.

La tipografía es un oficio delicado. Los diseñadores a menudo pasan toda una vida perfeccionando sus habilidades tipográficas. Con cada nuevo tipo de letra que presenta un nuevo desafío, estamos seguros de que los consejos de tipografía móvil mencionados anteriormente serán útiles la próxima vez que diseñe una nueva página web móvil. Además, tenga en cuenta realizar pruebas de compatibilidad entre navegadores para asegurarse de que los tipos de letra o estilos que está utilizando funcionen correctamente en todos los navegadores. LambdaTest se puede utilizar para realizar pruebas de compatibilidad entre navegadores en más de 2000 navegadores diferentes y sus versiones. Asegúrese de que el tipo de letra sea compatible con todos los navegadores necesarios y presente a sus usuarios la rica experiencia de usuario que se merecen.

Publicado originalmente en LambdaTest

Originalmente escrito por Arnab Roy Chowdhury

Otras lecturas…

Si te gusta la publicación, aplaude y ayuda a otros a encontrarla también.