ES

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

Para combinar tipografías, 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.

Fuente: Microsoft Learn – Font List Windows 11 (versión del 21 de abril de 2022, consultado el 27 de septiembre de 2026). Actualizado: .

px
El título se muestra 1,8 veces más grande.
Mi caja de herramientasTus 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 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
SistemaTítuloTexto
Windows 10/11GeorgiaVerdana
macOSGeorgiaVerdana
iPhone/iPadGeorgiaVerdana
AndroidNoto 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.

Cómo combinar tipografías

  1. Elige un par de tipografías de la lista, por ejemplo Georgia + Verdana.
  2. Ajusta el tamaño del texto (12–28 px) y, si quieres, prueba tu propio texto en la vista previa.
  3. Revisa la justificación, la altura x y la disponibilidad por sistema operativo y copia el CSS.

Ejemplo: Georgia + Verdana con texto de 18 px: el título se muestra 1,8 veces más grande, es decir, 1,8 × 18 = 32,4 px. La altura x es de 0,481 em (Georgia) y 0,545 em (Verdana): con el mismo tamaño, el texto parece un 13 % más grande.

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

Más herramientas de diseño web: elige colores con el generador de paletas de colores, conviértelos con el convertidor de colores y crea fondos con el generador de degradados CSS.

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: · Principios editoriales

Herramientas relacionadas