17 · Typography

17 — Typography

Versión: 0.1 Última actualización: 2026-04-24

Filosofía

La tipografía es el signal anti-AI más poderoso que tenemos. Mientras que 99% de productos AI usan Inter/Geist/SF Pro, nuestra elección de serif variable con personalidad inmediatamente dice “esto fue diseñado con criterio”.

Tres familias. Cada una con rol claro. Ninguna es reemplazable por otra.

El trío

1. Fraunces — display & voice ⭐

Rol: H1, H2, headlines, quotes
Por qué: serif variable contemporánea con personalidad ajustable (SOFT axis para warmth, WONK axis para quirkiness). Diseñada por Undercase Type (small Portuguese foundry — no corporate). Libre.
Ajuste en el axis:
- SOFT 100 → calidez (para headlines emocionales)
- WONK 0 → estándar (para títulos de trabajo)
- WONK 1 → con carácter (para momentos de énfasis — use sparingly)
- Weight 500-700 para display
Download: Google Fonts — Fraunces
Alternativa si falla load: Newsreader → Lora → Playfair Display

2. Work Sans — body & UI

Rol: párrafos, labels, UI, nav
Por qué: geometric sans con calidez (no tan frío como Inter), proporciones generosas, pairs perfectamente con Fraunces. Libre.
Weight: 400 body, 500 labels, 600 UI emphasis
Download: Google Fonts — Work Sans
Alternativa: Source Sans → IBM Plex Sans (NUNCA Inter puro)

3. JetBrains Mono — código & technical

Rol: code blocks, terminal, file paths, technical metadata
Por qué: diseñada para lectura larga de código, ligaduras activables, buena para español con acentos
Weight: 400 body de código, 500 para énfasis
Ligatures: ON (fi, =>, !=, -> mejoran legibilidad)
Alternativa: Fira Code → IBM Plex Mono

Escala tipográfica

Basada en modular scale 1.250 (mayor tercera musical), más cálida que el 1.333 típico de tech.

Token	Size	Line height	Rol
`text-hero`	72px / 4.5rem	1.05	Landing hero
`text-display-xl`	56px / 3.5rem	1.1	Page title (H1 principal)
`text-display-lg`	40px / 2.5rem	1.15	Section opener (H2)
`text-display`	32px / 2rem	1.2	Chapter title (H2)
`text-headline`	26px / 1.625rem	1.25	Step headline (H3)
`text-title`	20px / 1.25rem	1.3	Card title, H4
`text-lead`	18px / 1.125rem	1.6	Intro paragraph
`text-body`	16px / 1rem	1.65	Body paragraph
`text-small`	14px / 0.875rem	1.5	Captions, metadata
`text-micro`	12px / 0.75rem	1.4	Labels, meta pequeño

Mobile: reducir 1-2 steps en hero/display (64px → 56px, etc.)

Jerarquía de uso

Fraunces (serif) — SOLO aquí:

Hero / landing titles
Page titles (H1)
Chapter titles (H2)
Step headlines (H3)
Pull quotes
Occasional large UI labels (course names, section titles)

Work Sans (sans) — aquí:

Todo el body text
Navigation
Buttons (UI labels)
Form labels
Captions
Metadata (dates, durations, authors)
Tab labels
Small text in general

JetBrains Mono — solo aquí:

Code blocks
Inline code (backticks)
Terminal output
File paths and commands
Technical IDs, timestamps
Numerical metadata (01/28, 14:30, etc.)

Regla absoluta:

NUNCA mezclar serif y sans en la misma línea (excepto si sans es text-small deliberado como sublabel).

Pairings canónicos

Hero de lesson

Fraunces 700 · 72px · text-primary    → "Claude Code Pro"
Work Sans 400 · 20px · text-secondary → "Lo que no sabías"
Work Sans 400 · 14px · text-muted     → "10 lessons · 2-3 semanas"

Chapter card

JetBrains Mono 500 · 12px · terracotta  → "CH 01"
Fraunces 600 · 24px · text-primary      → "El ecosystem de Claude Code"
Work Sans 400 · 14px · text-secondary   → "5 steps · 15 min"

Step content

Fraunces 600 · 32px · terracotta         → headline del step
Work Sans 400 · 18px · text-primary      → captions/narration
JetBrains Mono 400 · 14px · text-primary → code blocks
Work Sans 500 · 12px · text-muted        → meta "paso 3 de 5"

Detalles de OpenType / ajustes

Fraunces

Axes a explotar: SOFT (+50) para warmth, opsz size-appropriate
Features a activar: dlig (discretionary ligatures) OFF — mantener limpio; liga ON
letter-spacing: -0.01em en sizes grandes (40px+), 0 en resto
font-feature-settings: "ss02" 1 (opcional, para quirk controlado)

Work Sans

letter-spacing: 0 para body; 0.02em para uppercase micro labels
font-variant-numeric: tabular-nums para tables/metrics, oldstyle-nums si quieres elegance en texto largo

JetBrains Mono

Ligatures ON para código
letter-spacing: -0.01em
tabular-nums automático (monospace)

Uppercase / small caps

Regla general: usar con moderación.

Chapter numbers (CH 01, STEP 3): Work Sans 500, uppercase, letter-spacing: 0.08em, text-small
Section labels (TIER 1 — PRODUCTO): Work Sans 600, uppercase, letter-spacing: 0.1em, text-micro
Botones: NO uppercase (caja natural)
Navigation: NO uppercase

Italics

Fraunces italic tiene personalidad notable — úsalo para énfasis de voz: “¿te acuerdas del ejemplo pasado?”
Work Sans italic: menos usado, OK para citas cortas o émfasis sutil
JetBrains Mono italic: para comments en código, variables opcionales

Line length

Body text (párrafos largos): 60-75 caracteres por línea max → aproximadamente max-width: 65ch en CSS
Headlines hero: sin límite, pero idealmente 2 líneas max
Code blocks: no limit (scroll horizontal si necesario)

Prosody de español

Español tiene palabras más largas que inglés, acentos diacríticos, y puntuación específica (¿? ¡!). Considerar:

No usar H1 con abreviaturas — palabras completas leen mejor
Em-dash (—) es tu amigo — común en español editorial
Dejar respirar comillas: «español» o “español” (NO ‘single’)
Evitar word-break agresivo — español no corta bien como inglés

Anti-patterns tipográficos

Estos son los tells de AI-default que evitamos:

❌ Inter everywhere (especialmente Inter tight 500)
❌ System font stack puro sin fallback definido
❌ Titles en mayúsculas apretadas (letter-spacing negativo extremo)
❌ Mezclar 3+ sans-serif distintos
❌ Emoji como text replacement (usa emoji SPARINGLY, solo donde suma contexto)
❌ Headline gigante + body tiny (contraste excesivo)
❌ Italic solo para “énfasis decorativo” sin razón

Implementación técnica

CSS (Tailwind v4)

@theme {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;
}

Google Fonts load

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..700,50&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Weights cargados:

Fraunces: 400, 500, 600, 700 (con opsz + SOFT axis)
Work Sans: 400, 500, 600
JetBrains Mono: 400, 500

Total subset fonts: ~120-150KB. Aceptable para el carácter que da.

Verificación

Antes de aprobar cualquier layout:

¿Hay al menos una instancia de Fraunces visible? Si todo es sans-serif, falta identidad.
¿Los espaciados respiran? Spanish titles necesitan leading-tight que no corte.
¿El code block se ve como código (no como body)? Mono debe sentirse distinto, no solo “otra fuente”.
¿La jerarquía se lee como libro o como formulario? Debe leerse como libro.