Tipografía

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.

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

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

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.