Contexto

La forma más fácil de personalizar la app web y que te represente mejor es utilizar las fuentes de tu marca. Recomendamos comprar la licencia de la fuente en uso. Sin embargo, también puedes elegir una fuente similar en bibliotecas gratuitas como Google Fonts.

Se recomienda utilizar un solo tipo de fuente con grosor “Bold”, “Semibold” y “Regular”. Puedes agregar una fuente adicional para los encabezados y los títulos a fin de enriquecer visualmente la marca.

Encabezado

• Los encabezados suelen ser grandes y se utilizan 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, minúscula, con mayúscula inicial o como se escribieron originalmente.

Títulos

• Los títulos son textos con prominencia más apropiados para secciones y partes más pequeñas dentro de una página.
• 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, minúscula, con mayúscula inicial o como se escribieron originalmente.

Cuerpo

• Es el estilo más utilizado, habitualmente para todos los textos de tamaño reducido, frases completas, párrafos y botones terciarios.
• Elige un tipo de fuente que incluya los grosores “Regular”, “Semibold” y “Bold”, ya que se usan los tres.

Ten en cuenta que las fuentes deben cumplir con estos requisitos:

• Formato del archivo: OTF o TTF
• Fuente para el cuerpo del texto con grosor “Bold”, “Semibold” y “Regular”
• Fuentes adicionales para encabezados y títulos, si es necesario
• Licencia

Colores

Encabezado

Elige el color del encabezado con mucho cuidado. Dicho color debe contrastar lo suficiente con el fondo para que se pueda leer y satisfaga las normas de accesibilidad. Recomendamos utilizar el color negro en los encabezados, pero puedes elegir otro que sea oscuro.

Títulos

Presta atención también a la hora de elegir el color del título. Este debe contrastar lo suficiente con el fondo para que se pueda leer y satisfaga las normas de accesibilidad. Recomendamos utilizar el color negro en los títulos, pero puedes elegir cualquier otro que sea oscuro. En cuanto al tamaño, el título tiene un tamaño intermedio entre el encabezado y el texto del cuerpo.

1. Color del encabezado
2. Color del título

Cuerpo

Este es el estilo más utilizado, se aplica a todos los textos y párrafos pequeños. Como siempre, presta atención aquí también, ya que se deben cumplir las condiciones de contraste con el fondo y las normas de accesibilidad antes mencionadas. Asimismo, para el texto del cuerpo, debemos 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.

1. Color del cuerpo del texto 100 %
2. Color del cuerpo del texto 80 %
3. Color del cuerpo del texto 60 %
4. Color del cuerpo del texto 40 %

Pie de página

Aquí se define el color del texto del pie de página. Usa un valor que genere un buen contraste con el fondo del pie de página.