Calculadora de escala tipográfica
Crea una jerarquía de encabezados coherente.
Introduce un tamaño base y elige una proporción para generar una escala tipográfica modular completa, desde H1 hasta texto pequeño, con un fragmento CSS equivalente.
1.250
h1El veloz zorro marrón39.06pxh2El veloz zorro marrón31.25pxh3El veloz zorro marrón25.00pxh4El veloz zorro marrón20.00pxh5El veloz zorro marrón16.00pxpEl veloz zorro marrón16.00pxsmallEl veloz zorro marrón12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}Cómo crear una escala tipográfica
- Introduce tu tamaño base en píxeles.
- Elige una proporción o selecciona Personalizado para fijarla tú.
- Revisa los tamaños generados para cada nivel de encabezado.
- Copia las variables y reglas CSS a tu hoja de estilos.
Preguntas frecuentes
¿Qué proporción debo elegir?
1.125 y 1.2 dan escalas sutiles; 1.333 y 1.618 crean más contraste. Usa entre 1.2 y 1.25 para la mayoría de sitios.
¿Por qué la vista previa de H1 está limitada?
Los tamaños muy grandes se limitan solo en la vista previa; la salida CSS conserva el valor calculado exacto.
¿Puedo usarlo con unidades rem?
Sí. Divide los valores en píxeles por tu tamaño de fuente raíz, o reemplaza px por rem en el CSS generado.