Generador de escala tipográfica
Crea una escala tipográfica modular a partir de un tamaño base y una proporción, mírala y cópiala como variables CSS.
Qué hace esta herramienta
Elige el tamaño que debe tener tu texto de cuerpo, escoge una proporción y obtén un conjunto de tamaños que van juntos. Eso es toda una escala modular: un tamaño base multiplicado por la misma proporción en cada paso hacia arriba y dividido por ella en cada paso hacia abajo. Usar la misma proporción en todos lados es lo que hace que los tamaños se lean como una familia y no como números elegidos de uno en uno. Cada paso se calcula directamente desde la base y no desde el tamaño anterior, así que los extremos de la escala siguen siendo exactos en vez de irse desviando. Puedes ver la escala entera de un vistazo y copiarla como variables CSS, lista para pegar en tu hoja de estilos. Los tamaños salen en rem por defecto, divididos por el tamaño raíz que uses de verdad y no por un dieciséis dado por hecho.
Para qué te sirve
- Montar los tamaños de títulos y cuerpo de un sistema de diseño nuevo.
- Sustituir un conjunto de tamaños puestos a ojo por una escala coherente.
- Comparar cómo sienta una proporción estrecha y una amplia antes de decidir.
- Generar las variables CSS de tus tokens de tipografía.
Cómo se usa
- Fija tu tamaño base, normalmente el del texto de cuerpo.
- Elige una proporción, desde una segunda menor ajustada hasta la áurea, más dramática.
- Indica cuántos pasos necesitas por encima y por debajo de la base.
- Copia las variables CSS para tu hoja de estilos.
Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.
Otras herramientas del mismo campo
DiseñoVerificar Contraste de Color (WCAG)
Comprueba el contraste de color WCAG entre texto y fondo, con vistas previas en vivo, resultado aprobado o suspenso y sugerencias accesibles.
Generador de sombras CSS
Crea una sombra box-shadow en CSS con vista previa: ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad, y copia el código. Gratis y en tu navegador.
Conversor de Color: HEX, RGB, HSL
Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.
Generador de Gradientes CSS
Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.
Preguntas frecuentes
¿Qué proporción elijo?
Las proporciones pequeñas dan una escala suave con tamaños muy juntos, que va bien para interfaces densas y textos largos. Las grandes dan saltos llamativos que funcionan en portadas y piezas editoriales. Una tercera mayor es un punto de partida cómodo. La respuesta honesta es probar dos o tres y mirarlas, que es justo para lo que está la vista previa.
¿Qué es el tamaño base?
El tamaño del paso cero, que casi siempre es tu texto de cuerpo. Todo lo demás se deriva de él, así que es el número que merece la pena decidir a conciencia. Dieciséis píxeles es el valor por defecto del navegador y un buen punto de partida.
¿Por qué la salida en rem pide un tamaño raíz?
Porque rem es relativo al tamaño de fuente raíz, y muchos sistemas de diseño lo cambian respecto al dieciséis por defecto del navegador. Si el tuyo lo hace, una escala construida dando por hecho dieciséis estaría mal en todos los pasos. Indicarlo aquí hace que los valores en rem coincidan con lo que hace tu CSS de verdad.
¿Uso px o rem?
Rem en la mayoría de casos, porque respeta el tamaño de fuente que el lector haya puesto en su navegador, algo que importa para la accesibilidad. Px está para las situaciones en que necesitas un tamaño fijo pase lo que pase, y para leer la escala en números concretos mientras la diseñas.