---
title: "Tipografía"
description: "Una familia de variables utilizada en serio — Bricolage Grotesque, eje opsz 12–96 y peso 200–800."
---

## Una familia, tres ejes

Nibiru utiliza **Bricolage Grotesque** (gratuito, Google Fonts) para todo el texto. El truco es que es una **fuente variable** con dos ejes significativos:

- **Tamaño óptico (`opsz`, 12–96)** — los tamaños de pantalla obtienen caracteres más personales, estrechos y ligeramente cuadrados; los tamaños del cuerpo se vuelven más calmos y abiertos.
- **Peso (`wght`, 200–800)** — toda la gama disponible.
- **Cursiva** — cursiva real, no inclinada.

Así que un solo archivo de fuente nos da una fuente para el encabezado *y* otra para el cuerpo. No es necesario cargar fuentes adicionales.
```css
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-variation-settings: 'opsz' 96, 'wght' 600;   /* display */
font-variation-settings: 'opsz' 14, 'wght' 400;   /* body */
```
El código utiliza **JetBrains Mono** porque es silenciosamente excelente para el código y se complementa bien.

## Presets de variación (los bloques de construcción)

| Token | Variation | Use |
|---|---|---|
| `--nibiru-fv-display-hero`   | `'opsz' 96, 'wght' 600` | Hero H1 |
| `--nibiru-fv-display-large`  | `'opsz' 64, 'wght' 600` | H2 |
| `--nibiru-fv-display-medium` | `'opsz' 36, 'wght' 600` | H3 |
| `--nibiru-fv-heading-small`  | `'opsz' 18, 'wght' 600` | H4 |
| `--nibiru-fv-lead`           | `'opsz' 24, 'wght' 400` | Párrafo principal |
| `--nibiru-fv-body`           | `'opsz' 14, 'wght' 400` | Cuerpo |
| `--nibiru-fv-body-bold`      | `'opsz' 14, 'wght' 600` | Fuerte |
| `--nibiru-fv-label`          | `'opsz' 12, 'wght' 600` | Etiquetas, ojo de párrafo |

## Escala tipográfica

| Token | Tamaño | Uso |
|---|---|---|
| `--nibiru-text-xs`   | 0.72rem | Encabezado / etiquetas |
| `--nibiru-text-sm`   | 0.85rem | Leyendas |
| `--nibiru-text-md`   | 0.92rem | Controles de interfaz, barra lateral |
| `--nibiru-text-base` | 1.00rem | Cuerpo |
| `--nibiru-text-lg`   | 1.18rem | Párrafo principal |
| `--nibiru-text-xl`   | 1.45rem | Introducciones de sección |
| `--nibiru-text-2xl`  | 2.00rem | H3 |
| `--nibiru-text-3xl`  | 2.60rem | H2 |
| `--nibiru-text-hero` | clamp(2.6rem, 1.8rem + 4vw, 4.8rem) | H1, héroe |

## Seguimiento

El seguimiento se intensifica a medida que el tamaño crece — así es como mantienes un héroe con una sensación de densidad y un cuerpo con una sensación de libertad.

| Token | Valor | Uso |
|---|---|---|
| `--nibiru-tracking-display` | −0.04em | Hero / H1 |
| `--nibiru-tracking-heading` | −0.025em | H2, H3 |
| `--nibiru-tracking-body`    | −0.005em | Cuerpo |
| `--nibiru-tracking-label`   | 0.10em | Etiquetas en mayúsculas |
| `--nibiru-tracking-eyebrow` | 0.22em | Hero eyebrow, números de sección |

## Un héroe, escrito a mano
```css
h1.atelier-hero__title {
  font-family: var(--nibiru-font-display);
  font-variation-settings: var(--nibiru-fv-display-hero);
  font-size:        var(--nibiru-text-hero);
  letter-spacing:   var(--nibiru-tracking-display);
  line-height:      0.96;
  color:            var(--nibiru-ink);
  max-width:        16ch;
}

h1.atelier-hero__title em {
  font-style: normal;
  color: var(--nibiru-iris-deep);
  position: relative;
}
h1.atelier-hero__title em::after {
  content: '';
  position: absolute;
  inset: auto 0 0.05em 0;
  height: 0.18em;
  background: var(--nibiru-aurum);
  opacity: 0.3;
  z-index: -1;
}
```
Eso es un héroe. La palabra en cursiva recibe una única línea de relieve dorado. Nada más necesita decoración.

## Un cuerpo, escrito a mano
```css
body, .prose p {
  font-family: var(--nibiru-font-text);
  font-variation-settings: var(--nibiru-fv-body);
  font-size: var(--nibiru-text-base);
  line-height: 1.7;
  letter-spacing: var(--nibiru-tracking-body);
  color: var(--nibiru-ink);
}
```
## No

- No uses Bricolage Grotesque al mismo OPSZ para el héroe y el cuerpo — eso desperdicia su eje variable.
- No pongas en negrita el texto del cuerpo por debajo de `wght: 600`. Por debajo de 600 no se lee como negrita.
- No rastrea el texto de display positivamente. Ajusta más estrecho a medida que crezca el tamaño.
- No uses Bricolage Italic para oraciones completas — úsalo para palabras individuales dentro de un encabezado. El truco "*Impress.*" en la página de inicio es la referencia.
