# Laboratorio de Emparejamiento de Fuentes Web Previsualiza un emparejamiento de Google Fonts de titular + cuerpo con controles de peso e interlínea, y copia un snippet CSS @import + variables listo para pegar. Registro curado de 22 fuentes y 7 presets. > Página canónica: https://elysiatools.com/es/tools/webfont-pairing-lab - **Categoría:** Design - **Palabras clave:** emparejamiento de fuentes, google fonts, tipografía, fuentes web, fuente titular cuerpo, css import, @import, combinación de fuentes, tipo de letra, webfont ## Descripción general Previsualiza un emparejamiento de **titular + cuerpo** de Google Fonts en paralelo, ajusta peso e interlínea, y copia un snippet CSS listo para pegar. **Cómo usar** 1. Elige una **fuente de titular** y una **fuente de cuerpo** del registro curado de 22 fuentes. 2. Ajusta el **peso del titular** y el **peso del cuerpo**; cada fuente se ajusta al peso disponible más cercano. 3. Modifica **tamaño del cuerpo** (px) e **interlínea**; la previsualización se actualiza. 4. Personaliza opcionalmente los textos de **ejemplo titular** y **ejemplo cuerpo**. 5. Copia el CSS generado — incluye un único `@import` que carga solo los dos pesos elegidos, variables CSS y reglas para `h1, h2, h3` y `body, p`. **Emparejamientos curados** — el panel sugiere 7 combinaciones probadas (editorial, SaaS, noticias, tech, artesanal, póster, dev-tool). El registro cubre Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Work Sans, DM Sans, Nunito, Space Grotesk, Playfair Display, Merriweather, Lora, Source Serif Pro, Crimson Text, EB Garamond, Libre Baskerville, Oswald, Bebas Neue, Caveat, JetBrains Mono y Fira Code. ## Entradas - **Fuente de título** (select): The display / heading typeface. - **Peso del título** (number): Snaps to the nearest available weight for the chosen font. - **Fuente de cuerpo** (select): The body / paragraph typeface. - **Peso del cuerpo** (number): Snaps to the nearest available weight for the chosen font. - **Tamaño del cuerpo (px)** (number): Body paragraph font-size in pixels. - **Altura de línea** (number): Unitless line-height for body text. 1.4–1.7 is the readable range. - **Texto de muestra del título** (text): Optional custom heading text. Defaults to a neutral sample. - **Texto de muestra del cuerpo** (textarea): Optional custom body paragraph(s). Defaults to a neutral sample. ## Cuándo usarlo - Al diseñar la estructura tipográfica de un nuevo sitio web y querer probar la legibilidad de títulos y párrafos en paralelo. - Cuando necesite generar un código CSS limpio que cargue únicamente los pesos de fuente requeridos para evitar sobrecargar la web. - Al buscar inspiración rápida mediante combinaciones tipográficas predefinidas para sectores como SaaS, editorial o tecnología. ## Cómo funciona - Seleccione una fuente para el título y otra para el cuerpo desde el catálogo curado de 22 familias tipográficas. - Ajuste los pesos tipográficos, el tamaño del texto en píxeles y la altura de línea para optimizar la legibilidad en pantalla. - Escriba textos de prueba personalizados en los campos de muestra para evaluar el comportamiento real de la tipografía. - Copie el código CSS generado que incluye la importación optimizada de Google Fonts y las variables personalizadas para su hoja de estilos. ## Casos de uso - Diseño de interfaces SaaS utilizando combinaciones geométricas y legibles como Montserrat e Inter. - Maquetación de blogs editoriales o sitios de noticias que requieren un contraste elegante entre fuentes Serif y Sans-serif. - Creación de páginas de aterrizaje para desarrolladores empleando fuentes monoespaciadas como JetBrains Mono o Fira Code. ## Preguntas frecuentes ### ¿Cómo se cargan las fuentes en la previsualización? Las fuentes se cargan directamente desde los servidores de Google Fonts en tiempo real según las opciones seleccionadas. ### ¿El código CSS generado incluye todos los pesos de la fuente? No, el snippet CSS optimiza la carga incluyendo únicamente los pesos específicos que haya seleccionado para el título y el cuerpo. ### ¿Qué tipo de fuentes incluye el catálogo? Incluye una selección de 22 fuentes populares clasificadas en Serif, Sans-serif, Display, Monospace y Handwriting. ### ¿Puedo usar mis propios textos para la prueba? Sí, puede personalizar el texto del título y del cuerpo utilizando los campos opcionales de muestra. ### ¿Qué son los presets de emparejamiento? Son 7 combinaciones tipográficas predefinidas y probadas para diferentes estilos visuales como SaaS, editorial, noticias y herramientas de desarrollo. ## Herramientas relacionadas - [Extractor de tokens de tema ECharts](https://elysiatools.com/es/tools/echarts-theme-token-extractor): Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano. - [Inspector de archivos de fuente (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/es/tools/font-file-inspector): Sube una fuente TTF, OTF, WOFF o WOFF2 (la WOFF2 se descomprime automáticamente) e inspecciona todos los metadatos: familia/subfamilia/diseñador/copyright/versión, número de glifos, unitsPerEm, peso y anchura, ángulo itálico, banderas de estilo y caja envolvente; mapa de calor de cobertura por bloques Unicode; vista previa SVG de glifos (texto personalizable, muestreo automático para fuentes de iconos); ligaduras liga y características OpenType; ejes fvar e instancias con nombre en fuentes variables. - [Constructor de ejes e instancias de fuentes variables y CSS font-variation-settings](https://elysiatools.com/es/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Sube una fuente variable (TTF/OTF/WOFF/WOFF2) para inspeccionar sus ejes fvar e instancias con nombre, previsualizar la interpolación en vivo en el navegador y generar CSS font-variation-settings listo para pegar, las propiedades de alto nivel equivalentes y un bloque @font-face variable. - [Calculadora clamp de tipografia fluida CSS](https://elysiatools.com/es/tools/css-fluid-typography-clamp-calc): Introduce viewport y tamaños mínimos y máximos para obtener clamp(), CSS copiable y datos de vista previa - [Probador de regex C# (.NET)](https://elysiatools.com/es/tools/csharp-regex-tester): Prueba expresiones regulares de .NET/C# en línea: grupos con nombre ((?…)), opciones IgnoreCase/Multiline/Singleline, resaltado, tabla de grupos y código C# listo para pegar. - [Generador de archivos de zona DNS](https://elysiatools.com/es/tools/dns-zone-file-record-builder): Genera registros SOA / NS / A / AAAA / CNAME / MX / TXT (SPF/DKIM/DMARC) / SRV / CAA / TLSA / NAPTR / DS en formato zona RFC 1035, con resumen legible. Soporta TTL y múltiples registros. - [Panel de estadísticas de texto mejorado](https://elysiatools.com/es/tools/enhanced-text-statistics-dashboard): Un panel unificado: conteos de palabras/caracteres/oraciones, TTR (diversidad léxica), densidad léxica, sílabas estimadas y tiempos separados de lectura (238 ppm) y habla (150 ppm). - [Esteganografía de imagen: incrustar y detectar](https://elysiatools.com/es/tools/image-steganography-embed-detect): Oculta texto en los bits menos significativos de un PNG, extráelo de vuelta y ejecuta el análisis esteganográfico chi-cuadrado de Westfeld–Pfitzmann con curva p y vista del plano LSB. ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Rust](https://elysiatools.com/es/samples/web-image-processing-rust): Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web TypeScript](https://elysiatools.com/es/samples/web-image-processing-typescript): Ejemplos de procesamiento de imágenes Web TypeScript incluyendo lectura/guardado de imágenes, escalado y conversión de formato - [Ejemplos de Operaciones de Archivo Web Go](https://elysiatools.com/es/samples/web-file-operations-go): Ejemplos de operaciones de archivo Web Go incluyendo lectura/escritura de archivos de texto, copiar/mover, recorrido de directorio y validación de archivos