"La tipografía es el 95% del diseño", dice una frase atribuida a Oliver Reichenstein. Es solo en parte una exageración: en una interfaz digital, el texto es el elemento dominante por superficie y por importancia informativa. Elegir bien las fuentes y definir una escala tipográfica coherente es, posiblemente, la decisión visual más impactante que toma un diseñador, y también una de las que más a menudo se equivoca.
Este artículo cubre los tipos fundamentales de fuentes tipográficas, cómo clasificarlas, cómo elegirlas para un producto digital en 2026, el asunto de los variable fonts que está cambiando las reglas y las fuentes de sistema modernas que permiten un rendimiento excelente.
Lo que vas a aprender:
- La clasificación de las fuentes por familia (serif, sans-serif, monospace, display)
- Cómo elegir fuentes para la legibilidad digital
- Los variable fonts y por qué están transformando la web
- Las fuentes de sistema modernas y cuándo usarlas
- Cómo construir una escala tipográfica para UI
- Las reglas de accesibilidad tipográfica
Las 5 familias principales de fuentes
Serif
Las serif son las fuentes con pequeños remates (las "gracias") en los extremos de las letras. Clásicas: Times New Roman, Georgia, Garamond, Playfair. Comunican tradición, formalidad, autoridad — el lenguaje de los periódicos, la literatura y el derecho.
En web y UI las serif funcionan bien para:
- Editorial online (Medium usa una serif para los artículos)
- Marcas que quieren comunicar herencia (bancos, instituciones, lujo — El País, BBVA, Santander)
- Contenidos largos pensados para una lectura cómoda
Históricamente se desaconsejaban para el cuerpo de texto digital por temas de renderizado, pero con las pantallas modernas de alta densidad esa limitación ha desaparecido.
Sans-serif
Las sans-serif son las fuentes sin remates. Clásicos digitales: Helvetica, Arial, Roboto, Inter, SF Pro, Poppins. Comunican modernidad, limpieza, neutralidad — el lenguaje del minimalismo y de la mayoría de productos digitales de 2026.
En web y UI las sans-serif son la opción dominante para:
- Body text de apps y sitios
- Titulares en productos tech modernos
- Dashboards y herramientas profesionales
- Cualquier situación donde la legibilidad sea prioritaria
La fuente más usada en productos tech internacionales en los últimos años es Inter, creada por Rasmus Andersson específicamente para UI. Google usa Roboto (Android) y Google Sans, Apple usa SF Pro (iOS/macOS), Microsoft tiene Segoe UI y productos como Glovo, Cabify, Rappi o Mercado Libre suelen apostar por Inter o Poppins.
Monospace
Las monospace son fuentes en las que cada letra ocupa el mismo espacio horizontal. Clásicas: Courier, Consolas, Fira Code, JetBrains Mono, Source Code Pro.
En web y UI se usan para:
- Código fuente (la función original)
- Datos numéricos en tabla (alineación perfecta de cifras)
- Contraseñas y campos de credenciales (donde cada carácter debe distinguirse bien)
- Efectos estilísticos tech o "geek-retro" en ciertas marcas
Display / Decorativas
Las fuentes display están pensadas para titulares e impacto visual, no para el body text. Muy caracterizadas: Abril Fatface, Lobster, Oswald, Bungee. Son expresivas pero cansan al leer en grandes cantidades.
Úsalas para:
- Titulares grandes y hero sections
- Logotipos e identidades visuales
- Pósters y comunicaciones de impacto
- Marcas con personalidad fuerte
Nunca las uses para el body text de una interfaz: la legibilidad se rompe por debajo de 20–24 pt.
Manuscritas / Script
Las script imitan la caligrafía manual. Clásicas: Pacifico, Caveat, Sacramento, Brush Script. Comunican informalidad, arte, personalidad.
En web y UI:
- Úsalas con moderación (solo como acento decorativo, nunca para body)
- Verifica la legibilidad en tamaños pequeños
- No las mezcles con otras fuentes decorativas en el mismo proyecto
Cómo elegir fuentes para legibilidad digital
La legibilidad en pantalla depende de varios factores, no solo de la familia.
Contraste de los trazos
Las fuentes con contraste uniforme (sans-serif modernas, muchas serif como Georgia) son más legibles en tamaños pequeños que las fuentes con alto contraste entre trazos finos y gruesos (serif clásicas como Bodoni). Para body text por debajo de 16px, elige fuentes con contraste uniforme.
x-height
La altura de las letras minúsculas respecto a las mayúsculas. Una x-height alta mejora la legibilidad en tamaños pequeños. Inter, Roboto y SF Pro tienen x-heights generosas; Garamond mucho menos.
Distinción entre caracteres similares
Letras como I, l, 1, 0, O deben ser visualmente distinguibles. Fuentes bien diseñadas como Inter y JetBrains Mono lo resuelven; fuentes mal diseñadas generan ambigüedad sobre todo en formularios.
Renderizado en pantalla
Las fuentes modernas están pensadas y testeadas para el renderizado en pantallas actuales. Las antiguas (diseñadas para imprenta) a menudo rinden mal. Verifica siempre tu fuente en dispositivos reales, no solo en la herramienta de diseño.
Variable fonts: la revolución post-2020
Los variable fonts son una tecnología (soportada por todos los navegadores modernos) que permite tener en un único archivo todas las variaciones de peso, anchura y estilo de una tipografía. En lugar de cargar 8 archivos (regular, medium, bold, extra-bold, cada uno también en italic), cargas un solo variable font e interpolas entre los valores de forma dinámica.
Ventajas:
- Rendimiento: un solo archivo en vez de 8, peso muy reducido
- Flexibilidad: cualquier peso entre 100 y 900, no solo los predefinidos
- Animaciones: puedes animar el peso, la anchura o la inclinación en tiempo real
- Design systems más ricos: pesos intermedios personalizados que antes no existían
Variable fonts destacadas y gratuitas en 2026:
- Inter — el más usado en UI digital
- Roboto Flex — versión variable de Roboto
- Recursive — de las más flexibles, con eje sans/mono
- Fraunces — variable serif expresivo
- Figtree, Geist, Outfit — alternativas modernas populares
Fuentes de sistema: rendimiento sin compromisos
Las fuentes de sistema son las fuentes ya instaladas en los dispositivos del usuario. Usarlas significa cero tiempo de carga y compatibilidad total con el estilo del sistema operativo.
El stack moderno de fuentes de sistema en web:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
Esta secuencia le dice al navegador: "usa SF Pro en Mac/iOS, Segoe UI en Windows, Roboto en Android, Helvetica Neue como fallback...". El resultado es un sitio que usa la fuente nativa del dispositivo: rendimiento máximo y estética "nativa".
Cuándo usar fuentes de sistema:
- Productos donde el rendimiento es crítico (e-commerce, landing pages de alto tráfico)
- Productos que quieren integrarse visualmente con el sistema (apps con estética nativa)
- Marcas sin una identidad tipográfica fuerte que comunicar
Cuándo NO usarlas:
- Cuando la identidad de marca requiere una fuente específica
- Cuando quieres coherencia visual multiplataforma (tu producto debe verse igual en iOS, Android y web)
Cómo construir una escala tipográfica para UI
Una escala tipográfica bien diseñada tiene 6–10 tamaños predefinidos que cubren todos los usos de un producto. Un ejemplo de escala modular clásica (ratio 1.25, "Major Third"):
- Caption: 12px
- Small: 14px
- Body: 16px (base)
- Body Large: 18px
- Heading 4: 20px
- Heading 3: 24px
- Heading 2: 30px
- Heading 1: 38px
- Display: 48px
- Display Large: 64px
Los 16px como base: es el tamaño por defecto del navegador, considerado universalmente el mínimo para una lectura cómoda del cuerpo de texto en pantalla. Bajar de 14px en desktop y de 15–16px en móvil se desaconseja para el body text.
Para cada tamaño define:
- Line-height: 1.4–1.6 para body, 1.1–1.3 para titulares grandes
- Peso típico: regular para body, medium/semibold para énfasis, bold para titulares
- Spacing: letter-spacing ligeramente negativo para titulares grandes, neutro para body
Herramientas para generar escalas tipográficas: typescale.com, type-scale.com, modularscale.com.
Reglas de accesibilidad tipográfica
Reglas mínimas para una tipografía accesible en 2026:
- Tamaño mínimo del body: 16px en móvil; 14–15px solo tolerable para elementos secundarios como captions
- Contraste texto/fondo: al menos 4.5:1 (WCAG 2.2 AA) para body, 3:1 para texto grande (24px+)
- Line-height: nunca inferior a 1.4 para textos largos
- Longitud de línea: 45–75 caracteres por línea para una lectura cómoda (demasiado largo fatiga)
- Soporte al redimensionado: las fuentes deben escalar cuando el usuario aumenta el tamaño del texto en el navegador (usa
rem, nopxfijos) - Fuentes amigables con la dislexia: para productos dirigidos a personas con dislexia, considera OpenDyslexic o Lexend
Estas reglas no son solo buenas prácticas: son la base de cumplimiento con la UNE-EN 301 549, el European Accessibility Act, la Ley 1618 de 2013 en Colombia y la NOM-034 en México. Consulta la referencia de WCAG 2.2 para la especificación técnica completa.
Mezclas y combinaciones de fuentes
Reglas empíricas cuando combinas varias fuentes:
- Máximo 2 fuentes en la mayoría de proyectos
- Una para titulares, otra para body es la combinación clásica
- Nunca dos fuentes de la misma familia estilística (dos serif similares, dos sans-serif similares) — confunden
- Combinaciones clásicas que funcionan: serif display + sans body (p. ej. Playfair + Inter); sans-serif moderna + monospace para código
Preguntas frecuentes
¿Cuánto cuesta una fuente profesional?
Las fuentes gratuitas de calidad profesional (todo el catálogo de Google Fonts, Inter, Figtree, etc.) cubren el 95% de los proyectos. Las fuentes de pago de foundries (Commercial Type, Grilli Type, Dinamo, FontShop) cuestan desde 50 € hasta varios miles de euros según la licencia, y solo se justifican para marcas con identidad tipográfica fuerte.
¿Puedo usar Google Fonts en proyectos comerciales?
Sí: todas las fuentes del catálogo de Google Fonts son de código abierto con licencia SIL Open Font License, utilizables en proyectos comerciales sin coste y sin atribución obligatoria.
¿Qué fuente es mejor para UI?
Depende de la marca y del contexto. Para apps tech modernas, Inter es probablemente la más usada del mundo en 2026. Para productos con personalidad más cálida, Figtree, Geist u Outfit son alternativas sólidas. Para productos editoriales serif, Fraunces o Playfair Display funcionan bien.
¿Los variable fonts están soportados en todas partes?
Sí: todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan variable fonts desde 2018–2020. Ya no hay razones técnicas para evitarlos en 2026.
¿Cuántas familias puedo usar en un proyecto?
Idealmente un máximo de 2. Con 3 empiezas a arriesgar incoherencia visual; por encima de 3 casi siempre es un error. Las excepciones son proyectos editoriales o experimentos de marca en los que la variedad tipográfica forma parte de la identidad.
¿Es mejor px o rem para el tamaño de fuente?
Usa rem: escala automáticamente con las preferencias del usuario (quien ha configurado el navegador para texto más grande lo ve así). Los px fijos rompen el redimensionado accesible.
Próximos pasos
La tipografía es un tema profundo que requiere años de estudio y práctica. Para seguir:
- Profundiza en la guía completa de UI Design
- Estudia los principios Gestalt que guían la jerarquía visual
- Lee la guía de accesibilidad del color para combinar contraste y legibilidad
En el Curso de Visual Design de CorsoUX dedicamos una sección completa a la tipografía con ejercicios prácticos y feedback de mentores, incluidos proyectos de construcción de escalas tipográficas completas.
