Dos familias, tres tokens, una jerarquía consistente. Toda la voz visual de Galilei se construye con Radio Canada Big y Space Grotesk · sin excepción.
Radio Canada Big hace el trabajo monumental. Space Grotesk hace el chasis. Punto. No hay tercer fuente · el monospace también es Space Grotesk con un truco de OpenType.
--font-display Tipografía oficial del National Public Broadcaster de Canadá. Refuerza nuestra identidad como marca educativa con autoridad técnica.
Uso: Headlines, números grandes, palabras de acento. Todo lo que necesite presencia visual.
--font-body Sans-serif geométrica diseñada por Florian Karsten en 2018, derivada de Space Mono. Optimizada para legibilidad en cuerpos no-display.
Uso: Párrafos, navegación, labels, botones, eyebrows, cuerpos de tabla. Todo el chasis del producto.
Las dos familias se complementan: RCB ancla con presencia, SG sostiene con legibilidad. Estos son los tres pairings recurrentes en todo el portal y producto.
SG · 600 · 0.18em + RCB · 700 · -0.02em SG · 700 · pill + RCB · 700 · display RCB · 700 · tabular + SG · 700 · 0.1em Cada decisión tipográfica se construye con tokens, no con valores hardcodeados. Esto garantiza que un cambio en el sistema se propague a todo el portal sin que nadie tenga que tocar 200 archivos.
SG · 400 · 1.6 lh + strong: SG · 600 Galilei se siente humano y conversacional · Sentence case en todo (títulos, body, botones, labels) sostiene esa voz. La única excepción son los overlines en Space Grotesk con tracking abierto: ese ALL CAPS chiquito ancla visualmente sin gritar.
Cada módulo se construye sobre principios de pedagogía activa. Los estudiantes resuelven retos reales con herramientas STEM, no memorizan teoría suelta.
Solo la primera letra va en mayúscula. Los nombres propios (Galilei, STEM) conservan su capitalización natural.
La única instancia legítima de uppercase. Space Grotesk 600, letter-spacing 0.18em, tamaño chico. Funciona como ancla visual, no como título.
Cada nivel tiene un token. Los tamaños de display y headings son fluidos con clamp() entre 480px y 1600px de viewport · sin saltos entre breakpoints. La muestra de abajo escala en vivo al redimensionar la ventana.
--fs-display 2 → 3.5 rem fluid Headlines de hero principal Aa --fs-h2-lg 1.85 → 2.9 rem fluid Títulos grandes de sección Aa --fs-h2 1.7 → 2.7 rem fluid Títulos de sección estándar Aa --fs-h2-sm 1.5 → 2.3 rem fluid Títulos compactos Aa --fs-h3 1.2 → 1.8 rem fluid Subtítulos y card titles Aa --fs-banner 1.45 → 2.4 rem fluid Banners y pull-quotes Aa --fs-h4 0.92 rem Anchors, micro-headers Aa --fs-body-lg 1.05 rem Lead paragraph, intros Aa --fs-body 0.92 rem Cuerpo estándar Aa --fs-body-sm 0.78 rem Captions, eyebrows, footnotes Aa Solo cuatro pesos: 400 · 500 · 600 · 700. Cinco letter-spacings tokenizados. Todo lo demás está fuera del sistema.
--fw-regular 400 Cuerpo de texto largo --fw-medium 500 Botones, navegación, énfasis sutil --fw-semibold 600 Subtítulos, eyebrows, títulos compactos --fw-bold 700 Headlines, números grandes, anchors --ls-tight -0.02em Galilei --ls-snug -0.01em Galilei --ls-normal 0 Galilei --ls-wide 0.1em Galilei --ls-extra 0.18em Galilei --font-monoGalilei no tiene fuente monospace. --font-mono apunta a Space Grotesk. El comportamiento "mono" se logra con font-variant-numeric: tabular-nums y letter-spacing controlado. Cero Menlo, cero Space Mono, cero deriva del sistema.
Cifras alineadas en columna. font-variant-numeric: tabular-nums
Class names y tokens. SG 600 + bg sutil + tabular nums.
Numeración de secciones. SG 700 + 0.1em letter-spacing.
Las reglas que rigen tipografía en Galilei. Sin excepción.
font-family debe ser var(--font-display), var(--font-body) o var(--font-mono). Si la marca cambia de fuente, todo el portal hereda automáticamente.
Bold no escala jerarquía · el tamaño sí. Reserva pesos 600/700 para anchors, eyebrows y números display.
font-variant-numeric: tabular-nums alinea las cifras en columnas. Es lo que hace que --font-mono funcione como mono real.
Títulos, headlines, body, botones y labels van en Sentence case. La única excepción son los overlines/eyebrows en Space Grotesk con letter-spacing 0.18em: ahí sí va ALL CAPS.
En vez del em-dash usa: middle dot (·) para separar conceptos breves, coma o paréntesis para clauses, dos puntos para definiciones, punto seguido para frases nuevas. El em-dash siempre tiene una alternativa más clara.
Cero em-dashes en headlines, body, captions, descripciones, code comments, microcopy. Visualmente quiebran la lectura y se sienten genéricos. La voz Galilei es directa: si hay aside, va entre paréntesis o en otra frase.
Inter, Roboto, Arial, system fonts: cualquier otra introduce ruido visual. Si necesitas mono, usa --font-mono (que es Space Grotesk con tabular-nums).
No uses 300, 800, 900 ni italics. La marca opera en 4 pesos exactos. Punto.
Cuerpo largo en 400. Énfasis interno con <strong> al 600 máximo. Bold en cuerpo cansa la lectura.
Uppercase en H1, H2 o H3 grita y rompe la voz Galilei. ALL CAPS está reservado solo para overlines pequeños con tracking abierto.