Tipografía CSS.
Utilidades tipográficas conectadas a los roles IBM Plex Sans y JetBrains Mono.
Referencia
Tailwind genera estas utilidades durante el build. Style fija los tokens aceptados, los defaults y las restricciones del grupo.
| Propiedad o familia | Uso en v10 | Criterio |
|---|---|---|
| font-family | sans o mono | No Inter, Roboto, Arial ni Google Fonts |
| font-size / line-height | Roles de texto | Usar tokens fluidos o discretos publicados |
| font-smoothing | No recomendado globalmente | Respetar rasterización del sistema |
| font-style / weight / stretch | Énfasis | Pesos disponibles 400 a 700; no simular |
| font-variant-numeric | Datos | tabular-nums en tablas y KPIs |
| font-feature-settings | Caso tipográfico específico | Preferir variant numeric cuando existe |
| letter-spacing | Labels y display | No espaciar cuerpo largo |
| line-clamp | Previews | No truncar información crítica |
| list-style-* | Prosa y procedimientos | Marcadores visibles cuando orden importa |
| text-align / vertical-align | Alineación | Números comparables a la derecha |
| color | Roles ink y estados | Nunca color crudo de marca en cuerpo |
| text-decoration-* | Enlaces y edición | Subrayado reconocible y offset legible |
| text-transform | Caja natural | Mayúsculas sólo en logo, siglas y el literal Región Metropolitana |
| text-overflow / wrap | Contenido limitado | Ofrecer acceso al valor completo |
| text-indent / tab-size | Prosa y código | Uso documentado |
| white-space / word-break / overflow-wrap / hyphens | Texto largo | Preferir overflow-wrap:anywhere para identificadores |
| content | Decoración CSS | No introducir información esencial |
Reglas de Style
- La jerarquía usa tamaño, peso y espacio antes de color.
- La primitiva .l-measure limita lectura a 36 rem; comprobar hasta 80 caracteres por línea con la fuente y el ancho reales.
- Los links se reconocen sin depender sólo del color.
- Probar zoom, contenido localizado y cadenas técnicas largas.
Contrato de uso
- Usar utilidades para ajustes locales y prototipos acotados.
- Usar una clase semántica de Kit cuando el patrón se repite o tiene comportamiento.
- No construir clases dinámicamente; cada nombre debe aparecer completo en el código fuente.
- No usar valores arbitrarios para reemplazar un token que falta. Proponer primero el token.
- Verificar 320 px, 200% de zoom, tema oscuro y reducción de movimiento cuando aplique.