# Tarjeta de vista previa de parejas tipográficas Previsualiza una combinación de fuentes para título y cuerpo con texto real, tamaños, pesos, interlineado, caracteres y CSS. > Página canónica: https://elysiatools.com/es/tools/font-pairing-preview-card - **Categoría:** Design - **Palabras clave:** pareja tipográfica, tipografía, vista de fuente, CSS ## Descripción general La tarjeta usa los nombres suministrados como pilas CSS sin descargar fuentes. El resultado es determinista y funciona sin conexión; el aspecto final depende de las fuentes disponibles en la página anfitriona. ## Entradas - **Pila de fuente del título** (text): Fraunces, Georgia, serif - **Pila de fuente del cuerpo** (text): Inter, system-ui, sans-serif - **Texto de muestra** (textarea): A thoughtful interface starts with readable type. - **Conjunto de caracteres** (select) - **Tamaño del título (px)** (number) - **Tamaño del cuerpo (px)** (number) - **Peso del título** (number) - **Peso del cuerpo** (number) - **Interlineado del título** (number) - **Interlineado del cuerpo** (number) ## Cuándo usarlo - Comparar una fuente serif para títulos con una sans serif para el texto principal. - Revisar cómo se ve una combinación tipográfica con el texto real de una interfaz o página. - Comprobar caracteres latinos, cirílicos, griegos, chinos, árabes o devanagari. ## Cómo funciona - Introduce la pila CSS para la fuente del título y la pila CSS para el cuerpo. - Escribe el texto de muestra y selecciona el conjunto de caracteres que quieres revisar. - Ajusta tamaños, pesos e interlineados dentro de los valores disponibles. - La herramienta muestra una tarjeta HTML con la combinación tipográfica configurada. ## Casos de uso - Diseñar sistemas visuales con una jerarquía clara entre títulos y texto. - Evaluar la legibilidad de una pareja tipográfica antes de aplicarla a una interfaz. - Comprobar la cobertura de caracteres en contenidos multilingües. ## Preguntas frecuentes ### ¿La herramienta descarga las fuentes introducidas? No. Usa los nombres suministrados como pilas CSS y no descarga archivos de fuentes. ### ¿Qué resultado genera? Genera una vista previa en HTML de la combinación para título y cuerpo. ### ¿Puedo usar fuentes de reserva? Sí. Puedes añadir fuentes alternativas y una familia genérica como serif, sans-serif o system-ui. ### ¿Funciona sin conexión? Sí. El resultado es determinista y funciona sin conexión. ### ¿Por qué el aspecto puede variar entre páginas? El resultado depende de las fuentes instaladas o cargadas en la página anfitriona. ## Herramientas relacionadas - [Explicador BFV, CKKS, LWE de presupuesto de ruido, relinealización y bootstrapping FHE](https://elysiatools.com/es/tools/bfv-ckks-lwe-fhe-ciphertext-noise-budget-relin-and-bootstrapping-explainer): Ejecuta una mini-pipeline BFV/CKKS real sobre Z_q\[x\]/(xⁿ+1): presupuestos de ruido invariante exactos en bits, multiplicación con relinealización, cambio de módulo, empaquetado SIMD y un refresco de bootstrapping. - [Auditor de consistencia de estilo de manuscrito](https://elysiatools.com/es/tools/manuscript-style-consistency-auditor): Comprueba números, fechas, unidades, comillas, guiones, niveles de título y nombres propios; genera una style sheet - [Ajustador de Opacidad de Color](https://elysiatools.com/es/tools/color-opacity-adjuster): Ajustar la opacidad/transparencia alfa del color con vista previa en tiempo real y procesamiento por lotes - [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. - [Tarjeta de especificación responsive Figma iOS Android pt dp sp](https://elysiatools.com/es/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Convierte valores px de Figma a las unidades correctas por plataforma y genera una spec card para desarrolladores: pt de iOS (@1x/@2x/@3x con px renderizado por escala), dp/sp de Android (tabla de renderizado mdpi…xxxhdpi y escala de fuente), rem/vw web con snippet clamp() fluido; audita objetivos táctiles mínimos (44pt iOS / 48dp Android / 44px y 24px WCAG) y anota clases de ventana de Material y breakpoints de Tailwind. - [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. - [Laboratorio de Tipografía PDF](https://elysiatools.com/es/tools/pdf-typography-playground): Experimenta con configuraciones de tipografía: interlineado, espaciado, alineación y sangría - [Eliminar Líneas Duplicadas](https://elysiatools.com/es/tools/remove-duplicate-lines): Desduplica líneas de una lista o bloque de texto. Conserva la primera o última aparición, con opciones de distinguir mayúsculas, recortar espacios e ignorar líneas vacías. ## Ejemplos - [Ejemplos de Tarjetas de Crédito](https://elysiatools.com/es/samples/credit-card): Números de tarjeta de prueba para varias redes (Visa, MasterCard, Amex, etc.) - [Muestras de Fuentes Variables](https://elysiatools.com/es/samples/variable-font-samples): Archivos de fuentes variables con ejes fvar para el inspector de ejes/instancias y el constructor CSS - [Muestras MP3 Sin Derechos de Autor](https://elysiatools.com/es/samples/mp3-samples): Colección de muestras de audio sin derechos de autor para pruebas y desarrollo, incluyendo sonidos de la naturaleza, música de meditación y audio ambiental - [Ejemplos SVG](https://elysiatools.com/es/samples/svg-samples): Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG