Tipografía online
En soportes digitales
A diferencia de los medios impresos, en los entornos digitales debe adaptarse a distintos dispositivos y resoluciones, manteniendo legibilidad y consistencia. En esta sección, abordamos cómo los estilos tipográficos de UTEF se implementan en soportes digitales para garantizar una presencia coherente y eficaz en cualquier plataforma.
Estilos de texto
Una escala tipográfica es un conjunto de estilos de fuente que se aplican de manera coherente en todo nuestro sistema de diseño digital, ofreciendo versatilidad sin perder uniformidad visual.
La escala tipográfica de UTEF se organiza en cuatro grandes grupos de estilos: Heading, Highlight, Body y Component, cada uno con funciones y objetivos específicos. Estos estilos se definen mediante la asignación de tamaños (XL, LG, MD, SM, XS), pesos tipográficos (Bold, SemiBold, Regular, Italic) y el uso de mayúsculas o minúsculas (case), cuidadosamente seleccionados para diferentes aplicaciones.
Heading
La propiedad interlineado (line-height) en un sistema de diseño define la altura de la línea entre las líneas de texto, y es crucial para la legibilidad y el espaciado en las interfaces.
Es un valor relativo de la fuente actual. Este método es flexible y ajusta automáticamente el espaciado en función del tamaño de la fuente.
| Nomenclatura | Tamaño | Familia tipográfica | Pesos | Title | Line height |
|---|---|---|---|---|---|
Heading 4XL | 170 px | DM Serif Display | Italic | As typed | 1.1 |
Heading 3XL | 126 px | DM Serif Display | Italic | As typed | 1.1 |
Heading 2XL | 80 px | DM Serif Display | Italic | As typed | 1.1 |
Heading XL | 54 px | DM Serif Display | Italic | As typed | 1.1 |
Heading LG | 48 px | DM Serif Display | Italic | As typed | 1.1 |
Heading MD | 24 px | DM Serif Display | Italic | As typed | 1.1 |
Heading SM | 24 px | DM Serif Display | Italic | As typed | 1.1 |
Heading XS | 20 px | DM Serif Display | Italic | As typed | 1.1 |
Jerarquía de heading
Evita el uso de oraciones excesivamente largas o complejas. Escribe frases directas que faciliten la comprensión y retención de la información.
Cada párrafo debe desarrollar una sola idea o tema. Los párrafos cortos son más fáciles de leer, especialmente en dispositivos móviles.
A menos que el público sea especializado, utiliza un lenguaje claro y accesible, sin abusar de términos complejos o jerga.
Buen uso
La jerarquía de texto se respeta.
Mal uso
Evitar utilizar más de un Heading de primer orden.
Highlight
Los estilos Highlight se utilizan para destacar contenido importante o atraer la atención del usuario hacia información clave.
Se aplica a secciones específicas que requieren un enfoque especial dentro de la interfaz de usuario.
La tabla muestra los estilos aplicados en pantallas grandes (Big Screen). Para consultar los estilos en formatos más pequeños, visita el Design System de UTEF en Figma. Solo el tamaño variará, mientras que el resto de las características se mantendrán sin cambios.
| Nomenclatura | Tamaño | Familia tipográfica | Pesos | Case | Line height |
|---|---|---|---|---|---|
Highlight XL | 170 px | DM Serif Display | Italic | As typed | 1.3 |
Highlight L | 126 px | DM Serif Display | Italic | As typed | 1.3 |
Highlight M | 80 px | DM Serif Display | Italic | As typed | 1.3 |
Highlight S | 54 px | DM Serif Display | Italic | As typed | 1.3 |
Destacando textos
Guiar al usuario hacia interacciones prioritarias o pasos clave en un flujo. El uso de Highlight debe ser controlado para evitar la sobresaturación y mantener una jerarquía visual clara.
Estilo highlight en tarjetas
Utilizado en tarjetas con información relevante.
Estilo highlight en cifras
Ponemos el foco solo en la información importante.
Body
Utilice el cuerpo de texto para el contenido principal.
Suelen aparecer después de los títulos o subtítulos como descripciones y mensajes detallados, pero también como texto independiente en los componentes, por ejemplo como texto adicional.
La tabla muestra los estilos aplicados en pantallas grandes (Big Screen). Para consultar los estilos en formatos más pequeños, visita el Design System de UTEF en Figma. Solo el tamaño variará, mientras que el resto de las características se mantendrán sin cambios.
| Nomenclatura | Tamaño | Familia tipográfica | Pesos | Case | Line height |
|---|---|---|---|---|---|
Body lead XL | 24 px | DM Sans | Regular | As typed | 1.5 |
Body lead | 20 px | DM Sans | Regular | As typed | 1.5 |
Body default | 18 px | DM Sans | Regular | As typed | 1.5 |
Body default bold | 18 px | DM Sans | Bold | As typed | 1.5 |
Body additional | 18 px | DM Sans | Bold | As typed | 1.5 |
Body inline italic | 16 px | DM Sans | Italic | As typed | 1.3 |
Body inline SM | 14 px | DM Sans | Regular | As typed | 1.3 |
Body inline SM semibold | 14 px | DM Sans | Semibold | As typed | 1.3 |
Body inline XS | 12 px | DM Sans | Regular | As typed | 1.3 |
Textos de cuerpo en párrafos fáciles de leer
Evita el uso de oraciones Utiliza los encabezados (Headings) de manera adecuada, asegurando que cada sección tenga un único encabezado principal. Verifica que el orden de lectura respete la jerarquía de importancia, garantizando que el contenido fluya de manera clara y lógica. Esto facilita la comprensión y la navegación dentro de la página.
Texto body en una card
Utiliza un lenguaje claro y conciso de fácil lectura.
Texto body en subtítulo
Apoya al título en un segundo orden.
Components
Son estilos más pequeños y utilitarios, utilizados para casos como el texto dentro de los componentes (Label, menu y extras) o para texto muy pequeño en el cuerpo del contenido, como los pies de foto.
Los estilos de label se aplican a elementos de etiquetado, proporcionando una apariencia clara y funcional. Los estilos de menu se utilizan en el header y en elementos desplegables que requieren un interlineado más reducido. El estilo de quote es una variante de mayor tamaño que se distingue de los estilos de heading por el uso de la tipografía DM Sans.
La tabla muestra los estilos aplicados en pantallas grandes (Big Screen). Para consultar los estilos en formatos más pequeños, visita el Design System de UTEF en Figma. Solo el tamaño variará, mientras que el resto de las características se mantendrán sin cambios.
| Nomenclatura | Tamaño | Familia tipográfica | Pesos | Case | Line height |
|---|---|---|---|---|---|
Label button MD | 16 px | DM Sans | Bold | Uppercase | 1.3 |
Label button SM | 14 px | DM Sans | Bold | Uppercase | 1.3 |
Label button text | 16 px | DM Sans | Bold | As typed | 1.3 |
Menu LG | 18 px | DM Sans | Bold | As typed | 1.3 |
Menu MD | 16 px | DM Sans | Regular | As typed | 1.3 |
Menu SM | 14 px | DM Sans | Regular | As typed | 1.3 |
Quote | 40 px | DM Sans | Italic | As typed | 1.3 |
Breadcrumb | 12 px | DM Sans | Regular | As typed | 1.3 |
Uso de mayúsculas en el componente botón
El componente button (botón) utiliza los estilos 'Label Button MD' y 'Label Button SM' con texto en mayúsculas (Uppercase), aplicándose a los botones primarios, secundarios y terciarios.
Para el link (enlace), se emplea el estilo 'Label Button Text', con solo la primera letra en mayúscula.
Componente button
Uso de uppercase en los componentes button.
Componente Link
En este caso se utiliza mayúscula en la primer letra.
Line height
La propiedad de interlineado (line-height) en un sistema de diseño define la altura de la línea entre las líneas de texto, y es crucial para la legibilidad y el espaciado en las interfaces.
Es un valor relativo de la fuente actual. Este método es flexible y ajusta automáticamente el espaciado en función del tamaño de la fuente.
Heading y Highlight
Un adecuado espaciado entre textos no solo mejora la legibilidad, sino que también ayuda a guiar al lector a través del contenido, creando una experiencia más fluida y atractiva.
En los estilos de highlight se utiliza el multiplicador 1.3 por la altura del texto.
Body
En los textos de body utilizamos el multiplicador 1.5 por la altura del texto. En los párrafos esta altura proporciona un espaciado óptimo que mejora la legibilidad y facilita la lectura en bloques de texto largos.
Cuando el texto de body va en una sola línea utilizamos un line height de 1.3.
Espaciado entre textos
Un adecuado espaciado entre textos no solo mejora la legibilidad, sino que también ayuda a guiar al lector a través del contenido, creando una experiencia más fluida y atractiva.
Big screen, desktop y tablet
En los textos de introducción utilizamos:
Entre el texto adicional y el título 8 px
Entre el título y el subtítulo 32 px
Entre el subtítulo y el detalle 32 px
Mobile
Sin embargo en artefactos de formatos más pequeños reducimos algunos de estos márgenes:
Entre el texto adicional y el título 8 px
Entre el título y el subtítulo 24 px
Entre el subtítulo y el detalle 16 px
Listas
Las listas son un recurso fundamental en una interfaz de usuario debido a su capacidad para organizar y presentar información de manera clara y estructurada.
Lista con iconos
Establecemos estándares que se mantendrán a través de las pantallas y darán uniformidad.
Lista con viñetas
En UTEF, utilizamos viñetas sin sangría para lograr una presentación más limpia y directa. Este formato permite que la información sea clara y fácilmente legible, alineando los puntos con el margen izquierdo para mantener la coherencia visual y optimizar el espacio en nuestros contenidos.
Ejemplos de composición
Las listas son un recurso fundamental en una interfaz de usuario debido a su capacidad para organizar y presentar información de manera clara y estructurada.
Hero
Los heros lideran la jerarquía visual de la página, introduciendo el contenido de manera clara y atractiva. El título principal utiliza el estilo Heading 3XL, destacándose con tipografía grande y visible, mientras que el texto introductorio, en estilo Body Lead, ofrece una lectura rápida y concisa que permite al usuario comprender de inmediato el propósito de la página.
Entre el título y el subtítulo, mantenemos una separación consistente de 32 px en todas las resoluciones de pantalla, exceptuando la vista móvil, donde la separación se ajusta a 16 px para optimizar el uso del espacio y la legibilidad en dispositivos más pequeños.
Introducción
En el módulo Card Collection, se puede observar la introducción con sus diferentes estilos tipográficos. Esta introducción proporciona un contenido detallado que anticipa la información principal de manera clara y concisa, y aparece en la mayoría de los módulos. En estos casos, la introducción ocupa un rol secundario en la jerarquía visual, optimizando el escaneo rápido del contenido. El título utiliza el estilo Heading LG, con un tamaño más reducido, mientras que el cuerpo del texto se presenta en el estilo Body Default, asegurando una lectura fluida y accesible.
Guía de implementación de la tipografía
Recursos tipográficos
En los links habilitados a continuación, podrás descargar las familias tipográficas anteriormente mencionadas con todos los pesos que se incluyen en este sistema de diseño.