Tipografía

Skills

/galilei-brand

01Dos familias

Las dos fuentes oficiales

Radio Canada Big hace el trabajo monumental. Space Grotesk hace el chasis. No hay una tercera fuente · el monospace también es Space Grotesk, con un truco de OpenType.

Display · --font-display

Radio Canada Big

Tipografía oficial del canal público de Canadá. Le da a Galilei autoridad técnica de marca educativa.

Medium 500 SemiBold 600 Bold 700

Uso: Headlines, números grandes, palabras de acento. Todo lo que necesite presencia visual.

Galilei Learning Display · 700 · -0.02em

Body / UI · --font-body

Space Grotesk

Sans-serif geométrica de Florian Karsten (2018), derivada de Space Mono. Pensada para leerse bien en texto, no solo en display.

Regular 400 Medium 500 SemiBold 600 Bold 700

Uso: Párrafos, navegación, labels, botones, eyebrows, cuerpos de tabla. Todo el chasis del producto.

El sistema tipográfico de Galilei está construido para que cada texto encuentre su lugar sin competir. Body · 500 · 1.6 lh

02Cómo se combinan

Pairings en uso

RCB ancla con presencia, SG sostiene con legibilidad. Estos son los pairings que se repiten en todo el portal y el producto.

A Eyebrow + Headline

identidad · color

Sistema construido sobre lima.

SG · 600 · 0.18em + RCB · 700 · -0.02em

B Pill + Display

Adiós Premios

SG · 700 · pill + RCB · 700 · display

C Stat + Label

94% Tasa de retención

RCB · 700 · tabular + SG · 700 · 0.1em

D Body + Énfasis

Cada decisión tipográfica usa tokens, no valores hardcodeados. Así un cambio en el sistema se propaga a todo el portal sin tocar 200 archivos.

SG · 400 · 1.6 lh + strong: SG · 600

03Mono sin Menlo

El truco del `--font-mono`

Galilei no tiene fuente monospace. --font-mono apunta a Space Grotesk. El efecto "mono" sale de font-variant-numeric: tabular-nums y letter-spacing controlado. Cero Menlo, cero Space Mono, cero fuente del sistema.

Tabular nums

Empleados1,247

Módulos89

Score9.2

Retención94%

Cifras alineadas en columna. font-variant-numeric: tabular-nums

Code refs

cs-head

cs-title

--font-display

phero-eyebrow

Class names y tokens. SG 600 + bg sutil + tabular nums.

Numeric labels

01 Estructura base

02 Patrón de cards

03 Reglas de uso

Numeración de secciones. SG 700 + 0.1em letter-spacing.

01Text styles

Jerarquía completa · 19 estilos

Diecinueve estilos de texto · espejo literal de Figma, en una sola lista plana. Cada uno con su spec exacto: familia, peso, tamaño, line height, tracking y caja. Spec a la izquierda, render real a la derecha.

display-xl · Radio Canada Big Bold 700 · 100px Line height 105% Letter spacing -2% Sentence --fs-display-xl

12.480

Stats y números gigantes: leaderboards, dashboards.

display · Radio Canada Big Bold 700 · 56px Line height 105% Letter spacing -2% Sentence --fs-display

Bienvenido al Galiverso

Hero de pantalla. Un solo display por vista.

h1 · Radio Canada Big Bold 700 · 40px Line height 115% Letter spacing -1% Sentence --fs-h1

Título de página

Encabezado principal de la página.

h2 · Radio Canada Big Bold 700 · 36px Line height 115% Letter spacing -1% Sentence --fs-h2

Título de sección

Divide la página en bloques.

h3 · Radio Canada Big SemiBold 600 · 24px Line height 115% Letter spacing -1% Sentence --fs-h3

Subtítulo de bloque

Sub-sección dentro de una sección.

h4 · Space Grotesk Medium 500 · 20px Line height 130% Letter spacing 0 Sentence --fs-h4

Micro-encabezado

Cuarto nivel. Labels destacados.

h5 · Space Grotesk Medium 500 · 15px Line height Auto Letter spacing 0 Sentence

Encabezado compacto

Heading chico en Space Grotesk (tier chico h4-h5).

lead · Space Grotesk Regular 400 · 24px Line height 150% Letter spacing 0 Sentence --fs-lead

Párrafo de entrada que abre un artículo o sección, y body grande para editorial y social.

Lead editorial e intros. También body grande para gráficas de social, posters y long-form.

body · Space Grotesk Regular 400 · 16px Line height 160% Letter spacing 0 Sentence --fs-body

El cuerpo estándar de todo el portal, cómodo para lectura larga y navegación.

Párrafos y lectura.

caption · Space Grotesk Medium 500 · 12px Line height 130% Letter spacing 0 Sentence --fs-body-sm

Texto secundario, captions y labels de UI.

Texto chico de UI y descriptivo. Antes había un `sm` idéntico, fusionado aquí.

mono · Space Grotesk Regular 400 · 12px Line height 130% Letter spacing 0 Tabular --font-mono

v2.4.1 · 0xA3F

Datos técnicos. Tabular-nums.

micro · Space Grotesk Medium 500 · 9px Line height 130% Letter spacing 4% Sentence --fs-micro

spec · detalle · tag

Texto más chico: specs, micro-labels, tags.

overline-xl · Space Grotesk Medium 500 · 24px Line height 130% Letter spacing 14% UPPERCASE --fs-overline-xl

La entrevista

Overline editorial grande · etiqueta estilo revista para editorial y social.

overline-lg · Space Grotesk Medium 500 · 16px Line height 130% Letter spacing 14% UPPERCASE --fs-overline-lg

Identidad · color

Overline · labels de sección.

overline-sm · Space Grotesk Medium 500 · 10px Line height 130% Letter spacing 14% UPPERCASE

Recursos

Overline pequeño · micro-labels.

tab · Space Grotesk Medium 500 · 14px Line height 14px Letter spacing 0 Sentence

Resumen

Labels de tabs y navegación.

button-lg · Space Grotesk Medium 500 · 16px Line height 100% Letter spacing 0 Sentence --fs-body

Empezar misión

Texto de botón grande (.btn-lg).

button-sm · Space Grotesk Medium 500 · 12px Line height 100% Letter spacing 0 Sentence --fs-body-sm

Continuar

Texto de botón estándar (.btn / .btn-sm).

Tamaños fijos arriba · fluido en el portal. Los text styles son la fuente con tamaño fijo (espejo de Figma). El portal renderiza display y headings de forma fluida con clamp() via los tokens --fs-display (32→56px), --fs-h1 (26→40px), --fs-h2 (22→36px), --fs-h3 (16→24px), más --fs-banner, --fs-display-sm y --fs-display-xl. Cualquier tamaño crudo fuera de estos tokens es deuda.

02Pesos & spacing

Pesos y letter-spacing

Solo cuatro pesos: 400 · 500 · 600 · 700. Cinco letter-spacings tokenizados. Todo lo demás está fuera del sistema.

Pesos

--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

Letter-spacing

--ls-tight -0.02em Galilei

--ls-snug -0.01em Galilei

--ls-normal 0 Galilei

--ls-wide 0.1em Galilei

03Capitalización

Sentence case por default

Galilei suena 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 sin gritar. El overline va texto plano: sin dot ni bullet decorativo delante. El dot lima es solo funcional (estado, notificación, tab activo, leyenda), nunca adorno antes de un label.

A Default

Cómo funciona el aprendizaje en Galilei

Cada módulo parte de pedagogía activa. Los estudiantes resuelven retos reales con herramientas STEM, no memorizan teoría suelta.

Solo la primera letra en mayúscula. Los nombres propios (Galilei, STEM) conservan la suya.

B Excepción

identidad visual · tipografía

El único uppercase válido. Space Grotesk 600, letter-spacing 0.18em, tamaño chico. Ancla visual, no título.

01Sistema de listas

Dos tipos. Solo dos

Galilei no usa bullets genéricos, chevrons ni guiones. Solo el punto lima y el número editorial · cada uno con su momento exacto.

A Punto lima

Aprendizaje activo sobre problemas reales
Feedback inmediato en cada evaluación
Rutas adaptadas al ritmo de cada estudiante

Carácter · U+00B7 middle dot

Color GaliGreen

Fuente Space Grotesk 400

Cuándo Features, beneficios, ítems sin jerarquía entre ellos

B Número editorial

01
Define el problema antes de buscar la solución.
02
Itera rápido. Perfecciona después.

Fuente Radio Canada Big 700

Tamaño 3.8 – 5.5 rem · solo display

Color GaliGreen

Cuándo Pasos, procesos, onboarding, metodologías numeradas

No existe en Galilei

Viñeta HTML •

Chevron ›

Em-dash — como bullet

Número inline 1. 2. 3.