Saltar al contenido principal

Tipografía

Tipografía en Storybook

Uso​

Descripción general​

El componente de tipografía es un elemento fundamental del sistema de diseño que garantiza un renderizado del texto uniforme y semánticamente correcto. Separa la apariencia visual (definida por variant) del significado semántico (definido por tag), lo que proporciona flexibilidad a la vez que mantiene la accesibilidad.

Propiedades clave:

  • variant: Controla el estilo visual del texto, como el tamaño de la fuente, el espesor, la altura de línea y el color. Algunos ejemplos incluyen heading-1, heading-2, body-large y label-medium.
  • tag: Invalida el elemento semántico HTML subyacente para garantizar la estructura adecuada y la accesibilidad del documento. Algunos ejemplos incluyen h1, h2, p y span.

De forma predeterminada, cada variante está asociada a una etiqueta HTML específica. Sin embargo, la propiedad tag permite anular este valor predeterminado. Esto le brinda la flexibilidad de ajustar la prominencia visual del texto mientras mantiene una estructura semántica lógica. Por ejemplo, puede hacer que un título sea visualmente sutil sin cambiar su importancia estructural.

Para obtener una lista completa de las etiquetas predeterminadas, consulte las tablas de opciones de variantes. Para obtener más ejemplos de esta técnica, consulte la sección Separación entre el estilo y la semántica.

Cuándo se debe utilizar​

Utilice el componente de tipografía para todos los elementos de texto dentro de la aplicación:

  • Encabezados: Para títulos y encabezados de sección.
    • Ejemplo: Utilice una variante de encabezado, como heading-1.
  • Cuerpo: Para párrafos y otro contenido de formato largo.
    • Ejemplo: Use una variante de cuerpo, como body-medium.
  • Rótulos: Para texto descriptivo más corto, como rótulos de campos de formulario.
    • Ejemplo: Utilice una variante de rótulo, como label-small.
  • Antetítulo: Para texto introductorio que se encuentra encima de un encabezado principal para proporcionar contexto.
    • Ejemplo: Usa una variante de antetítulo, como eyebrow-1.
  • Sección destacada: Para texto grande y de gran impacto en secciones destacadas o titulares de marketing.
    • Ejemplo: Use una variante de sección destacada, como hero-1.
  • Bloque de cita: Para dar estilo al texto que se cita de una fuente externa.
    • Ejemplo: Use una variante de bloque de cita, como blockquote-medium.
  • Leyenda: Para texto descriptivo que acompaña a imágenes o figuras.
    • Ejemplo: Use una variante de figcaption, como figcaption-medium.
  • Código: Para mostrar fragmentos de código integrados o al nivel de bloque.
    • Ejemplo: Utilice una variante de código, como code-medium.
  • Cualquier texto que requiera un estilo uniforme y un significado semántico.

Cuándo no se debe utilizar​

Evite utilizar el componente de tipografía para elementos independientes cuya función principal sea un botón o un enlace. En su lugar, utilice los componentes específicos Button o Link , que están diseñados para manejar correctamente los estados interactivos, la gestión del foco y los roles de accesibilidad.

Ejemplo de uso​

Formulario web con leyendas numeradas que identifican ejemplos de diferentes estilos de tipografía.

  1. Variante de sección destacada: Este es el titular principal de la página.
  2. Variante de antetítulo: Este texto proporciona contexto para el encabezado que se encuentra debajo.
  3. Variante de encabezado (título de la sección): Este heading-2 funciona como el encabezado principal de la sección “Agregar un conductor”.
  4. Variante de encabezado (título de subsección): Se trata de separar el estilo visual del significado semántico. El texto es visualmente más pequeño que el encabezado de la sección principal (mediante el uso de una variante heading-4), pero está marcado como h3 para crear una estructura anidada correcta para lectores de pantalla (h2 → h3).
  5. Variante del cuerpo: Es un párrafo estándar que proporciona texto instructivo.
  6. Variante de rótulo: Este texto describe una entrada de formulario.

Separación entre el estilo y la semántica​

En los ejemplos siguientes se muestra cómo utilizar las propiedades variant y tag para crear una apariencia visual diferente de la estructura semántica subyacente del texto.

Ejemplo: Encabezado de sección sutil​

Resulta útil cuando un encabezado es semánticamente necesario para el esquema del documento, pero debe ser visualmente discreto.

  • **Variante: ** body-medium
  • **Etiqueta: ** h2
  • Justificación: Este encabezado es semánticamente importante para los lectores de pantalla que navegan por la estructura de la página, pero la variante body-medium hace que se mezcle visualmente con el texto del párrafo, lo que evita prominencias innecesarias.

En el siguiente ejemplo, se demuestra este principio en la práctica:

Ejemplo: Cita visualmente destacada​

Se utiliza para texto que necesita un alto impacto visual, pero que no es un encabezado estructural.

  • **Variante: ** heading-3
  • **Etiqueta: ** blockquote
  • Justificación: Aquí, a un bloque de cita se le da el peso visual de un heading-3 para que se destaque. El uso de la etiqueta blockquote garantiza que la tecnología de asistencia la lea correctamente como una cita, en lugar de incorrectamente como un encabezado de sección estructural.

En el siguiente ejemplo, se demuestra este principio en la práctica:

Pautas generales​

  • Mantenga la jerarquía: Utilice siempre los encabezados (h1 a h6) en un orden lógico y anidado. Un h2 debe seguir a un h1, y un h3 debe seguir a un h2, incluso si la variante visual es diferente. No omita los niveles de encabezado (por ejemplo, h1 seguido directamente por h4).
  • Corrección semántica: Priorice la propiedad etiqueta para la precisión semántica. La variante sirve para la presentación visual; la etiqueta, para el significado.
  • Uniformidad: Utilice los valores de variante predefinidos de forma uniforme en toda la aplicación para mantener un lenguaje visual coherente.

Contenido​

Pautas generales de redacción​

  • Claridad y concisión: Escriba con claridad y vaya directo al grano. Evite las jergas y las oraciones demasiado complejas.
  • Voz activa: Priorice la voz activa por sobre la voz pasiva para una comunicación más efectiva y directa.
  • Lenguaje sencillo: Utilice un lenguaje que sea fácil de entender para el público objetivo.
  • Coherencia terminológica: Utilice términos coherentes para las funciones, las acciones y los conceptos en toda la aplicación.
  • Tono: Mantener un tono de voz coherente y apropiado que se ajuste a nuestra marca. Para obtener más información, consulte Voz y tono.
  • Corrección: Revise siempre el texto en busca de errores gramaticales, ortográficos y tipográficos.
  • Textos breves: Preste atención a pequeños fragmentos de texto como rótulos de botones, mensajes de error y descripciones emergentes. Son cruciales para la experiencia del usuario.

Accesibilidad​

Cumplimiento de las pautas para los componentes​

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

  • La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
  • El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
  • El elemento se puede operar con teclado, así como con mouse.
  • Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Pautas específicas de creación​

HTML semántico (propiedad de etiqueta): Es el aspecto más crítico para la accesibilidad. Los lectores de pantalla y otras tecnologías de asistencia dependen de las etiquetas HTML semánticas (por ejemplo, h1-h6, p y blockquote) para comprender la estructura y el significado del contenido. Elija siempre la etiqueta más adecuada para la función del contenido.

Jerarquía de encabezado: Asegúrese de tener una estructura de encabezas lógica (por ejemplo, h1 seguido de h2, no h4). Esto permite a los usuarios de lectores de pantalla navegar por el contenido de manera eficiente. Para obtener una guía más detallada, consulte el tutorial de W3C sobre encabezados.

Tematización​

El componente de tipografía hereda sus estilos del tema de la aplicación de manera predeterminada. Sin embargo, puede personalizar elementos tipográficos como el color, las familias de fuentes y la escala de tamaños y espesores para satisfacer necesidades específicas de la marca.

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