Tipografía

Descripción general

La tipografía contribuye al sentido general de organización y al propósito en las experiencias con los productos y establece la estructura jerárquica y los valores estéticos necesarios para que las interfaces de usuario sean inteligibles y sencillas de usar.

Estos principios tipográficos fundamentales se implementan en aplicaciones que utilizan el componente de tipografía de Jutro. El componente de tipografía utiliza una propiedad variant para controlar el estilo visual (por ejemplo, heading-1 y body-medium) y una propiedad tag para garantizar el HTML semántico correcto (por ejemplo, h1 y p).

Estas pautas detallan los atributos principales de la tipografía de Jutro, lo que incluye la escala y el estilo.

Escala tipográfica

La escala tipográfica de Jutro utiliza un sistema de cuadrícula de 8 puntos, en la que la mayoría de los tamaños se basan en un intervalo de 4. Los tamaños disponibles son: 56, 48, 40, 32, 24, 20, 16, 14 y 12.

Altura de línea

La altura de línea, a veces llamada interlineado, es la distancia vertical entre líneas de texto. La altura de línea adecuada es esencial para la legibilidad, ya que evita que el texto parezca demasiado abarrotado o disperso.

La tipografía de Jutro utiliza dos valores principales de altura de línea: 1,25 (o 125 %) para encabezados y 1,5 (o 150 %) para el cuerpo del texto. Estos valores garantizan una experiencia de lectura cómoda con diferentes tamaños de texto. Para líneas de texto más cortas (encabezados), se utiliza un interlineado más ajustado, mientras que para los bloques de texto más largos (cuerpo del texto) el interlineado es más generoso.

Tipo de letra de código abierto

Jutro utiliza el tipo de letra de código abierto Source Sans Pro como fuente principal. Source Sans Pro cumple con las pautas de accesibilidad al contenido web y se adapta a la configuración personalizada de fuentes del navegador.

Fuentes

Un tipo de letra puede incluir variaciones en el estilo y el espesor, como negrita, regular y cursiva. Estas variaciones se utilizan para transmitir estructura y significado a los usuarios. Por ejemplo, las fuentes en negrita distinguen los encabezados del texto del párrafo (cuerpo). La negrita también se puede usar dentro del párrafo para resaltar palabras o frases clave. Del mismo modo, las fuentes cursivas se utilizan principalmente para denotar títulos y nombres de palabras u objetos particulares, lo que les permite destacarse de la oración circundante.

Jutro ofrece las siguientes opciones de fuente para uso general.

Source Sans Pro Regular

Source Sans Pro Italic

Source Sans Pro Bold

Source Sans Pro Semibold

Source Sans Pro Semibold Italic

Implementación con tokens de diseño

La tipografía de Jutro se basa en tokens de diseño. El componente de tipografía consume estos tokens, que definen los tamaños de fuente, los espesores y las alturas de línea, para garantizar la coherencia. Este método permite la tematización y personalización de estilos tipográficos para satisfacer necesidades específicas de la marca.

Más información sobre la tematización con tokens de diseño

Ejemplo de guía tipográfica

Los siguientes ejemplos de composición y disposición se proporcionan como ejemplos de referencia de la tipografía de Jutro en aplicaciones (escritorio y móvil):

Computadora de escritorio

Dispositivo móvil

Prácticas recomendadas

• Mantenga una jerarquía tipográfica útil y uniforme basada en la estructura del contenido, lo que incluye elementos como encabezados, subtítulos, texto predeterminado (principal) y texto de rótulos.
• Utilice una cantidad mínima de tamaños, espesores y colores de fuente. En muchos casos, una simple jerarquía de tamaño es suficiente. Por ejemplo, esto puede incluir un encabezado, un tamaño predeterminado (principal), un tamaño secundario para texto menos importante y un tamaño terciario/de leyendas.
• Para una legibilidad óptima, apunte a una longitud de línea de 60 a 80 caracteres. La longitud de la línea final está determinada por varios factores, como el tipo de letra, el tamaño de la letra y el ancho del margen.
• Para garantizar la legibilidad y accesibilidad, utilice un mínimo de 16 px para el cuerpo principal del texto y las entradas de texto. Esto establece un buen estándar de legibilidad en dispositivos móviles y evita que los navegadores fuercen el zoom en los campos de entrada.
• Haga que el texto secundario, que se utiliza para elementos como rótulos y leyendas menores, sea dos tamaños más pequeño que el texto principal.
• Ajuste el tamaño de las letras según la función principal de la página:
  • En el caso de las páginas con mucho texto, utilice tamaños de letra más grandes para mejorar la legibilidad de los usuarios que pasarán mucho tiempo leyendo.
  • Para las páginas con mucha interacción, los tamaños de letra más pequeños pueden ser suficientes y pueden ayudar a compactar visualmente pantallas con gran cantidad de datos.
• Utilice tamaños de fuente más grandes para cualquier cosa que necesite ser visible.
• Evite usar texto todo en mayúsculas o utilícelo con moderación, ya que presenta problemas de legibilidad.
• Siempre mire diseños en el dispositivo real que pueda ser el preferido por los usuarios.
• Marque los tamaños de letras que sean demasiado pequeños en un teléfono móvil en las primeras fases del proceso de diseño.
• Diseñe la tipografía para que sea legible incluso en condiciones inferiores a las óptimas.

Texto e iconografía

El texto y los íconos se combinan con frecuencia para mejorar la claridad y proporcionar contexto visual. Los ejemplos comunes de esta combinación incluyen lo siguiente:

Acciones y navegación

• Enlaces con íconos
• Botones con íconos
• Elementos de navegación lateral (ícono y nombre)
• Conmutador de aplicaciones (ícono y nombre de la aplicación)
• Avatar con nombre de perfil

Elementos de formulario y visualización de datos

• Rótulos de entrada con íconos de información
• Etiquetas
• Elementos del menú en menús desplegables de selección múltiple
• Resultados de búsqueda con íconos de categoría

Estado y retroalimentación

• Mensajes de validación integrados con íconos de estado
• Cargadores integrados con mensajes de texto
• Mensajes de notificación y notificaciones del sistema
• Insignias de notificación (ícono con un número)
• Descripción emergente adjunta a los íconos

Capacidad de ser responsive y adaptabilidad

La tipografía de Jutro está diseñada para adaptarse, lo que ofrece una variedad de tamaños para satisfacer las necesidades de las aplicaciones empresariales y de consumidores en todos los dispositivos. Las aplicaciones empresariales, por ejemplo, requieren una mayor densidad de datos y se beneficiarán de una tipografía más pequeña que proporciona más espacio en la pantalla.

Accesibilidad

Validado de acuerdo con las pautas de accesibilidad de WCAG 2.1 AA que se aplican a este componente específico. Esto significa que la tipografía de Jutro puede:

• utilizarse sin ratón (solo teclado);
• utilizarse con tecnologías de asistencia que incluyen lectores de pantalla, software de ampliación de pantalla y pantallas braille;
• utilizarse sin depender del sonido, el color, la animación o el tiempo.

Prácticas recomendadas de accesibilidad

• Evite cambiar el contenido cuando un elemento reciba el foco.
• Garantice un orden lógico de navegación por teclado para todos los elementos de texto.
• No utilice texto con estilo como sustituto de un enlace, o viceversa. Los lectores de pantalla manejan estos elementos de manera diferente, lo que puede confundir a los usuarios.

Para obtener pautas específicas de creación, consulte la guía de uso de componentes de tipografía.