# Tipos — MIRÓ Labs
> Repositorio de tipografías curado por Alonso Rivera (MIRÓ Labs). Todas las fuentes tienen licencia SIL Open Font License 1.1 (salvo TeX Gyre Heros, con GUST Font License, y Fungal, con la licencia de Bitstream Vera; ambas libres): se pueden usar y auto-alojar en cualquier web. Las referencias son letras de portadas, vinilos, libros y obras, descritas por Claude, con sus 3 fuentes más parecidas del repositorio.
## Datos (JSON, leer primero)
- [fonts/catalog.json](fonts/catalog.json): 100 fuentes en 11 escuelas (school: clasica, suiza, bauhaus, gotica, fraktur, setentera, autor, opart, rotulo, pixel, experimental). Las que tienen `axis` traen pasos precalculados de un eje variable (axis.steps[{v, file}], axis.default). Campos: family (nombre CSS), name, tono, rareza, texto_corrido, usos, pares, evitar, css, foundry, country, region, year, role (display | titular | texto), school, tags, pair (familia con la que combina), heavy y light (pesos a usar), caps_only, note, url (fundición), license, faces[{file, weight, style}] con rutas relativas a /fonts/.
- [refs/refs.json](refs/refs.json): referencias. Campos: text, img (recorte), source{title, artist, year, kind, cover}, clase, peso, ancho, epoca, hand (rotulada a mano), rasgos, nombre (pista, sin verificar), matches[[family, por qué]].
## Cómo elegir (criterio de Alonso, en catalog.json)
Cada fuente trae:
- `tono`: sobria, editorial, técnica, cálida, lúdica, retro, ornamental, urgente, experimental.
- `rareza`: 1 (clásica, la que esperas) a 5 (muy rara). La gracia de este repositorio está en el 3–5, pero siempre sobre una base legible.
- `texto_corrido`: true solo en 16 fuentes. Las demás son para titulares y display: nunca en párrafos ni por debajo de 24 px.
- `usos`: texto, titular, ui, datos, póster, logotipo.
- `pares`: con qué fuentes combina (ya probadas en el catálogo). `evitar`: qué no hacer con ella.
- `css`: una hoja lista para enlazar, con sus @font-face.
Reglas:
1. Una web lleva **una fuente de texto** (texto_corrido: true) y **como mucho una display**. Elige la display primero por `tono`, después su texto entre sus `pares`.
2. Dashboards, herramientas, formularios: texto e interfaz con una de rareza 1–2 (escuela «clasica»); la display, si hay, solo en el título.
3. Landing, editorial, póster: display de rareza 3–5 en titulares grandes; el texto siempre de rareza 1–2.
4. Nunca dos display juntas, ni dos grotescas parecidas: el contraste es serifa contra sans, o display contra neutra.
5. Las fuentes con `axis` tienen pasos fijos de un eje (por ejemplo «Climate Crisis YEAR=2050»), cada uno como otra familia en su CSS.
6. Colores: los de una combinación de Sanzo Wada (https://sanzo-wada-chi.vercel.app/llms.txt), no inventados.
## Cómo usar una fuente en una web
0. Lo más simple: `` (el campo `css` del catálogo) y `font-family: ""`. Las fuentes se pueden cargar desde cualquier dominio.
1. Elige en catalog.json por role y tags. Para una web: una display (titulares) + su `pair` (texto).
2. Declara @font-face con los archivos de `faces` (src: https:///fonts/), o descárgalos de la `url` de la fundición y auto-alójalos.
3. Tamaños desde una escala modular: base 1rem × ratio^n (ratios: 1.25, 1.5, 1.618, 2).
4. Titulares: tracking −0.035em e interlínea 0.84 (apretado) o 0 / 0.96 (normal). Mayúsculas: +0.06em salvo apretado.
5. Español: tilde siempre en mayúsculas; ¿ y ¡ obligatorios; texto corrido de 45 a 75 caracteres por línea.
## Reproducir un póster (parámetros de URL)
`?t=&f=&p=&r=&s=&c=&fmt=<1:1|4:5|9:16|16:9>&seed=&ex=<0-7>&v=&ax=&w=<1-348>&wr=`
Colores: `w` es la combinación de Sanzo Wada (A Dictionary of Color Combinations, 1933–34; datos en [colores/wada.json](colores/wada.json)) y `wr` cuántas veces se giró (qué color hace de fondo). Sin `w`, `ex` usa la portada de ejemplo.
Programas: escala, smash, rejilla, bandas, op, eco, cruz, collage, modulo; a lo Jacqueline Casey: escalera, idea, letraforma, trama; logo (lámina de logotipo, a lo From Type to Logo) chicha (carteles chicha de Lima y Huancayo), constructivista, espiral, capas (Weingart), musicaviva (Müller-Brockmann), vertical (Ikko Tanaka) y carson. `v=wall` abre el Muro: el texto en todas las fuentes. Ejemplos de color (ex): 0 Plantasia, 1 Head Hunters, 2 Bitches Brew, 3 Echoes, 4 Malevich, 5 Hokusai, 6 af Klint, 7 Torres-García.
Con navegador: `window.Tipos.tokens()` devuelve los tokens y `window.Tipos.state()` el estado actual.
## Tokens
El enlace «copiar tokens» del pie del panel entrega los tokens de tipografía en formato Design Tokens (DTCG): display, text, scale, tracking, lineHeight y reglas.