La tipografía es la decisión de diseño que más se nota y menos se piensa. Una buena tipografía no solo hace que tu web se vea profesional: mejora la legibilidad, refuerza la marca y, con las fuentes variables actuales, hasta ayuda a que la página cargue más rápido.
Te he ampliado la lista a 20 tipografías de Google Fonts, organizadas por caso de uso real: cuerpo de texto, titulares y proyectos técnicos. Todas gratuitas, con licencia clara y disponibles directamente desde Google Fonts.
Sans-serif para cuerpo de texto y UI
La categoría que más vas a usar: legible en pantalla a tamaños pequeños y con suficiente variedad de pesos para jerarquía visual sin cambiar de familia.
- Inter: la que más he usado los últimos años. Fuente variable con nueve pesos, es hoy el estándar de facto para UI de producto y marketing SaaS.
- Hanken Grotesk: alternativa moderna a Lato u Open Sans, con carácter humanista y optimizada para pantalla. Fuente variable, nueve pesos.
- Plus Jakarta Sans: proporciones amigables y muy buena cobertura de idiomas. Funciona igual de bien como cuerpo que como titular.
- Geist Sans: terminales más nítidas que Inter, proporciones muy actuales. Mi elección cuando el proyecto es de perfil tech o SaaS.
- Space Grotesk: geométrica y con estructura técnica, perfecta para startups y proyectos con personalidad más contemporánea que neutra.
Serif para titulares y proyectos editoriales
Para dar carácter a un titular o si tu proyecto tiene un enfoque editorial, de moda o de contenido largo donde la serif aporta calidez que la sans-serif no da.
- Playfair Display: alto contraste entre trazos, ideal para moda y editorial. Es la que más «presencia» da en un titular grande.
- DM Serif Display: más contenida que Playfair, pensada específicamente para titulares. Combina de forma natural con DM Sans si buscas coherencia de familia.
- Fraunces: fuente variable con ejes de peso, tamaño óptico y hasta de irregularidad («wonk»), así que sirve tanto para cuerpo como para display ajustando un solo archivo.
- Libre Baskerville: revival clásico optimizado para pantalla, con las proporciones tradicionales de Baskerville pero legible en digital.
- EB Garamond: serif humanista con detalle refinado, mejor a partir de 16px de cuerpo — no la uses más pequeña o pierde legibilidad.
Monoespaciadas para proyectos técnicos
Si tu web incluye bloques de código, documentación técnica o simplemente quieres un acento monoespaciado en detalles de UI:
- JetBrains Mono: fuente variable con ligaduras de código, considerada de las mejores monoespaciadas gratuitas para programación.
- Fira Code: set amplio de ligaduras, proporciones algo más anchas que JetBrains Mono, muy usada en documentación.
- Source Code Pro: monoespaciada tradicional de Adobe sin ligaduras, siete pesos, buena opción para contenido educativo sin distracción visual.
- Geist Mono: proporciones comprimidas y modernas, combina de forma natural con Geist Sans si ya la usas como sans-serif principal.
Fuentes del sistema: cuándo sí tienen sentido
Arial, Verdana o Tahoma no han desaparecido: siguen siendo la opción correcta como fallback en tu pila de fuentes CSS (font-family: 'Inter', Arial, sans-serif;), para que la web no se rompa visualmente si por lo que sea la fuente principal no llega a cargar. Lo que ya no tiene sentido en 2026 es que sean tu tipografía principal cuando Google Fonts te da alternativas gratuitas con mucho más carácter.
Qué son las fuentes variables y por qué importan
Una fuente variable es un único archivo que contiene todos los pesos e incluso variantes de una familia (fino, regular, negrita, y a veces ancho o tamaño óptico), en vez de un archivo separado por cada peso.
- Menos peticiones, más velocidad: cargas un solo archivo en vez de cuatro o cinco, lo que mejora directamente tus Core Web Vitals.
- Más control con CSS: puedes animar o interpolar el peso de la fuente con la propiedad
font-variation-settings, algo imposible con fuentes estáticas. - Cómo saber si una fuente es variable: en Google Fonts, búscala y comprueba si aparece la etiqueta «Variable» junto al nombre; Inter, Hanken Grotesk, Fraunces, JetBrains Mono y Geist lo son, entre otras de esta lista.
Cómo combinar dos tipografías sin equivocarte
- Usa máximo dos familias tipográficas por proyecto: una para titulares, otra para cuerpo. Una tercera solo si es monoespaciada para código o detalles técnicos.
- Combina por contraste, no por similitud: una serif de carácter (Playfair Display) con una sans-serif neutra (Inter) funciona mejor que dos sans-serif parecidas entre sí.
- Prueba la combinación con texto real de tu proyecto, no con «Lorem ipsum» — algunas parejas fallan con acentos o mayúsculas que el texto de relleno no muestra.
- Si no confías en tu criterio, usa una herramienta de pairing como Fontjoy o Fontpair, que sugieren combinaciones ya probadas a partir de una fuente base.
Más sobre tipografía en el blog
- Tipografía: elige y usa fuentes, el pilar de la categoría con el resto de guías y colecciones.
- ¿Cuáles son las mejores tipografías para logos?, si lo que necesitas es tipografía de marca, no de interfaz web.
- Estupendas tipografías para títulos, complemento directo de la sección serif de este artículo.
Preguntas frecuentes
¿Qué tipografía es más rápida de cargar?
Una fuente variable como Inter o Hanken Grotesk: un solo archivo cubre todos los pesos, así que reduces peticiones frente a cargar cada peso por separado.
¿Cuántas fuentes debo usar en una web?
Como máximo dos: una para titulares y otra para cuerpo. Añade una tercera monoespaciada solo si tu proyecto incluye código o datos técnicos.
¿Las fuentes del sistema (Arial, Verdana) siguen sirviendo?
Sí, pero como fallback en tu pila de fuentes CSS, no como tipografía principal. Google Fonts ofrece alternativas gratuitas con mucho más carácter y sin coste de rendimiento relevante.
¿Qué es una fuente variable?
Un único archivo de fuente que contiene todos los pesos y variantes de una familia, en vez de un archivo por cada peso. Reduce peticiones y mejora la velocidad de carga.
Con estas 20 tipografías tienes de sobra para cualquier proyecto, del más técnico al más editorial. Elige máximo dos, pruébalas con tu contenido real y no las cambies cada pocos meses: la consistencia también es parte de la marca.
