--- title: "Tokens de la escala tipográfica" description: "Todos los estilos de texto por nivel, con una muestra en vivo, sus métricas resueltas y el peso que toman con énfasis." url: "https://tanrei.chnotchy.com/es/tokens/typescale/" last_updated: 2026-10-23T17:33:05.000Z --- # Tokens de la escala tipográfica > Todos los estilos de texto por nivel, con una muestra en vivo, sus métricas resueltas y el peso que toman con énfasis. Las muestras se componen con las propiedades personalizadas de CSS generadas, así que lo que ves es lo que distribuye `@tanrei/web`. Cada rol expone sus partes como propiedades separadas: `-font-family`, `-font-size`, `-line-height`, `-font-weight`, `-letter-spacing` y `-font-weight-emphasized`, además de una forma abreviada `-font`. Para las pautas de uso (qué rol es un `h2` o un `p`, y por qué el énfasis es un peso y no un rol), lee [Tipografía](https://tanrei.chnotchy.com/es/foundations/typography/). ## Los dieciséis roles `body` 14px / 22px · 400 (con énfasis 500) · 0 Limpio y bien formado 端麗 `body-large` 16px / 26px · 400 (con énfasis 500) · 0 Limpio y bien formado 端麗 `body-small` 13px / 20px · 400 (con énfasis 500) · +0.005em Limpio y bien formado 端麗 `caption` 11px / 16px · 500 (con énfasis 600) · +0.02em Limpio y bien formado 端麗 `code` 13px / 20px · 400 (con énfasis 500) · 0 const tanrei = 端麗; `code-small` 12px / 16px · 400 (con énfasis 500) · 0 const tanrei = 端麗; `display` 48px / 52px · 450 (con énfasis 550) · -0.04em Limpio y bien formado 端麗 `eyebrow` 12px / 16px · 500 (con énfasis 600) · +0.08em Design tokens `heading-1` 32px / 40px · 500 (con énfasis 600) · -0.03em Limpio y bien formado 端麗 `heading-2` 24px / 32px · 500 (con énfasis 600) · -0.025em Limpio y bien formado 端麗 `heading-3` 20px / 28px · 500 (con énfasis 600) · -0.02em Limpio y bien formado 端麗 `heading-4` 18px / 26px · 500 (con énfasis 600) · -0.015em Limpio y bien formado 端麗 `heading-5` 16px / 24px · 500 (con énfasis 600) · -0.01em Limpio y bien formado 端麗 `heading-6` 14px / 20px · 500 (con énfasis 600) · 0 Limpio y bien formado 端麗 `label` 14px / 20px · 500 (con énfasis 600) · 0 Limpio y bien formado 端麗 `label-small` 12px / 16px · 500 (con énfasis 600) · +0.01em Limpio y bien formado 端麗 | Token | Familia | Tamaño | Interlineado | Peso | Peso con énfasis | Espaciado entre letras | | --- | --- | --- | --- | --- | --- | --- | | `--tanrei-sys-typescale-body` | Inter | 14px | 1.5714 | 400 | 500 | 0px | | `--tanrei-sys-typescale-body-large` | Inter | 16px | 1.625 | 400 | 500 | 0px | | `--tanrei-sys-typescale-body-small` | Inter | 13px | 1.5385 | 400 | 500 | 0.065px | | `--tanrei-sys-typescale-caption` | Inter | 11px | 1.4545 | 500 | 600 | 0.22px | | `--tanrei-sys-typescale-code` | Roboto Mono | 13px | 1.5385 | 400 | 500 | 0px | | `--tanrei-sys-typescale-code-small` | Roboto Mono | 12px | 1.3333 | 400 | 500 | 0px | | `--tanrei-sys-typescale-display` | Inter | 48px | 1.0833 | 450 | 550 | -1.92px | | `--tanrei-sys-typescale-eyebrow` | Inter | 12px | 1.3333 | 500 | 600 | 0.96px | | `--tanrei-sys-typescale-heading-1` | Inter | 32px | 1.25 | 500 | 600 | -0.96px | | `--tanrei-sys-typescale-heading-2` | Inter | 24px | 1.3333 | 500 | 600 | -0.6px | | `--tanrei-sys-typescale-heading-3` | Inter | 20px | 1.4 | 500 | 600 | -0.4px | | `--tanrei-sys-typescale-heading-4` | Inter | 18px | 1.4444 | 500 | 600 | -0.27px | | `--tanrei-sys-typescale-heading-5` | Inter | 16px | 1.5 | 500 | 600 | -0.16px | | `--tanrei-sys-typescale-heading-6` | Inter | 14px | 1.4286 | 500 | 600 | 0px | | `--tanrei-sys-typescale-label` | Inter | 14px | 1.4286 | 500 | 600 | 0px | | `--tanrei-sys-typescale-label-small` | Inter | 12px | 1.3333 | 500 | 600 | 0.12px | Generado a partir de `design/tokens/tanrei.light.tokens.json`, `tokens/sys/typescale.tokens.json` ## Pasos de énfasis El texto con énfasis es el rol con su peso más el paso de su familia. La familia de un rol es el primer segmento de su nombre; `caption`, `code`, `code-small` y `eyebrow` toman el paso de las etiquetas. Los cuatro pasos, por sistema incluido: | Sistema de diseño | `emphasis.display` | `emphasis.heading` | `emphasis.body` | `emphasis.label` | | --- | --- | --- | --- | --- | | `tanrei` | 100 | 100 | 100 | 100 | | `cupertino` | 100 | 200 | 200 | 200 | | `m3-expressive-like` | 100 | 100 | 100 | 200 | | `m3-like` | 100 | 100 | 100 | 200 | Generado a partir de `tokens/systems/*.system.json`, `design/tokens//tanrei.light.tokens.json`