Combinaciones de tipografías
Font Pairing
Propone parejas de fuente para títulos y para cuerpo de texto a partir de las pilas del sistema, con vista previa usando tu propio texto, y entrega el CSS.
Diez combinaciones seleccionadas de título y cuerpo, cada una con la razón por la que funciona, dibujadas en vivo para que pongas tus propias palabras en ellas. No se descarga nada: la vista previa usa fuentes que ya están en la máquina, y cuando una combinación pide una que no está instalada, la página dice que se está aproximando con una de respaldo en lugar de dejarte juzgar lo equivocado.
10 combinaciones
Vista previa
읽기 쉬운 화면은 글꼴 두 개면 충분합니다
제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.
Puede que alguna de estas tipografías no esté instalada aquí, así que una del sistema de la misma categoría la sustituye. La de verdad se verá distinta.
Por qué funciona
La más coreana de las combinaciones de titular sans sobre cuerpo serif. Las letras anchas y el bajo contraste de trazo de Pretendard aguantan en tamaño de titular, y los trazos más suaves de Noto Serif cansan menos la vista en un texto largo. Sus alturas de x son parecidas, así que mezclarlas en una misma línea no produce un salto de tamaño.
- Titular
- Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
- Cuerpo
- Noto Serif KRfonts.google.com/noto (OFL)
CSS
@font-face. Si te preocupa el tamaño, puedes recortar la fuente a los glifos usados. Y para el sistema de tamaños, el generador de escala tipográfica construye uno.Cómo se usa
Fija primero el idioma de la vista previa
Una combinación que funciona en alfabeto latino puede deshacerse en hangul, porque las dos escrituras no comparten proporciones ni hábito de línea base. Si el producto es coreano, míralo en coreano. El filtro «solo coreano» reduce la lista a las combinaciones en que las dos tipografías cubren de verdad el hangul.
Pon tu propio título y tu propio cuerpo
Las frases de muestra son genéricas a propósito. Tu título real suele ser más corto y tener otras letras, y las dos cosas cambian cómo se lee una combinación.
Lee la justificación, no solo la imagen
Cada combinación dice qué la mantiene unida: un esqueleto compartido con un contraste de peso, o un choque deliberado de categorías. Esa es la parte que se transfiere a una combinación que inventes tú.
Toma el CSS y luego ve a por las fuentes
El CSS da las familias, el peso del título, el espaciado y el interlineado del cuerpo. Las fuentes en sí vienen de la fuente nombrada bajo cada combinación, y necesitan un `@font-face` propio.
Preguntas frecuentes
¿Por qué la vista previa dice que es aproximada?
Porque esa combinación nombra una fuente que tu máquina no tiene, y no se descarga ninguna fuente web: la página recurre a una tipografía del sistema de la misma categoría. Las proporciones son más o menos correctas y la personalidad no. Instala la fuente, o juzga por el espécimen de la propia página de la fundición antes de comprometerte.
¿Por qué no cargar las fuentes web sin más?
Cargarlas significaría una petición a un CDN de fuentes por cada visitante de esta página, que es una superficie de rastreo añadida a una página que no tiene ninguna, para una vista previa. El intercambio es deliberado: menos vistas previas exactas, ningún tercero en la petición.
¿Existe una combinación «correcta»?
No. Estas son diez que se mantienen unidas por razones declaradas, que es distinto de diez que sean correctas para tu producto. La respuesta real más común es una familia en dos pesos: eso no es falta de valentía, es lo que la mayoría de las interfaces necesita.
Una fuente coreana hace la página mucho más pesada. ¿Qué hago?
Recórtala. Una fuente hangul completa lleva 11 172 sílabas y suele pesar varios megabytes; recortarla al conjunto KS X 1001 de 2350 cubre bastante más del 99 % del texto coreano cotidiano y elimina la mayor parte del peso. El recortador de este sitio lo hace en el navegador.
Puede recibir de
Generador de escala tipográfica
Type Scale Generator
Construye una escala modular de tamaños de texto y espaciados desde un tamaño base y una razón, exportable como CSS o como tokens.
Inspector de fuentes
Font Inspector
Abre un archivo de fuente y muestra su cobertura de glifos por bloque, pesos, ejes variables, permiso de incrustación y los registros de nombre de la licencia.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Inspector de fuentes
Font Inspector
Abre un archivo de fuente y muestra su cobertura de glifos por bloque, pesos, ejes variables, permiso de incrustación y los registros de nombre de la licencia.
Recortar una fuente a los glifos usados
Font Subsetter
Reduce una fuente TrueType a los glifos que tu texto usa de verdad y puede envolver el resultado como WOFF, que es la diferencia entre una fuente web de megabytes y una de kilobytes.
Generador de escala tipográfica
Type Scale Generator
Construye una escala modular de tamaños de texto y espaciados desde un tamaño base y una razón, exportable como CSS o como tokens.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Calculadora de proporción
Aspect Ratio Calculator
Calcula la medida que falta para una proporción dada y enumera los tamaños estándar que coinciden.
Quitar el fondo de una imagen
Background Remover
Recorta un fondo plano o de un solo color en el espacio OKLab y devuelve un PNG transparente, con pincel para corregir los bordes.