Principios
- Legible: utilizamos fuentes tipográficas con formas y signos fáciles de reconocer.
- Navegable: la tipografía cuenta con una estructura jerárquica que respeta la semántica HTML, permitiendo una comprensión intuitiva del contenido y su organización.
- Consistente: mantenemos un uso coherente de familias tipográficas para crear un lenguaje visual predecible que facilita la comunicación.
- Minimalista: utilizamos pesos y tamaños tipográficos de manera mesurada, optimizando el ritmo de lectura y centrando la atención en el contenido esencial.
Familias tipográficas
En Obelisco consideramos que lo más importante es el mensaje, por lo que elegimos familias tipográficas de alta legibilidad y versatilidad, y que generen cercanía con las personas usuarias.
Nunito
Es una tipografía sans-serif geométrica con formas redondeadas, diseñada para interfaces digitales con alta legibilidad.
Open Sans
Es una tipografía sans-serif humanista, optimizada para interfaces digitales con excelente legibilidad.
Roles
Para generar una jerarquía clara y minimizar las inconsistencias, asignamos a cada estilo un rol que describe su función.
Encabezados (Headings)
Los encabezados organizan y jerarquizan el contenido. Su tamaño y peso establecen un contraste que ayuda a las personas usuarias a entender la estructura de los contenidos de forma fácil y rápida.
Titulares (Titles)
Son textos descriptivos y breves que se utilizan dentro de los componentes a modo de etiqueta o título.
Cuerpo (Body)
Se usan para todos los cuerpos de lectura extensa y como principal variable texto, generalmente luego de encabezados o dentro de componentes.
Si bien Obelisco ofrece un tamaño de cuerpo XS, recomendamos no utilizarlo, porque puede presentar problemas de legibilidad para las personas usuarias. Su uso está permitido sólo en casos excepcionales o en componentes específicos.
Accesibilidad
Nuestra escala tipográfica se fundamenta en los criterios de accesibilidad de WCAG 2.2, desarrollando un sistema robusto, flexible y adaptable. Cada decisión tipográfica busca eliminar barreras de comprensión y optimizar la navegabilidad de la persona usuaria a través de la Web.
Tamaño de fuente y legibilidad
El tamaño mínimo y por defecto para los textos es de 16px. (Cuerpo/M/Regular), lo que asegura un nivel de legibilidad alto para dispositivos desktop y dispositivos mobile. No recomendamos el uso de tamaños menores a esta medida para textos corridos porque dificulta la lectura del contenido.
La tipografía debe ser escalable y no perder su propiedad responsiva cuando la persona usuaria utiliza herramientas como el zoom para ampliar el tamaño de texto (Success Criterion 1.4.4 Resize Text).
Para facilitar la percepción del texto y la identificación de bloques de contenido, los cuerpos de texto deben tener el 150 % o el 200 % de espaciado para el interlineado (Success Criterion 1.4.8 Visual Presentation).
Contraste de color
Para asegurar la legibilidad y percepción del contenido, los textos siempre deben utilizar el color de texto por defecto: $body-primary sobre fondos claros y $text-white sobre fondos oscuros.
Es posible utilizar colores que pasen el mínimo ratio de contraste de 4.5:1, que cumple con el nivel de validación de AA, pero recomendamos siempre apuntar al ratio de contraste de 7:1, que cumple con el nivel de validación de AAA (Success Criterion 1.4.3 Contrast (Minimum)).
No recomendamos utilizar textos sobre imágenes, porque dificultan la legibilidad.
Consistencia y jerarquía visual
Utilizamos los estilos tipográficos para encabezados, subtítulos y cuerpos de texto con una clara progresión visual. Esto ayuda a mejorar la estructura visual y la comprensión del contenido en todos los niveles, priorizando el Success Criterion 2.4.10 Section Headings.
Para asegurar el uso correcto de la tipografía con una experiencia accesible, identificamos los encabezados utilizando la escala de H's, de H1 a H6. No deben saltarse niveles al trabajar con la escala progresiva de jerarquías; si tenemos un H1, el siguiente H debe ser H2 y no un H3, H4 o cualquier otra etiqueta que no siga el orden semántico. Solamente se puede utilizar un H1 por página.
Uso
Pesos tipográficos
Utilizamos diferentes pesos para jerarquizar y enfatizar contenido, generando un orden de lectura basado en títulos, subtítulos y párrafos de texto; además, los pesos tipográficos se pueden utilizar dentro de párrafos de texto para destacar contenido de interés.
Dentro de nuestra escala tipográfica utilizamos regular, semibold y bold como los únicos pesos con los que pueden trabajar dentro de Obelisco. Cada uno de los tamaños de la escala tiene un peso predeterminado:
- Los tamaños de Cuerpo (Body) utilizan regular como peso predeterminado.
- Los tamaños de Titulares (Titles), Titulares/M y Titulares/S, utilizan semibold como peso predeterminado, mientras que los Titulares/L utilizan bold como peso predeterminado.
- Todos los H’s utilizan semibold como peso predeterminado, excepto por los H1, que utilizan bold como peso predeterminado.
Negrita (Bold)
Se usa para destacar términos clave. Evitá abusar de este estilo para no afectar la legibilidad ni la accesibilidad. No lo uses en bajadas, citas o enlaces.
Semi-negrita (Semibold)
Este peso es ligeramente más grueso que el regular. Se usa para destacar elementos clave como títulos, subtítulos y llamadas a la acción.
Regular (Regular)
Este es el peso tipográfico base que utilizamos para la mayoría del texto.
Formato
Utilizamos diferentes formatos de texto para añadir claridad o enfatizar un mensaje. Para más información sobre usos y convenciones, podés consultar nuestra guía de contenidos.
Cursiva (Italic)
Se usa para dar énfasis o señalar términos poco familiares, como extranjerismos o jerga. Se permite en subtítulos y cuerpos de texto.
Subrayado (Underline)
Está disponible para dar énfasis en un texto, pero se desaconseja su uso porque puede generar confusión con los enlaces.
Alineación
Siempre alineamos los textos a la izquierda. No utilizamos párrafos justificados o alineados a la derecha, ya que conllevan problemas de legibilidad y accesibilidad, especialmente para personas usuarias con dificultades cognitivas o dislexia. No recomendamos el uso de sangrías.
Ancho máximo de párrafo por línea
Los párrafos con líneas de texto muy extensas o muy cortas afectan el ritmo de lectura. En promedio, un bloque de texto debe tener un ancho de entre 70 y 100 caracteres.
Los títulos, subtítulos, y bajadas, deben ser lo más cortos y concisos posibles. Utilizamos técnicas de diseño responsivo para asegurar que se mantenga una extensión de línea óptima en diferentes dispositivos.
El ancho máximo en desktop para un contenedor con texto corrido es de 8 columnas, mientras que en dispositivos tablet y mobile el bloque debe ocupar el 100 % del contenedor disponible.
