Generador de Pares de Fuentes
Un generador de pares de fuentes muestra juntas una tipografía de titular y otra de texto para juzgar el contraste antes de decidir. Este contiene 24 duos de Google Fonts en cinco estilos: 7 modernos, 5 elegantes, 5 clásicos, 5 llamativos y 2 tech. Elige Playfair Display con Source Sans 3 y Copiar CSS te da la línea @import más las reglas font-family para h1-h6 y para el texto.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Fuente de los títulos
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Fuente del cuerpo
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Ajustes de tipografía
Acciones
Todas las combinaciones de fuentes ()
Combinaciones guardadas ()
Acerca de Generador de Pares de Fuentes
Cada duo de esta página es una combinación fija de titular y texto, no un sorteo aleatorio de una lista de fuentes, así que el contraste entre ambas ya es deliberado. El botón Nuevo par salta a otro duo de la categoría seleccionada, y las flechas a ambos lados del nombre los recorren en orden. La fila de categorías filtra la colección: Todos, Moderno, Elegante, Clásico, Llamativo y Tech, con 24, 7, 5, 5, 5 y 2 duos respectivamente.
La vista previa grande es editable. Haz clic en el titular o en el párrafo y escribe tus propias palabras: un texto real revela lo que un pangrama esconde, por ejemplo una fuente de titular cuyas cifras o mayúsculas no encajan con tu marca. Los tres deslizadores ajustan el tamaño del titular de 24 a 96 píxeles, el del texto de 12 a 24 píxeles y el interlineado de 1 a 2,5 en pasos de 0,1; la casilla Vista previa oscura cambia la tarjeta de muestra a fondo oscuro sin tocar el resto de la página.
Copiar CSS produce un bloque para pegar al principio de una hoja de estilos: un @import de Google Fonts para ambas familias con los pesos que usan las reglas, una regla font-family y font-weight para h1 a h6, y una regla font-family, font-weight e line-height para body, p, li y span. Fíjate en lo que no incluye: los tamaños que fijas con los deslizadores son solo de vista previa, así que define tu propia escala tipográfica en el proyecto. El botón del corazón guarda el duo actual en tu navegador bajo fwt_font_favs, de modo que los favoritos sobreviven a una recarga pero no te siguen a otro dispositivo.
Las tipografías se cargan desde fonts.googleapis.com solo cuando se muestra un duo, lo que mantiene ligera la página. Las licencias son de Google Fonts, no de este sitio: el README del proyecto indica que la mayoría de las familias de la colección usan la SIL Open Font License v1.1, algunas la licencia Apache 2 y las fuentes Ubuntu la Ubuntu Font License v1.0.
Casos de uso
Cómo usar
Elige un estilo en la fila de categorías - Todos, Moderno, Elegante, Clásico, Llamativo o Tech - para reducir los 24 duos a los que encajan con el proyecto.
Pulsa Nuevo par para saltar a otro duo, o usa las flechas a ambos lados del nombre para recorrer la categoría en orden.
Haz clic en el titular y en el párrafo de la tarjeta de vista previa y escribe tus propias palabras; los dos son editables y las fuentes se redibujan mientras escribes.
Mueve los deslizadores de tamaño de titular, tamaño de texto e interlineado hasta que la muestra coincida con el tamaño real de tu diseño, y marca Vista previa oscura si la página será oscura.
Pulsa el corazón para conservar un duo en la franja de pares guardados que hay más abajo, que sigue ahí tras recargar.
Pulsa Copiar CSS y pega el bloque al principio de tu hoja de estilos: contiene el @import de Google Fonts y las reglas font-family para titulares y para texto.
Consejos Pro
- Sustituye el texto de muestra antes de juzgar nada. Escribe el titular real y un párrafo real: un duo que luce bien sobre «El arte de la tipografía» puede desmoronarse con un nombre de producto de nueve palabras.
- El CSS copiado lleva el interlineado pero no el tamaño de fuente. Define los tamaños en tu propia escala tipográfica; los dos deslizadores sirven para probar el duo al tamaño previsto, no para exportarlo.
- Tech solo tiene dos duos y ambos usan Space Grotesk en el titular. Si quieres más variedad para un sitio dirigido a desarrolladores, mira en Moderno, que tiene siete duos, entre ellos Outfit con Inter y Work Sans con IBM Plex Sans.
- Los duos marcados viven en tu navegador bajo la clave fwt_font_favs. Borrar los datos del sitio o abrir la página en una ventana privada vacía la franja de pares guardados, así que copia el CSS de lo que realmente pienses usar.
- El @import del bloque copiado pide los pesos 400 y 700 para el titular y 400, 500 y 700 para el texto. Si tu diseño solo usa dos pesos, recorta la lista antes de publicar: cada peso extra es otro archivo que descargar.
Solución de problemas
La vista previa sigue mostrando una fuente de reserva y las tipografías no llegan nunca.
Ambas familias se descargan de fonts.googleapis.com la primera vez que se muestra un duo. Un bloqueador de contenido, un proxy corporativo estricto o una pestaña sin conexión cortan esa petición y la muestra cae a una serif y una sans genéricas. Permite fonts.googleapis.com y fonts.gstatic.com y pulsa Nuevo par para reintentar la carga.
El CSS pegado cambia las tipografías pero el texto tiene el tamaño equivocado.
Es lo esperado. Las reglas exportadas solo llevan font-family, font-weight y line-height; los deslizadores de titular y texto controlan la vista previa y no se escriben en el bloque. Añade tus propias declaraciones font-size usando como referencia los valores que probaste.
La categoría Tech casi no muestra nada.
Tech contiene dos duos, ambos construidos sobre Space Grotesk. No es un fallo de carga: el contador junto a «Todos los pares de fuentes» indica cuántos hay en el filtro actual. Cambia a Moderno, que tiene siete, para tener más opciones en un diseño orientado a desarrolladores.
La franja de pares guardados está vacía aunque se marcaron duos con el corazón.
Los favoritos se guardan en este navegador bajo la clave de localStorage fwt_font_favs. Desaparecen al borrar los datos del sitio, en una ventana privada y al cambiar de navegador o de dispositivo. Copia el CSS de cualquier duo que quieras conservar en lugar de fiarte del corazón.
Copiar CSS no hace nada al pulsar el botón.
El botón escribe en el portapapeles del sistema mediante la API Clipboard del navegador, que exige un contexto seguro y, en algunos navegadores, un permiso que la página no tiene. Si no llega nada, selecciona el código del panel CSS de debajo y cópialo a mano: ese panel siempre contiene el mismo texto.
Preguntas frecuentes
Un contraste evidente sobre un esqueleto común. Los duos funcionan cuando las dos tipografías difieren claramente en una dimensión - una serif de titular frente a una sans de texto, o una display condensada frente a una fuente de lectura neutra - y a la vez coinciden en proporciones como la altura de x y el contraste del trazo. Todas las combinaciones de este generador están construidas así.
Una herramienta que enseña dos tipografías juntas en lugar de una a una. Esta página tiene 24 duos de Google Fonts elegidos a mano, muestra cada uno como un titular y un párrafo en los que puedes escribir, permite ajustar tamaño e interlineado y exporta el duo como bloque CSS con el @import de Google Fonts correspondiente.
Parte del papel de cada una: una para titulares y otra para el texto corrido. Dale a la de texto la tarea más fácil - una fuente de lectura como Inter, Lato, Open Sans o Source Sans 3 - y deja que el titular aporte la personalidad. Después compruébalas juntas a tamaño real: eso es exactamente lo que hace la vista previa, y Copiar CSS te da ambas familias en un único @import.
De este generador: Playfair Display con Source Sans 3 para páginas editoriales, Montserrat con Open Sans para un sitio de producto, Merriweather con Lato para lectura larga, Oswald con Lato cuando el titular debe gritar, y Space Grotesk con Space Mono para documentación técnica. La fila de categorías muestra el resto agrupado por estilo.
Tres que sobreviven a la práctica. Usa dos familias, no tres, salvo que una sea monoespaciada para código. Haz que la diferencia sea indiscutible, porque un contraste corto se lee como un error. Mantén sobria la fuente de texto y deja que el titular tenga carácter. Y una cuarta, muy práctica: comprueba el duo a tu menor tamaño de texto antes de decidir, con el deslizador de aquí.
Escribe el nombre de la marca directamente en el titular editable y sube el deslizador hasta 96 píxeles: un logotipo se lee en grande y el ajuste entre letras importa más que la legibilidad. Recorre una categoría con las flechas vigilando los pares de letras incómodos. Ojo: la licencia que cuenta para un logotipo es la de la familia en Google Fonts, no la de esta página.
Juzga primero la fuente de texto, porque ahí pasan el tiempo los visitantes. Pon el deslizador de texto al tamaño que usa de verdad tu sitio, sube el interlineado a 1,6 o 1,8 y lee el párrafo. Solo después mira el titular. Cuando funcione, Copiar CSS te da un @import y dos reglas que ya apuntan a h1-h6 y a body, p, li y span.
Los duos son solo nombres, así que puedes buscar ambas familias en el selector de fuentes de Canva y aplicarlas a mano. Lo que no se traslada es el bloque CSS, pensado para una hoja de estilos. Canva incluye muchas familias de Google Fonts pero no todas: comprueba los dos nombres en su selector antes de montar una plantilla entera sobre un duo.
La vista previa editable lo es. Pega tu titular real y un párrafo real, ajusta los tamaños a los de tu diseño y estarás probando tu propio contenido y no una muestra. Lo que ningún verificador automático puede hacer es decidir si el duo encaja con tu público: ese juicio es tuyo, y por eso la vista previa es editable en lugar de puntuada.
Proceden de la colección Google Fonts, cuyo README del proyecto indica que la mayoría de las familias usan la SIL Open Font License v1.1, algunas la licencia Apache 2 y las fuentes Ubuntu la Ubuntu Font License v1.0. Son licencias abiertas, pero las condiciones pertenecen a cada familia: abre su página en Google Fonts y lee la licencia antes de publicar un producto de pago.