Móvil: Tipografía (fuentes) – PAR MENU Base de conocimientos

Contexto

El segundo paso en el proceso de definición del estilo visual de una app móvil de marca blanca es elegir las fuentes adecuadas.
Recomendamos comprar la licencia de la fuente en uso. Sin embargo, también puedes elegir una fuente similar en bibliotecas gratuitas como Google Fonts.

La familia de fuentes debe contener tres grosores diferentes (“Regular”, “Semibold” y “Bold”), de modo que puedan utilizarse adecuadamente en toda la app.

Las fuentes cubren todos los elementos de texto de la interfaz móvil, como encabezados, botones de llamada a la acción, así como todo el texto descriptivo que tus clientes utilizarán para navegar por la app. Para evitar posibles problemas de legibilidad, asegúrate de que las fuentes que elijas se puedan leer con claridad.

Consejos para seleccionar las fuentes y darles formato

Encabezado

Los encabezados suelen ser grandes y se colocan habitualmente en la parte superior de una página o como punto de partida de una sección.

Elige un tipo de letra con el grosor de fuente que prefieras, aunque te recomendamos que utilices “Bold” (Negrita).
Uso de mayúscula o minúscula: Puedes elegir mostrar los encabezados en mayúscula o como se escribieron originalmente.

Cuerpo

Es el estilo más utilizado, habitualmente para todos los textos de tamaño reducido, frases completas, títulos, enlaces y párrafos.

Elige un tipo de fuente que incluya los grosores “Regular”, “Semibold” y “Bold”, ya que se usan los tres.

Requisitos de fuentes:

Formato de archivo: OTF o TTF
Fuente para el cuerpo del texto con grosor “Bold”, “Semibold” y “Regular”
Fuente adicional para los encabezados con un grosor de fuente (por ejemplo, “Bold”) si es necesario (opcional)
Licencia

2.Typography preview (1).jpg

Ten en cuenta que no puedes cambiar las propiedades de la fuente, como el tamaño, el espaciado entre letras (kerning), el espaciado entre párrafos y la altura de las líneas.

Colores

Color del encabezado

Nuestro consejo es que elijas el color del texto con mucha atención. Dicho color debe tener suficiente contraste con el fondo para que se pueda leer y satisfaga las normas de accesibilidad. En cuanto a los colores de los encabezados, recomendamos utilizar el mismo color que en el resto de la app (negro, pero puedes elegir otro). Solo no olvides que debe ser lo suficientemente visible:

Encabezado grande
Encabezado

14. Heading Text (1).jpg

Color del cuerpo

Aquí te sugerimos seguir el mismo consejo. El texto debe ser legible y accesible para todos. Asimismo, en el texto del cuerpo, debes elegir un color bien oscuro, de preferencia negro, ya que todos los demás tonos de los colores del texto parten de ese color más oscuro. Por ejemplo, el marcador de posición del campo de entrada solo tiene un 20 % del color del texto del cuerpo.

Color del cuerpo del texto 100 %
Color del cuerpo del texto 80 %
Color del cuerpo del texto 60 %
Color del cuerpo del texto 20 %

15. Body Text (1).jpg

Color del texto de la tarjeta Loyalty

A la hora de elegir el color del texto de la tarjeta Loyalty, recomendamos utilizar el blanco si el fondo es oscuro y un color más oscuro si el fondo es claro: