Explora las 6 tendencias clave en tipografía web: fuentes variables, escalado fluido, display audaz, branding, accesibilidad y consideraciones técnicas.
🖱️ Redimensiona tu ventana para ver la tipografía fluida en acción
Un solo archivo, infinitas variaciones de peso, ancho e inclinación
Las fuentes variables son el avance técnico más importante en tipografía web. Pasa el cursor sobre cada tarjeta para ver la transición suave de peso:
font-weight: 200 → 900
Transición suave sin cargar múltiples archivos
Animación CSS fluida
Perfecto para interactividad
Rendimiento optimizado
Reduce solicitudes HTTP
/* Fuente variable con transición */ h1 { font-family: 'Inter', sans-serif; font-weight: 200; transition:
font-weight 0.3s ease; } h1:hover { font-weight: 900; /* Transición suave */ } /* Control de múltiples ejes */
.custom { font-variation-settings: 'wght' 650, /* Peso */ 'wdth' 90, /* Ancho */ 'slnt' -5; /* Inclinación */ }
Texto que escala suavemente entre mínimo y máximo sin saltos
Compara tres enfoques para texto responsivo. Redimensiona tu ventana para ver las diferencias:
font-size: 24px;
Mismo tamaño en todas las pantallas
clamp(1.2rem, 3vw, 2.5rem)
Escala inteligentemente
/* La función clamp() toma 3 valores */ .hero h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); /* ↑ ↑ ↑ mínimo
preferido máximo (32px) (escala) (64px) */ } /* Beneficios: */ /* ✓ Sin media queries para tipografía */ /* ✓
Escalado suave y continuo */ /* ✓ Límites seguros para legibilidad */
Tipografía oversized como elemento principal de diseño
Tipografía como Hero Visual
.typographic-hero { font-size: clamp(4rem, 15vw, 12rem); font-weight: 900; line-height: 0.9; letter-spacing:
-0.02em; text-transform: uppercase; } /* Tendencias 2024-2025: */ /* • Sans-serif neo-grotescos (claridad) */ /* •
Serifs elegantes (sofisticación) */ /* • Monospace retro (tech/nostalgia) */
Las fuentes transmiten personalidad y emoción
Cada contexto de marca requiere elecciones tipográficas específicas:
Sans-serif elegante + espaciado generoso = Moderno, confiable
Serif delicada con tracking amplio = Sofisticación, exclusivo
Monospace o geométrica audaz = Edgy, técnico
/* Fintech: Inter (sans-serif elegante) */ .fintech { font-family: 'Inter', sans-serif; font-weight: 300;
letter-spacing: 0.05em; } /* Luxury: Playfair Display (serif elegante) */ .luxury { font-family: 'Playfair
Display', serif; font-weight: 400; letter-spacing: 0.15em; } /* Tech: Space Mono (monospace) */ .tech {
font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; }
Diseño inclusivo no es opcional—es fundamental
Este texto negro sobre blanco tiene un ratio de 21:1, superando ampliamente el mínimo WCAG de 4.5:1 para texto normal.
Este texto gris claro es difícil de leer y no cumple con los estándares de accesibilidad. Evita esto en producción.
/* Checklist de Accesibilidad */ /* 1. Contraste suficiente */ body { color: #1a1a1a; /* 4.5:1 mínimo */
background: white; } /* 2. Tamaño base adecuado */ body { font-size: 1rem; /* 16px base, usar rem */ } /* 3.
Longitud de línea */ p { max-width: 75ch; /* 60-80 caracteres */ line-height: 1.6; /* 1.5-1.8 para cuerpo */ } /*
4. Respetar preferencias del usuario */ /* No uses px fijos - usa rem para que */ /* los usuarios puedan ajustar
el tamaño */
Font stacks, loading strategy y unidades relativas
Si la fuente personalizada no carga, las fuentes del sistema toman el relevo:
1º Intento: 'Inter' (Google Font)
2º Fallback: -apple-system, Segoe UI (Sistema)
3º Fallback: sans-serif (Genérica)
/* Font Stack Completa */ body { font-family: 'Inter', /* Fuente personalizada */ -apple-system, /* macOS San
Francisco */ BlinkMacSystemFont, /* macOS Chrome */ 'Segoe UI', /* Windows */ Roboto, /* Android */ sans-serif; /*
Genérica */ } /* Control de Font Loading */ @font-face { font-family: 'MyFont'; src: url('font.woff2')
format('woff2'); font-display: swap; /* Muestra fallback inmediatamente */ } /* Opciones de font-display: */ /* •
swap: Texto visible al instante ✓ */ /* • block: Espera fuente (riesgo FOIT) */ /* • fallback: Compromiso entre
ambos */ /* • optional: Browser decide según conexión */
p { font-size: 16px; } /* No respeta zoom del usuario */
p { font-size: 1rem; } /* Respeta preferencias del usuario */