cis-style · hub

kit v9 · f417275 · tipografía

Tipografía

Dos familias y ninguna más: IBM Plex Sans para leer, JetBrains Mono para datos duros y etiquetas. Ambas self-hosted en style.innovacionsantiago.cl; el kit no toca ningún CDN externo.

Todos los tamaños de esta página se rinden con las variables reales del kit, no con copias en px: si el kit cambia, esta página cambia sola.

Las dos familias

REGLA · Declara la familia solo vía var(--font-sans) y var(--font-mono). Nunca escribas el nombre de la fuente en el CSS de un componente: el token es el único punto de verdad (checklist de typography-001).
IBM Plex Sans
var(--font-sans)
voz principal: prosa y UI
El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío, añoraba a su querido cachorro. ¿Quién? 0123456789
JetBrains Mono
var(--font-mono)
voz secundaria: datos y etiquetas
RUT 78.384.591-1 · SHA f417275c · :8267 · 2026-08-20 · $1.215.716
body   { font-family: var(--font-sans); }  /* ya lo fija base/tokens.css */
.stat__value, .eyebrow, code { font-family: var(--font-mono); }

Pesos de IBM Plex Sans

SERVIDOS · 400, 500, 600 y 700. El peso 800 está declarado en el @font-face pero sirve el archivo Bold: IBM no publica un ExtraBold de Plex Sans, así que 800 y 700 se ven iguales por diseño (nota en fonts/css/ibm-plex-sans.css). No pidas 300 ni pesos intermedios: el browser fabrica un falso peso sintetizado.
400 · Regular
body, párrafos, listas
Transparencia del gasto público chileno
500 · Medium
labels de formulario, captions con énfasis suave
Transparencia del gasto público chileno
600 · SemiBold
títulos de sección (h2, h3)
Transparencia del gasto público chileno
700 · Bold
strong, links activos, lockups secundarios
Transparencia del gasto público chileno
800 · sirve Bold
hero, wordmark, cifras grandes
Transparencia del gasto público chileno
/* uso semántico de pesos (ADR-021 · typography-001) */
p, li            { font-weight: 400; }
.field label     { font-weight: 500; }
h2, h3           { font-weight: 600; }
strong, b        { font-weight: 700; }
.hero, .wordmark { font-weight: 800; }  /* rinde el archivo Bold */

Pesos de JetBrains Mono

SERVIDOS · 400, 500 y 700. No existe 600: si lo pides, el browser sintetiza uno falso. Elige siempre uno de los tres.
400 · Regular
code, pre, IDs, hashes, dashboards
f417275cbb1c390a · vault list cis-style
500 · Medium
kbd, valores tabulares destacados
f417275cbb1c390a · vault list cis-style
700 · Bold
cifras de stat, headings mono (raros)
f417275cbb1c390a · vault list cis-style
code, pre     { font: 400 12.5px var(--font-mono); }
kbd           { font-weight: 500; }
.stat__value  { font-weight: 700; }   /* components.css ya lo trae */

La escala tipográfica

REGLA · Siete tamaños, todos tokens de base/tokens.css. Ningún font-size suelto: si tu diseño necesita un octavo tamaño, primero discute el token. Los dos grandes son fluidos (clamp) y los cinco chicos son fijos.
--fs-hero
clamp(34px, 5vw, 60px)
w800 · lh .98 · ls -.035em
titular de portada
Datos que se defienden solos
--fs-section
clamp(28px, 3.6vw, 44px)
w600 · lh 1.05 · ls -.025em
título de sección
Qué mide el informe
--fs-prose
15px · lh 1.6
prosa larga · máx 68ch
El gasto público en medicamentos alcanzó 1,2 billones de pesos en 2024, cerca del 0,4% del PIB.
--fs-body
14px · lh 1.45
UI base (el body lo fija)
Texto de interfaz: menús, celdas, descripciones cortas y ayudas de campo.
--fs-small
13.5px
links de nav, botones
Iniciar sesión · Ver documentación · Descargar CSV
--fs-micro
11.5px
wordmark, eyebrows
Informes · 2026
--fs-mono-label
10.5px
th de tablas, base legal, labels de stat
Ejecución presupuestaria · núcleo 2024
h1        { font: 800 var(--fs-hero)/.98 var(--font-sans); letter-spacing: -.035em; }
h2        { font: 600 var(--fs-section)/1.05 var(--font-sans); letter-spacing: -.025em; }
.prose    { font-size: var(--fs-prose); line-height: 1.6; max-width: 68ch; }
.eyebrow  { font-size: var(--fs-micro); }      /* clase real del kit */
.table th { font-size: var(--fs-mono-label); } /* components.css ya lo trae */
NOTA · El body activa font-feature-settings: "ss01", "ss02", "tnum", "cv11". Con tnum las cifras ocupan el mismo ancho y las columnas de números alinean solas; no necesitas mono para eso en sans, pero las celdas numéricas de tabla igual van en mono por convención (td.num).

Interlineado y medida de línea

REGLA · Cuatro interlineados y nada más: .98 para el hero, 1.05 para títulos de sección, 1.45 para UI y 1.6 para prosa. Mientras más grande la letra, más apretada la línea y más negativo el tracking; mientras más chica y más mono, más aire y tracking positivo.
MEDIDA · La prosa larga vive en .prose: 15px, interlineado 1.6 y ancho máximo de 68ch (unos 45 a 75 caracteres por línea). Un párrafo a ancho completo de contenedor es ilegible y es un bug de maqueta, no una decisión.
Bien · .prose limita a 68ch

La medida corta deja que el ojo vuelva al margen sin perderse. Con 68 caracteres por línea el lector mantiene el ritmo aunque el párrafo sea largo, y el interlineado 1.6 da el aire que la letra de 15 píxeles necesita para textos de más de un pantallazo.

Mal · párrafo a ancho completo

La misma prosa estirada al ancho del contenedor obliga al ojo a viajar demasiado en cada salto de línea; a partir de 90 caracteres el lector empieza a releer renglones y abandona el texto aunque el contenido sea bueno.

<p class=prose>La medida corta deja que el ojo vuelva al margen...</p>
/* .prose ya viene en base/tokens.css: 15px · lh 1.6 · max-width 68ch */

Cuándo va mono

REGLA · Mono es la voz de los datos duros: RUT, códigos, SHA, puertos, IDs, fechas ISO, montos en tablas, rutas y comandos. Y de las etiquetas de sección: eyebrows, encabezados de tabla, badges, labels de stat y tags de card. Todo lo demás va en sans.
CONTRA-REGLA · Mono nunca lleva prosa: un párrafo en JetBrains Mono es un error, no un estilo. Y sans nunca lleva las cifras de una tabla: la celda numérica es td.num, que ya la pone en mono con tnum y alineada a la derecha.
RUT
78.384.591-1
Release
f417275cbb1c390a6b158f2f6574db1b
Puerto
:8267
Código CAF
DTE-33-000412
Emitido
2026-08-20T09:15:00-04:00
<dl class=kv>
  <dt>RUT</dt><dd>78.384.591-1</dd>
  <dt>Release</dt><dd>f417275cbb1c390a6b158f2f6574db1b</dd>
</dl>
/* la clave va en sans muted; el valor, en mono tinta */

Informes · gasto público

Serie 2019 a 2024

<p class=eyebrow>Informes · gasto público</p>
<p class="eyebrow eyebrow--muted">Serie 2019 a 2024</p>
v9 Activo Stale Caído 
<span class=badge>v9</span>
<span class="badge badge--ok">Activo</span>
<span class="badge badge--warn">Stale</span>
<span class="badge badge--err">Caído</span>
25CAF activos
1.215.716Núcleo 2024 · MM$
0,4%Del PIB
<div class=stat>
  <span class=stat__value>1.215.716</span>
  <span class=stat__label>Núcleo 2024 · MM$</span>
</div>
ServicioPuertoEjecución 2024
cis-admin:8244184.528
cis-mando:82671.031.188
cis-verify:825211.111
 
<table class=table>
  <thead><tr><th>Servicio</th><th style="text-align:right">Ejecución 2024</th></tr></thead>
  <tbody><tr><td>cis-admin</td><td class=num>184.528</td></tr></tbody>
</table>
/* th ya es mono uppercase 10.5px; td.num ya es mono tnum a la derecha */
TRACKING · El mono uppercase siempre lleva aire entre letras, con tres valores según el rol:
--track-eyebrow · .18em
eyebrows, kickers
Compañía de Innovación
--track-label · .12em
th, labels de stat, tags
Compañía de Innovación
--track-legal · .1em
base legal del footer
Compañía de Innovación
.eyebrow     { letter-spacing: var(--track-eyebrow); } /* .18em */
.stat__label { letter-spacing: var(--track-label); }   /* .12em */
.legal       { letter-spacing: var(--track-legal); }   /* .1em  */

Jerarquía de una página tipo

REGLA · Una página del grupo se arma siempre en el mismo orden: eyebrow mono, hero 800, lead en prosa, secciones 600, cuerpo 400 y los datos duros en mono. El énfasis dentro de un titular va por color (h1 em usa el acento), nunca por cursiva.

Informes · 2026

El gasto en medicamentos

Cuánto paga el Estado chileno por sus medicamentos, quién los compra y a qué precio. Serie 2019 a 2024 con datos de ejecución presupuestaria.

Qué mide el informe

El perímetro cubre el núcleo de ejecución, incluido el gasto hospitalario. Quedan fuera las compras municipales y el gasto de bolsillo de los hogares.

Núcleo de ejecución · MM$ 2024
1.215.716
<p class=eyebrow>Informes · 2026</p>
<h1>El gasto en <em>medicamentos</em></h1>   <!-- em = color acento, no cursiva -->
<p class=prose>Cuánto paga el Estado chileno...</p>
<h2>Qué mide el informe</h2>
<p>El perímetro cubre el núcleo de ejecución...</p>
<div class=label-mono>Núcleo de ejecución · MM$ 2024</div>

Errores comunes y su regla

E1 · Google Fonts CDN · Prohibido sin excepción. Cada request a fonts.googleapis.com entrega IP y user agent de tus visitantes a un tercero, y una caída o bloqueo del CDN deja los frontends sin tipografía. Las fuentes se sirven self-hosted desde el kit (typography-001, sección "NO usar Google Fonts CDN"). Si encuentras ese dominio en un consumidor de cis-style, es un bug: repórtalo.
Mal · CDN de terceros 
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans" rel=stylesheet>
Bien · self-hosted del kit 
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/<digest>/fonts/css/ibm-plex-sans.css">
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/<digest>/fonts/css/jetbrains-mono.css">
/* regla: cero requests a fonts.googleapis.com y fonts.gstatic.com */
E2 · Inter · Es la fuente del sistema legacy --cis-* (Inter más verdes), retirado. El propio brands/cis/tokens.css lo dice: no propagar. CANON.md lo eleva a regla de grupo: nunca Inter como fuente de marca.
E3 · system-ui y Roboto · Valen solo como fallback dentro del stack (después de la coma), nunca como la fuente declarada. Una página del grupo que rinde en system-ui no es "neutra": es una página con las fuentes rotas.
Mal · fuente de marca equivocada o hardcodeada 
.card h3 { font-family: Inter, sans-serif; }
.nav     { font-family: system-ui; }
.hero    { font-family: "IBM Plex Sans"; }  /* correcto de casualidad: mañana deriva */
Bien · siempre el token 
.card h3 { font-family: var(--font-sans); }
.nav     { font-family: var(--font-sans); }
.hero    { font-family: var(--font-sans); }
/* regla: la familia se hereda del token; el fallback vive en el token, no en tu CSS */
E4 · Pesos no servidos · Plex Sans no sirve 300 y Mono no sirve 600. Si los pides, el browser sintetiza un peso falso que se ve borroso y distinto entre navegadores. Usa solo 400/500/600/700/800 en sans (800 rinde Bold) y 400/500/700 en mono.
E5 · Em-dash · Prohibido en todo el copy del grupo (header de base/tokens.css y CANON.md). Separa con "·", con "y", con "hasta" o con paréntesis. Esta página no contiene ninguno.

Fuentes