Tipografía
La tipografía organiza el contenido y facilita su lectura, estableciendo diferencias claras entre títulos, textos, etiquetas y otros niveles de información.
Familias tipográficas
El sistema utiliza Roboto como familia principal para textos y encabezados. También incorpora Roboto Slab como una alternativa para encabezados que requieran un carácter más editorial.
El uso consistente de estas familias contribuye a mantener una identidad reconocible y una experiencia de lectura uniforme entre distintos servicios digitales.
Pesos tipográficos
Los pesos permiten establecer énfasis y diferenciar niveles de información sin depender únicamente del tamaño. El sistema contempla variantes regular, medium y bold para responder a distintos grados de jerarquía.
Escala tipográfica
La escala reúne tamaños e interlineados que pueden combinarse para construir títulos, textos de lectura, etiquetas y contenidos de apoyo. Sobre esta base se definen los estilos tipográficos que se utilizan en los componentes y páginas.
Estilos tipográficos
El sistema cuenta con un conjunto de estilos predefinidos y listos para usar en títulos, textos de cuerpo, enlaces y otros roles de la interfaz.
Estos estilos combinan los tokens de familia, peso, tamaño e interlineado para ofrecer una jerarquía clara entre los contenidos. Su uso evita crear definiciones tipográficas particulares en cada proyecto y mantiene una experiencia de lectura consistente en los distintos servicios digitales.
Cada muestra indica debajo los tokens que la componen.
Encabezados
Tamaño y peso de h1–h4 y .h1–.h4, en su familia sans-serif.
| Token | Variable | Móvil | Escritorio |
|---|---|---|---|
Heading XL h1 / .h1 | --font-heading-xl-size | 2rem | 3rem |
--font-heading-xl-weight | 400 | 700 | |
Heading L h2 / .h2 | --font-heading-l-size | 1.5rem | 2.25rem |
--font-heading-l-weight | 500 | 500 | |
Heading M h3 / .h3 | --font-heading-m-size | 1.125rem | 2rem |
--font-heading-m-weight | 500 | 500 | |
Heading S h4 / .h4 | --font-heading-s-size | 1rem | 1.6rem |
--font-heading-s-weight | 500 | 500 |
Encabezados serif
Tamaño y peso de la variante .h1--serif–.h4--serif. Solo el paso XL cambia entre móvil y escritorio.
| Token | Variable | Móvil | Escritorio |
|---|---|---|---|
Heading XL serif .h1--serif | --font-serif-heading-xl-size | 2rem | 3rem |
--font-serif-heading-xl-weight | 400 | 400 | |
Heading L serif .h2--serif | --font-serif-heading-l-size | 2.25rem | 2.25rem |
--font-serif-heading-l-weight | 500 | 500 | |
Heading M serif .h3--serif | --font-serif-heading-m-size | 2rem | 2rem |
--font-serif-heading-m-weight | 500 | 500 | |
Heading S serif .h4--serif | --font-serif-heading-s-size | 1.6rem | 1.6rem |
--font-serif-heading-s-weight | 500 | 500 |
Cuerpo
Tamaño y peso de párrafos y texto de apoyo.
| Token | Variable | Móvil | Escritorio |
|---|---|---|---|
Body L .p | --font-body-l-size | 1.125rem | 1.5rem |
--font-body-l-weight | 500 | 400 | |
Body M body / .body-m | --font-body-m-size | 1rem | 1.1875rem |
--font-body-m-weight | 400 | 400 | |
Body S .body-s | --font-body-s-size | 0.875rem | 1rem |
--font-body-s-weight | 400 | 400 | |
Body XS .body-xs | --font-body-xs-size | 0.75rem | 0.875rem |
--font-body-xs-weight | 400 | 400 |
Botones y enlaces
Tamaño y peso de las etiquetas de botón y de los enlaces de texto (.cl-button, .body-link).
| Token | Variable | Móvil | Escritorio |
|---|---|---|---|
.body-button | --font-body-button-size | 1rem | 1.1875rem |
--font-body-button-weight | 500 | 500 | |
.body-button-small | --font-body-button-small-size | 1rem | 1rem |
--font-body-button-small-weight | 500 | 500 | |
Enlace .body-link | --font-body-link-size | 1rem | 1.1875rem |
--font-body-link-weight | 500 | 500 | |
Enlace pequeño .body-link-small | --font-body-link-small-size | 0.875rem | 1rem |
--font-body-link-small-weight | 400 | 400 |
Los tokens de tipografía definen qué familia, peso, tamaño e interlineado usar según el rol del texto: encabezado, cuerpo, botón o enlace. Los de encabezado y cuerpo se adaptan automáticamente entre móvil y escritorio.
Cada muestra indica debajo los tokens que la componen.
Base
Familias tipográficas, interlineado y peso en negrita usados como base de encabezados y cuerpo. No varían entre móvil y escritorio.
| Token | Variable | Móvil | Escritorio |
|---|---|---|---|
Familia base | --font-family | Roboto, sans-serif | Roboto, sans-serif |
Familia de encabezados | --font-family-heading | Roboto, sans-serif | Roboto, sans-serif |
Familia de encabezados serif | --font-family-heading-serif | Roboto Slab, serif | Roboto Slab, serif |
Interlineado base | --font-line-height | 1.5 | 1.5 |
Peso en negrita | --font-weight-bold | 700 | 700 |
Familias tipográficas
Roboto es la familia por defecto para cuerpo y encabezados. Roboto Slab es la variante serif disponible para encabezados.
| Estilo | Muestra | Tokens |
|---|---|---|
Roboto: sans-serif Texto de cuerpo y encabezados por defecto | Trámites y servicios digitales | --font-family-roboto |
Roboto Slab: serif Variante para encabezados | Trámites y servicios digitales | --font-family-roboto-slab |
Pesos
Tres pesos disponibles en Roboto, usados para dar énfasis dentro de un mismo tamaño.
| Estilo | Muestra | Tokens |
|---|---|---|
Regular: 400 | Accesible, claro y consistente | --font-weight-regular |
Medium: 500 | Accesible, claro y consistente | --font-weight-medium |
Bold: 700 | Accesible, claro y consistente | --font-weight-bold |
Escala de tamaños
Trece pasos de tamaño con su interlineado asociado. Es la base sobre la que se construyen los tokens de encabezado y cuerpo.
| Estilo | Muestra | Tokens |
|---|---|---|
xs 12px, interlineado 16px | Aa | --font-size-xs--font-line-height-xs |
sm 14px, interlineado 20px | Aa | --font-size-sm--font-line-height-sm |
md 16px, interlineado 24px | Aa | --font-size-md--font-line-height-md |
lg 18px, interlineado 28px | Aa | --font-size-lg--font-line-height-lg |
xl 20px, interlineado 32px | Aa | --font-size-xl--font-line-height-xl |
2xl 24px, interlineado 36px | Aa | --font-size-2xl--font-line-height-2xl |
3xl 32px, interlineado 48px | Aa | --font-size-3xl--font-line-height-3xl |
4xl 36px, interlineado 52px | Aa | --font-size-4xl--font-line-height-4xl |
5xl 48px, interlineado 72px | Aa | --font-size-5xl--font-line-height-5xl |
6xl 60px, interlineado 86px | Aa | --font-size-6xl--font-line-height-6xl |
7xl 72px, interlineado 108px | Aa | --font-size-7xl--font-line-height-7xl |
8xl 96px, interlineado 144px | Aa | --font-size-8xl--font-line-height-8xl |
9xl 128px, interlineado 192px | Aa | --font-size-9xl--font-line-height-9xl |
Última actualización: Septiembre de 2026