Escala tipográfica (sistema de tamaños de fuente)
Crea un sistema de tamaños para títulos y texto a partir de un tamaño base y una proporción, con interlineados, vista previa y variables CSS para copiar
Cargando la herramienta…
Genera los tamaños de letra de títulos, texto y pies a partir de un tamaño base y una proporción, de modo que los tamaños de la página guarden relación entre sí. Sirve al empezar un sitio web, una pantalla de app o una plantilla de documento.
Cómo se usa
- Escriba el "Tamaño base" del texto en px y elija una "Proporción"; "Personalizada" admite cualquier valor de 1,05 a 2.
- En "Redondeo", conserve decimales, redondee a px enteros o ajuste los tamaños a la "Cuadrícula de 4 px".
- Defina el "Interlineado": "Más ajustado en títulos" reduce el multiplicador en los tamaños grandes; "Igual en todo" usa un solo valor.
- Escriba su propio "Texto de ejemplo" y cambie la "Fuente de la vista previa" para ver cada paso a su tamaño real.
- Pulse "Copiar variables CSS", "Copiar CSS de elementos" o "Copiar JSON".
Cómo funciona
- Tamaño del paso n = base × proporción elevada a n. Los pasos van de −2 (xs) a +6 (5xl); el paso 0 es el texto (p) y los pasos 1 a 6 corresponden de h6 a h1.
- rem es el valor en px dividido por el tamaño base; pt = px × 0,75 (96 px por pulgada).
- Con "Más ajustado en títulos" el multiplicador baja en línea recta desde el "Interlineado del texto" en el tamaño base hasta el "Interlineado de títulos" en tres veces el tamaño base. "Cuadrícula de 4 px" también redondea la caja de línea a un múltiplo de 4 px.
- Los ajustes se guardan en este navegador para la próxima visita.
Preguntas frecuentes
- ¿Qué proporción conviene para un sitio web?
- 1,2 y 1,25 dan títulos moderados, adecuados para artículos largos; 1,333 o más dan títulos grandes, tipo cartel. En pantallas pequeñas suele verse mejor una proporción menor.
- ¿Qué tamaño debe tener el texto de párrafo?
- 16 px es el valor por defecto del navegador y un punto de partida habitual; para lectura larga se usan 17 a 18 px. El resto de la escala sigue al tamaño base que escriba.
- ¿Cómo convierto los tamaños a rem?
- La tabla muestra rem junto a px. Si fija html al tamaño base en px, como hace el CSS de elementos copiado, 1rem equivale a la base.
- ¿Qué interlineado deben tener los títulos?
- El texto suele estar en torno a 1,5 y los títulos grandes entre 1,1 y 1,25, para que las líneas de un título partido no dejen huecos grandes. El modo automático aplica ese cambio.