Explorador de combinaciones de fuentes

¿Qué es Explorador de combinaciones de fuentes?

El Explorador de Combinaciones de Fuentes es una herramienta gratuita en el navegador para diseñadores web, desarrolladores y creadores de contenido que buscan una combinación cuidada de título y cuerpo sin rastrear bibliotecas de fuentes. Dos selectores buscables e independientes te permiten filtrar 48 Google Fonts seleccionadas por serif, sans, display o mono y elegir una tipografía para cada rol, mientras que los controles por rol fijan el grosor, el tamaño, el interlineado y el espaciado. Una vista previa en vivo muestra tu titular y tu párrafo con las fuentes reales, y un botón de barajar propone combinaciones aleatorias cuando necesitas inspiración. Cuando te guste, copia el CSS generado en el formato que prefieras — una regla @import, una etiqueta HTML link o importaciones de estilo Fontsource — y llévalo a una página de aterrizaje, un tema de blog, una presentación o un sistema de diseño.

Cómo usar Explorador de combinaciones de fuentes

1. En el selector de título, filtra por serif, sans, display o mono, escribe para buscar y haz clic en una fuente para seleccionarla.
2. Haz lo mismo en el selector de cuerpo para elegir una tipografía complementaria para el texto de párrafo.
3. Abre la configuración para fijar el grosor, el tamaño, el interlineado y el espaciado de cada rol.
4. Escribe tu propio titular y frase en el campo de muestra, o déjalo en blanco para el texto por defecto; pulsa Barajar para ideas de combinación al azar.
5. Elige el formato de salida — @import, <link> o Fontsource — y copia el CSS generado en tu hoja de estilos o proyecto.

Ejemplos

Título: Playfair Display 700 · Cuerpo: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Formato: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Preguntas frecuentes

¿Cómo elijo las dos fuentes?

Cada rol tiene su propio selector. Filtra el catálogo por serif, sans, display o mono, escribe parte del nombre de una familia para buscar y haz clic en un resultado para seleccionarlo. El título y el cuerpo se eligen de forma independiente, y el botón Barajar escoge un par al azar por ti.

¿Puedo controlar grosor, tamaño, interlineado y espaciado?

Sí. Abre la configuración para fijar el grosor, el tamaño en píxeles, el interlineado y el espaciado (en em) por separado para el título y el cuerpo. Cada cambio aparece tanto en la vista previa en vivo como en el CSS copiado.

¿Qué formatos de salida puedo copiar?

Tres: una regla CSS @import, una etiqueta HTML <link> con sugerencias preconnect e importaciones npm de estilo Fontsource (npm i @fontsource/… más líneas de importación por grosor). Los tres incluyen las mismas reglas de font-family, grosor, tamaño, interlineado y espaciado para h1–h3 y body.

¿De dónde vienen las fuentes y es privado mi texto?

Cuando eliges una combinación, tu navegador carga solo esas dos familias directamente desde la API pública de Google Fonts CSS en fonts.googleapis.com — una petición a terceros hecha desde tu navegador, no a través de nuestros servidores. Tu texto de muestra y tu configuración permanecen por completo en tu dispositivo.

¿Qué fuentes se incluyen?

Un conjunto seleccionado de 48 Google Fonts populares entre serif, sans-serif, display y monoespaciadas — incluidas Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono y más.