Tipografía
El sitio principal usa Poppins (títulos) + Inter (cuerpo). Nunito es exclusiva del universo app. Escalas, pesos y reglas.
La marca tiene dos contextos tipográficos. El principal es el del sitio (prouniversitas.cl); el de la app es un sub-universo.
Sitio principal: Poppins + Inter
| Rol | Familia | Pesos | Uso |
|---|---|---|---|
Títulos (font-heading) | Poppins | 500 · 600 · 700 · 800 | H1–H5, botones destacados, marquee. Siempre con tracking-tight |
Cuerpo (font-sans) | Inter | 400–700 | Párrafos, UI, formularios |
Preuniversitario PAES · El PRE que es PRO
Tu futuro empieza
con un paso
Preparamos tu PAES con una metodología comprobada: profesores PRO, programas PRO y un ecosistema digital pensado para ti.
Rasgos del sitio a respetar:
- Kicker de sección: mayúsculas,
tracking [0.2em], semibold, amarillo sobre navy (o navy sobre claro). - Los H1 del hero son Poppins bold, muy grandes, blancos, alineados con generosidad de espacio.
- El énfasis en texto claro se hace con
.mark-yellow(subrayado amarillo al 40% inferior): así se ve. - Cuerpo siempre Inter — nunca Poppins para párrafos largos.
Escala del sitio (clases reales de producción)
| Rol | Clase / valores |
|---|---|
| Kicker | text-sm font-semibold uppercase tracking-[0.2em] text-brand-yellow (14px/600) — sin punto final |
| Kicker pill (hero) | ídem en text-xs dentro de rounded-full bg-white/10 px-4 py-1.5 ring-1 ring-white/20 backdrop-blur-sm |
| H1 hero | text-4xl sm:text-6xl lg:text-7xl · leading-[1.03] tracking-tight (36→72px) |
| H1 interior | font-heading text-4xl sm:text-5xl leading-[1.1] tracking-tight |
| H2 sección | font-heading text-3xl sm:text-4xl lg:text-5xl leading-tight tracking-tight — 1 palabra en amarillo |
| Bajada | text-base sm:text-lg text-white/70 |
| Card: título | font-heading text-xl · texto text-sm leading-relaxed text-white/65 |
| Número stat | font-heading text-4xl font-extrabold text-brand-yellow |
| Fine print | text-xs text-white/40 |
Jerarquía de opacidad del blanco (constante en todo el sitio): títulos #FFF · cuerpo /70 ·
secundario /55–/65 · pie /38–/45.
Universo app: Nunito
La app de entrenamiento (preparalapaes.cl) usa una sola familia: Nunito (400/500/700/800) — redondeada y cálida, coherente con su carácter gamificado. No se usa en el sitio principal ni en comunicación institucional.
| Rol (app) | Tamaño / peso |
|---|---|
| Display (splash, XP) | 28 px / 800 |
| H1 | 22 px / 800 |
| H2 | 18 px / 700 |
| Body | 15 px / 500 |
| Caption | 12 px / 700 · MAYÚSCULAS · tracking 0.5px |
¡Muy bien! +10 XP · BONUS RACHA +5
Subiste de nivel: ahora estás en Medio. AaBbCc 0123456789
Reglas
Descargar / instalar
CDN (lo más simple para HTML/documentos):
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">Self-hosted (URLs absolutas, para PDFs offline, Satori/OG o entornos sin CDN):
| Familia | Archivos |
|---|---|
| Poppins (títulos) | /brand/fonts/poppins/Poppins-SemiBold.ttf (600) · Poppins-Bold.ttf (700) · Poppins-ExtraBold.ttf (800) |
| Inter (cuerpo) | /brand/fonts/inter/Inter-Regular.ttf (400) · Inter-Medium.ttf (500) · Inter-SemiBold.ttf (600) · Inter-Bold.ttf (700) |
| Nunito (solo app) | /brand/fonts/Nunito-Variable.ttf + estáticas 700/800 |
Todas OFL (licencias en LICENSES/). En Next.js, el patrón del sitio real es next/font/google
con variables --font-heading / --font-sans (ver pro-universitas-web/app/layout.tsx).