Tipografía
Space Grotesk para la interfaz, IBM Plex Mono para código y DM Sans 900 para el juego, con roles semánticos.
Space Grotesk variable de 300 a 700: títulos 500–600, etiquetas 500 y lectura 400. IBM Plex Mono 600 para código y metadatos. DM Sans 900 solo para recompensas y títulos de juego.
Estado actual
Decisiones que ya existen y pueden observarse en el producto.
Los archivos de fuente y sus licencias OFL se sirven desde /fonts; no se consulta Google Fonts.
Los títulos usan clamp con límites rem. Inputs de 1rem y párrafos con interlineado 1.75.
Cada peso existe como archivo real; no hay pesos sintetizados. El registro distribuye familias y roles; el consumidor copia los archivos de fuente y declara @font-face.
Fuente de interfaz · Space Grotesk · 300–700
Build with character.
Clear hierarchy, strong contrast, and comfortable reading for real product interfaces.
bl-type-displayDiseña con carácter. Aprende creando.
clamp(2.5rem, 1.5rem + 4vw, 4.5rem) · 500 · 1.1 · -0.04em
bl-type-page-titleDiseña con carácter. Aprende creando.
clamp(2rem, 1.5rem + 2vw, 3rem) · 600 · 1.15 · -0.03em
bl-type-section-titleDiseña con carácter. Aprende creando.
clamp(1.25rem, 1rem + 1vw, 1.5rem) · 500 · 1.25 · -0.02em
bl-type-card-titleDiseña con carácter. Aprende creando.
1.125rem · 500 · 1.3 · -0.01em
bl-type-bodyDiseña con carácter. Aprende creando.
1rem · 400 · 1.75 · 0em
bl-type-smallDiseña con carácter. Aprende creando.
0.875rem · 400 · 1.7 · 0em
bl-type-labelDiseña con carácter. Aprende creando.
1rem · 500 · 1.5 · 0em
bl-type-label-smallDiseña con carácter. Aprende creando.
0.875rem · 500 · 1.5 · 0em
bl-type-label-largeDiseña con carácter. Aprende creando.
1.125rem · 500 · 1.5 · 0em
bl-type-inputDiseña con carácter. Aprende creando.
1rem · 400 · 1.5 · 0em
bl-type-codeDiseña con carácter. Aprende creando.
0.875rem · 600 · 1.7 · 0em
bl-type-eyebrowDiseña con carácter. Aprende creando.
0.75rem · 600 · 1.5 · 0.1em
bl-type-game-titleDiseña con carácter. Aprende creando.
clamp(2rem, 1.25rem + 2.5vw, 3.5rem) · 900 · 1.1 · -0.02em
bl-type-game-numberDiseña con carácter. Aprende creando.
1rem · 900 · 1.2 · 0em
Fuente técnica · IBM Plex Mono
npx shadcn@latest add https://brutallab.facilito.dev/r/brutallab-typography.jsonTokens actuales
Valores presentes hoy; documentarlos no significa que todos sean definitivos.
| Token | Valor | Uso actual |
|---|---|---|
| bl-type-display | clamp(2.5rem, 1.5rem + 4vw, 4.5rem) / 500 / 1.1 | Space Grotesk |
| bl-type-page-title | clamp(2rem, 1.5rem + 2vw, 3rem) / 600 / 1.15 | Space Grotesk |
| bl-type-section-title | clamp(1.25rem, 1rem + 1vw, 1.5rem) / 500 / 1.25 | Space Grotesk |
| bl-type-card-title | 1.125rem / 500 / 1.3 | Space Grotesk |
| bl-type-body | 1rem / 400 / 1.75 | Space Grotesk |
| bl-type-small | 0.875rem / 400 / 1.7 | Space Grotesk |
| bl-type-label | 1rem / 500 / 1.5 | Space Grotesk |
| bl-type-label-small | 0.875rem / 500 / 1.5 | Space Grotesk |
| bl-type-label-large | 1.125rem / 500 / 1.5 | Space Grotesk |
| bl-type-input | 1rem / 400 / 1.5 | Space Grotesk |
| bl-type-code | 0.875rem / 600 / 1.7 | IBM Plex Mono |
| bl-type-eyebrow | 0.75rem / 600 / 1.5 | IBM Plex Mono |
| bl-type-game-title | clamp(2rem, 1.25rem + 2.5vw, 3.5rem) / 900 / 1.1 | DM Sans |
| bl-type-game-number | 1rem / 900 / 1.2 | DM Sans |
Qué falta
Huecos que impiden tratar esta base como una regla estable.
Los componentes heredados conservan algunas utilidades tipográficas directas.
Próximas decisiones
Orden recomendado para convertir los hallazgos en una foundation estable.
- 01
Usa roles semánticos y conserva la jerarquía h1/h2/h3. Comprueba traducciones largas y zoom antes de publicar.