Combinador de Fuentes

Prueba pares de tipografías con tu propio texto y compara cómo se ve una fuente principal junto a una secundaria antes de llevar la principal al editor.

Tamaño36px

Texto secundario

Tamaño secundario16px

Respuesta rápida

El combinador muestra pares tipográficos de ejemplo para comparar jerarquía, contraste y legibilidad. Puedes personalizar titular y subtítulo, comparar tamaños, copiar el CSS de cada propuesta y enviar la fuente principal al editor para seguir diseñando.

Qué compara: Una fuente principal y una secundaria en el mismo ejemplo.
Qué puedes cambiar: Titular, subtítulo y tamaño de cada nivel.
Salida: Vista previa editable y CSS de ejemplo para los dos niveles.
Criterio: Las combinaciones son sugerencias visuales, no reglas tipográficas universales.

Límite: El CSS copiado no descarga ni instala las fuentes; debes cargarlas aparte en tu proyecto. La legibilidad depende del idioma, tamaño y contexto: compara con el texto real.

Elegante & Moderno

Playfair DisplaySistema

Lettering Digital

Una frase breve para comprobar legibilidad.

Ver CSS de esta combinación

Código orientativo para una web: establece las fuentes y tamaños de ambos textos. Debes cargar cada fuente en tu proyecto por separado; copiar este CSS no la instala.

/* Elegante & Moderno — carga las fuentes en tu proyecto antes de usarlas. */
.lettering-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 36px;
  line-height: 1.15;
}

.lettering-subtitle {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Impacto & Precisión

OswaldLora

CALIGRAFÍA

Una frase breve para comprobar legibilidad.

Ver CSS de esta combinación

Código orientativo para una web: establece las fuentes y tamaños de ambos textos. Debes cargar cada fuente en tu proyecto por separado; copiar este CSS no la instala.

/* Impacto & Precisión — carga las fuentes en tu proyecto antes de usarlas. */
.lettering-title {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 36px;
  line-height: 1.15;
}

.lettering-subtitle {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
}

Tecnológico & Estructurado

Space GroteskJetBrains Mono

Diseño Digital

Una frase breve para comprobar legibilidad.

Ver CSS de esta combinación

Código orientativo para una web: establece las fuentes y tamaños de ambos textos. Debes cargar cada fuente en tu proyecto por separado; copiar este CSS no la instala.

/* Tecnológico & Estructurado — carga las fuentes en tu proyecto antes de usarlas. */
.lettering-title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 36px;
  line-height: 1.15;
}

.lettering-subtitle {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  line-height: 1.5;
}

Suave & Amigable

OutfitOutfit

Trazos Finos

Una frase breve para comprobar legibilidad.

Ver CSS de esta combinación

Código orientativo para una web: establece las fuentes y tamaños de ambos textos. Debes cargar cada fuente en tu proyecto por separado; copiar este CSS no la instala.

/* Suave & Amigable — carga las fuentes en tu proyecto antes de usarlas. */
.lettering-title {
  font-family: "Outfit", Arial, sans-serif;
  font-size: 36px;
  line-height: 1.15;
}

.lettering-subtitle {
  font-family: "Outfit", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Retro & Clásico

LobsterSistema

Estilo Vintage

Una frase breve para comprobar legibilidad.

Ver CSS de esta combinación

Código orientativo para una web: establece las fuentes y tamaños de ambos textos. Debes cargar cada fuente en tu proyecto por separado; copiar este CSS no la instala.

/* Retro & Clásico — carga las fuentes en tu proyecto antes de usarlas. */
.lettering-title {
  font-family: "Lobster", cursive;
  font-size: 36px;
  line-height: 1.15;
}

.lettering-subtitle {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Monocromo & Minimalista

JetBrains MonoSistema

Minimalismo

Una frase breve para comprobar legibilidad.

Ver CSS de esta combinación

Código orientativo para una web: establece las fuentes y tamaños de ambos textos. Debes cargar cada fuente en tu proyecto por separado; copiar este CSS no la instala.

/* Monocromo & Minimalista — carga las fuentes en tu proyecto antes de usarlas. */
.lettering-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 36px;
  line-height: 1.15;
}

.lettering-subtitle {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Cómo elegir un par tipográfico que funcione

1. Comprueba la jerarquía

Escribe el mismo título y subtítulo en las seis tarjetas. Baja el tamaño del titular para ver si las dos líneas siguen distinguiéndose.

2. Prueba el texto verdadero

Incluye tildes, eñes y palabras largas. Observa el espacio interior de las letras y cómo se comporta la combinación en móvil.

3. Copia solo lo necesario

El CSS generado conserva la familia y los tamaños del par. Necesitarás cargar las fuentes y comprobar licencias según el uso final.

Ejemplo: para una invitación, compara un encabezado con Playfair Display y un subtítulo sencillo. Si el título resulta demasiado decorado en pantalla pequeña, reduce el tamaño o prueba otra pareja. Puedes enviar el titular al editor, pero esa acción no crea un bloque de dos textos en el lienzo.