Herramienta para combinar fuentes
Encuentra una fuente para títulos y otra para el cuerpo que funcionen juntas. Parte de 28 combinaciones seleccionadas de Google Fonts o crea la tuya con 54 familias populares, previsualízalas en diseños realistas, ajusta el tamaño, el grosor y el interlineado, y copia el código embed y el CSS.
Última actualización:
Combinaciones seleccionadas
Consejo: haz clic en cualquier texto de la vista previa para editarlo.
Cómo usar Herramienta para combinar fuentes
- Elige una combinación seleccionada de la fila superior, o filtra primero por estilo.
- O elige las tuyas: fuentes de títulos y cuerpo en los menús desplegables.
- Cambia el diseño de ejemplo para ver la combinación en un artículo, una página de destino, tarjetas de producto o una escala tipográfica.
- Ajusta el grosor y la escala de los títulos, el tamaño del cuerpo y el interlineado; edita el texto de ejemplo si quieres.
- Copia el código: pega el <link> (o @import) y las reglas CSS en tu sitio, o copia un enlace para compartir la combinación.
Formas probadas de combinar fuentes
| Enfoque | Cómo funciona | Ejemplo en la herramienta |
|---|---|---|
| Títulos serif + cuerpo sans | Contraste clásico: titulares expresivos, texto de lectura neutro | Playfair Display + Source Sans 3 |
| Títulos sans + cuerpo serif | Aspecto moderno con un cuerpo cómodo y de estilo libro para lecturas largas | Montserrat + Merriweather |
| Una superfamilia | Las versiones serif y sans diseñadas juntas comparten proporciones | Roboto Slab + Roboto, DM Serif Display + DM Sans |
| Contraste de grosor en una familia | Títulos en black o muy gruesos con el corte regular para el texto | Archivo Black + Archivo |
| Fuente display + cuerpo discreto | Una personalidad fuerte usada solo en tamaños grandes | Bebas Neue + Lato, Abril Fatface + Poppins |
| Acento monoespaciado | Transmite código o datos; funciona para marcas de desarrolladores | JetBrains Mono + Inter |
Lista de comprobación de legibilidad para la fuente del cuerpo
- Tamaño: de 16 a 18px es un valor cómodo por defecto en pantallas; las fuentes pequeñas con una altura x baja pueden necesitar 18px o más.
- Interlineado: alrededor de 1.5 a 1.7 para los párrafos; los títulos se ven mejor más ajustados, alrededor de 1.1 a 1.25.
- Longitud de línea: apunta a unos 50 a 75 caracteres por línea, por ejemplo con
max-width: 65ch. - Letras distinguibles: comprueba que la I mayúscula, la l minúscula y el dígito 1 se vean distintos, y que los números sean fáciles de leer.
- Grosores: carga solo los que uses; normalmente regular y negrita para el cuerpo y un grosor para los títulos.
Cargar fuentes de forma eficiente
Las indicaciones preconnect permiten al navegador abrir conexiones con los servidores de fuentes con antelación. display=swap muestra el texto de respaldo inmediatamente y lo cambia por la fuente web en cuanto llega, para que los visitantes nunca vean texto invisible. Las pilas de respaldo en las reglas CSS (por ejemplo Georgia, serif después de una fuente web serif) mantienen el diseño cerca del resultado final mientras se cargan las fuentes.
Preguntas frecuentes
¿Qué hace que dos fuentes combinen bien?
Las buenas combinaciones unen contraste con una estructura compartida. El contraste, como un título serif con un cuerpo sans-serif o una fuente display gruesa con una fuente de texto ligera, crea jerarquía. Alturas x, anchos o construcciones similares mantienen la página en calma. Dos fuentes casi iguales, pero no del todo, suelen parecer un error.
¿Cuántas fuentes debe usar un sitio web?
Dos familias bastan para la mayoría de los sitios: una para los títulos y otra para el texto del cuerpo, o incluso la misma familia en distintos grosores. Una tercera fuente, a menudo una monoespaciada para código o una script para un logotipo, debe usarse con moderación. Cada familia y grosor extra aumenta el tamaño de descarga.
¿Qué se elige primero, la fuente de los títulos o la del cuerpo?
Normalmente la del cuerpo, porque los lectores pasan la mayor parte del tiempo en los párrafos. Elige una fuente de cuerpo cómoda a 16-18 píxeles con formas de letra claras y luego elige una fuente de títulos que aporte personalidad.
¿Cómo añado las fuentes a mi sitio web?
Pega las etiquetas <link> en el <head> de tu HTML (o la línea @import al principio de tu CSS) y luego añade las reglas CSS que definen font-family para el cuerpo y los títulos. La URL generada solo solicita los grosores que usas, lo que mantiene la carga rápida.
¿Qué es una escala tipográfica modular?
Un conjunto de tamaños en el que cada nivel de título es el tamaño anterior multiplicado por una proporción fija, como 1.25 (tercera mayor) o 1.333 (cuarta justa). Con un cuerpo de 17px y una proporción de 1.333, el H3 mide unos 22.7px, el H2 30.2px y el H1 40.3px. Da un ritmo coherente sin adivinar tamaños.
¿Las Google Fonts son gratuitas para uso comercial?
Las fuentes de la biblioteca de Google Fonts se publican con licencias abiertas, en su mayoría la SIL Open Font License, que permite usarlas en proyectos personales y comerciales. Consulta la página de cada familia en Google Fonts si quieres leer su licencia concreta.
¿Por qué veo fuentes de respaldo en la vista previa?
La herramienta carga las fuentes de Google Fonts cuando las eliges. Si no tienes conexión o una extensión del navegador o la red bloquea fonts.googleapis.com, la vista previa recurre a las fuentes del sistema y muestra un aviso. El código generado sigue siendo correcto.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.