Guía de uso de la herramienta

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Categoría: Design
Tipos de entrada: text, textarea, select, number
Tipo de salida: html
Cobertura de ejemplos: 4
API disponible: Sí

Resumen

Previsualiza una pareja tipográfica para títulos y cuerpo con texto real, tamaños, pesos, interlineado y distintos conjuntos de caracteres. La tarjeta genera una vista HTML usando las pilas CSS que introduzcas, sin descargar archivos de fuentes.

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

1Introduce la pila CSS para la fuente del título y la pila CSS para el cuerpo.
2Escribe el texto de muestra y selecciona el conjunto de caracteres que quieres revisar.
3Ajusta tamaños, pesos e interlineados dentro de los valores disponibles.
4La 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.

Ejemplos

1. Serif editorial y sans serif neutra

Diseñadora de interfaces

Contexto

Una diseñadora quiere evaluar una combinación con personalidad editorial para los títulos y una fuente neutra para los textos de una página de contenido.

Problema

Necesita ver la jerarquía tipográfica con una frase real y ajustar el tamaño, el peso y el interlineado.

Cómo usarlo

Introduce "Fraunces, Georgia, serif" para el título y "Inter, system-ui, sans-serif" para el cuerpo. Añade el texto de muestra y selecciona el conjunto latino.

Título: 48 px, peso 700, interlineado 1.1. Cuerpo: 18 px, peso 400, interlineado 1.6.

Resultado

Obtiene una tarjeta HTML con una vista previa editorial del título y un cuerpo de texto sereno.

2. Pareja tipográfica para una interfaz cirílica

Diseñador de producto

Contexto

Un diseñador prepara una interfaz en ruso y quiere comprobar que la combinación elegida mantiene una jerarquía legible con caracteres cirílicos.

Problema

Debe revisar el texto real antes de definir los estilos de título y cuerpo.

Cómo usarlo

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.

Título: 42 px, peso 700, interlineado 1.15. Cuerpo: 17 px, peso 400, interlineado 1.55.

Tarjeta de vista previa de parejas tipográficas

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Serif editorial y sans serif neutra

2. Pareja tipográfica para una interfaz cirílica

Preguntas frecuentes

Preparar y verificar tipografía web multilingüe

Ejemplos de Tarjetas de Crédito

Muestras de Fuentes Variables

Muestras MP3 Sin Derechos de Autor

Ejemplos SVG

Explicador BFV, CKKS, LWE de presupuesto de ruido, relinealización y bootstrapping FHE

Auditor de consistencia de estilo de manuscrito

Ajustador de Opacidad de Color

Extractor de tokens de tema ECharts