Combinar tipografías: pares para títulos y texto

Elige un par de tipografías y mira al instante cómo funcionan juntos el título y el texto, incluso con tu propio texto. Todos los pares usan solo fuentes preinstaladas del sistema: nada que descargar y ninguna petición a Google ni a otros servidores. Cada par incluye la explicación, la altura de x medida y la disponibilidad por sistema operativo.

Par de tipografías

Tamaño del texto

El título se muestra 1,8 veces más grande.

Tus datos se guardan solo en este navegador.

Vista previa

El arte de un buen título

La buena tipografía no se nota. Guía la vista con calma por el texto, marca una jerarquía clara y deja que el contenido hable, tanto en el celular como en un monitor grande.

Tu propio título (opcional)Tu propio texto (opcional)

Tu texto se queda en esta ventana del navegador: no se guarda, no se envía y no aparece en la dirección de la página.

CSS para copiar

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Todos los pares de tipografías

Resultado

Par de tipografías: Georgia + Verdana
Por qué funciona: Contraste clásico entre una fuente con remates (serif) y una sin remates: Georgia para los títulos, Verdana para el texto. Matthew Carter diseñó ambas para pantalla, por eso sus proporciones y su ritmo encajan. Verdana tiene una altura de x muy grande y es ancha: usa el texto 1 px más pequeño.
Altura de x (medida): Georgia: 0,481 em · Verdana: 0,545 em – al mismo tamaño, el texto se ve alrededor de un 13 % más grande
Disponibilidad por sistema operativo: Sistema Título Texto
Windows 10/11 Georgia Verdana
macOS Georgia Verdana
iPhone/iPad Georgia Verdana
Android Noto Serif (sustituta) Roboto (sustituta)

Sistema	Título	Texto
Windows 10/11	Georgia	Verdana
macOS	Georgia	Verdana
iPhone/iPad	Georgia	Verdana
Android	Noto Serif (sustituta)	Roboto (sustituta)

Cómo se calcula

Cómo combinar tipografías

Dos fuentes combinan cuando son claramente distintas, pero de construcción parecida. La opción más segura es el contraste entre una serif y una sans serif: una para los títulos y otra para el texto. Dos serif o dos sans parecidas suelen parecer un descuido.

Igual de importante es la altura de x: la altura de las minúsculas en relación con el tamaño de la fuente. Una fuente con altura de x grande (Verdana: 0,545 em) se ve bastante mayor al mismo tamaño que una con altura de x pequeña (Calibri: 0,464 em). Si las alturas de x de un par están muy separadas, compénsalo con el tamaño. Los valores provienen de la tabla OS/2 de los archivos de fuentes de Windows 11.

¿Por qué solo fuentes del sistema?

Las fuentes del sistema ya están instaladas en el dispositivo: la página carga más rápido, el texto no salta al cargar y no se hace ninguna petición a servidores de terceros. Cargar fuentes web directamente desde una CDN envía la dirección IP de cada visitante a ese proveedor, algo delicado en materia de protección de datos. Si quieres fuentes propias, alójalas en tu servidor.

Pila de fuentes: ¿por qué varios nombres?

Ninguna fuente está en todos los sistemas. Por eso el CSS enumera varias fuentes seguidas (una pila de fuentes): el navegador usa la primera instalada y una familia genérica como serif o sans-serif cubre el resto. La tabla muestra qué fuente aparece de verdad en Windows, macOS, iPhone/iPad y Android, según las listas de fuentes de Microsoft y Apple y la configuración de fuentes de Android (consultadas el 27/09/2026). Android no trae Georgia ni Verdana y muestra Noto Serif o Roboto; en Linux las fuentes cambian según la distribución.

Consejos para un texto legible

En pantalla, usa al menos 16 px para el texto, mejor 17–20 px, con un interlineado de 1,5 a 1,7.
Haz los títulos bastante más grandes (1,6 a 2 veces) y con más peso que el texto; así basta incluso una sola familia.
Limita las líneas a unos 60–80 caracteres.
Revisa el contraste de color: el gris sobre blanco se queda corto enseguida; para eso está el comprobador de contraste.

Preguntas frecuentes

¿Qué tipografías combinan bien?

Los pares de una serif y una sans serif funcionan casi siempre: Georgia con Verdana, Palatino con la fuente del sistema o Cambria con Calibri. Lo importante es un contraste claro y alturas de x parecidas.

¿Cuántas tipografías debe tener una web?

Dos como máximo: una para títulos y otra para el texto. Una tercera, por ejemplo monoespaciada para código, solo si tiene una función propia.

¿Georgia y Verdana están en todos los dispositivos?

En Windows, macOS e iOS, sí. Android no las incluye y muestra Noto Serif o Roboto; por eso cada pila de fuentes debe terminar en una familia genérica como serif o sans-serif.

¿Qué es la altura de x?

La altura de una x minúscula respecto al tamaño de la fuente. Una altura de x grande mejora la legibilidad al mismo tamaño, pero pide algo más de interlineado.

¿Por qué no cargar fuentes desde una CDN?

Cada visita envía entonces la IP del visitante al proveedor de fuentes y añade una descarga antes de mostrar el texto. Las fuentes del sistema evitan ambas cosas; las fuentes propias se pueden alojar en tu servidor.

¿Se guarda mi texto de vista previa?

No. Tus títulos y textos solo permanecen en esta ventana. Solo se recuerdan el par elegido y el tamaño de la fuente.

Fuentes y base legal

Última actualización: 27 de septiembre de 2026