Combinador de fuentes tipográficas
Prueba combinaciones de fuentes para títulos y texto con 20 tipografías de licencia abierta, ajusta tamaño e interlineado y copia el font-family en CSS.
Combinaciones sugeridas
Vista previa
Instala los paquetes npm e importa solo los pesos que uses. Así las fuentes se sirven desde tu propio sitio, sin un CDN de fuentes.
Cómo usar el combinador de fuentes
- Empieza por una de las Combinaciones sugeridas (Editorial, Blog moderno, Página de aterrizaje, Noticias, Elegante, Revista tecnológica, Libro, Clásica, Documentación, Desenfadada). Cada botón muestra la fuente de títulos y la fuente de texto que aplica.
- O elige tú mismo la Fuente de los títulos y la Fuente del texto. Las listas están agrupadas en fuentes sans serif, serif, display, monoespaciadas y manuscritas. Intercambiar fuentes invierte las dos.
- Ajusta el Tamaño de los títulos, el Tamaño del texto y el Interlineado, y elige el Grosor de los títulos (Negrita (700) o Normal (400)). Marca Fondo oscuro para comprobar la combinación en modo oscuro.
- Sustituye el Texto del título y el Texto del cuerpo por tus propias palabras: un título y un párrafo reales dicen mucho más que un pangrama. Deja una línea en blanco entre párrafos.
- Copia el Código CSS y sigue las indicaciones de Autoalojamiento con Fontsource para añadir las fuentes a tu proyecto.
Las fuentes se cargan la primera vez que las eliges (unos 12 a 50 KB por peso). Se sirven desde este sitio, nunca desde un CDN de fuentes.
Qué hace que una combinación de fuentes funcione
- Contraste, no conflicto. La receta clásica es una serif para un papel y una sans serif para el otro: Playfair Display sobre Lato, o Montserrat sobre Merriweather. Dos fuentes parecidas pero no idénticas (por ejemplo, dos sans serif geométricas) suelen parecer un error.
- Una fuente de texto tranquila. El cuerpo del texto es donde el lector pasa más tiempo. Elige una fuente de formas abiertas y altura de x generosa (Inter, Lato, Open Sans, Source Serif 4, Merriweather) y reserva las fuentes display como Playfair Display, DM Serif Display, Oswald o Caveat para títulos cortos.
- Proporciones parecidas. Las fuentes con alturas de x similares conviven bien en la misma línea y en la misma columna.
- Con dos fuentes basta. Crea jerarquía con el tamaño, el grosor y el espaciado en lugar de añadir una tercera tipografía.
Para un texto legible, un buen punto de partida es de 16 a 20 px con un interlineado de entre 1,4 y 1,7, y unos 60 a 75 caracteres por línea. Los títulos suelen necesitar un interlineado más ajustado (1,1 a 1,3), que el código CSS define por ti.
El código CSS
El código declara dos propiedades personalizadas, --font-heading y --font-body, cada una con una lista de fuentes alternativas: si la fuente web aún no se ha cargado, el navegador muestra una fuente del sistema parecida (Georgia para las serif y la fuente de interfaz del sistema para las sans serif). Los tamaños se escriben en rem (16 px = 1rem), así que respetan el tamaño de letra que el lector haya configurado en su navegador.
Autoalojamiento y licencias
Las 20 fuentes proceden de Fontsource, que empaqueta fuentes de código abierto para npm. El recuadro de instalación te da el comando npm install y las líneas import del subconjunto latin, solo con los pesos que uses; después, tu empaquetador copia los archivos woff2 en tu compilación. Servir las fuentes desde tu propio dominio es más rápido (sin conexiones adicionales), funciona sin conexión y evita enviar las direcciones IP de tus visitantes a un servicio de fuentes de terceros, un problema conocido del RGPD en la UE.
Todas las fuentes de esta herramienta tienen la SIL Open Font License 1.1, según los metadatos de su paquete: puedes usarlas en sitios web, aplicaciones e impresos, con o sin fines comerciales, e incrustarlas. No puedes vender los archivos de fuente por sí solos. Si modificas una fuente, debe mantener la OFL y no puede usar el nombre reservado original. Cada paquete incluye el archivo de licencia.
Preguntas frecuentes
¿Esta herramienta usa Google Fonts?
No. Muchas de estas familias también están en Google Fonts, pero aquí los archivos proceden de los paquetes npm de Fontsource y los sirve este sitio. No se hace ninguna petición a Google ni a ningún otro CDN de fuentes.
¿Por qué algunos títulos no se ponen en negrita?
DM Serif Display solo existe en peso normal. En ese caso la herramienta la muestra en 400, lo indica bajo los controles y el código CSS usa 400.
¿Puedo combinar dos serif o dos sans serif?
Sí, si se distinguen claramente por su función y su grosor, por ejemplo un título en negrita condensada con una fuente de texto ligera y abierta. La herramienta muestra un aviso cuando las dos fuentes comparten estilo, porque el contraste entre serif y sans serif es más fácil de acertar.
¿Qué caracteres incluyen las fuentes?
La vista previa carga el subconjunto latin (inglés, francés, español y la mayoría de los idiomas de Europa occidental, con sus acentos, la ñ, los signos ¿ y ¡, las comillas « » y el símbolo del euro) y, si la fuente los tiene y tu texto los necesita, los subconjuntos latin-ext (letras de Europa central como č, ł, ő, ț), cirílico y griego. Si a una fuente le falta un subconjunto, esas letras se muestran con la fuente de respaldo: Lato, Work Sans y Space Grotesk no tienen cirílico, y solo Inter, Roboto, Open Sans, Source Serif 4 y Fira Code tienen griego. Ninguna de las 20 fuentes tiene letras árabes.
¿Puedo usar estas fuentes en un proyecto comercial?
Sí. La SIL Open Font License permite el uso comercial sin pago ni atribución en tu diseño. Lo único que no se permite es revender los archivos de fuente por sí solos.
Herramientas relacionadas
- Conversor de PX a REM Convierte px a rem y em con cualquier tamaño de fuente raíz, crea una tabla de conversión y pasa a rem todos los px de un fragmento de CSS con un clic.
- Generador de paletas de colores Genera paletas de colores a partir de un color base con reglas de armonía: complementaria, análoga, triádica, tetrádica, cuadrada y monocromática.
- Comprobador de contraste Comprobador de contraste WCAG gratis. Introduce el color del texto y del fondo y obtén la relación de contraste, el resultado AA/AAA y un color válido.
- Generador de degradados CSS Crea degradados CSS lineales, radiales y cónicos con vista previa en directo. Añade y arrastra paradas de color, ajusta el ángulo y copia el código CSS.