Diseño / Tipografía
Generador de escala tipográfica (escala modular para CSS y Tailwind)
Genera una escala tipográfica modular a partir de un tamaño de fuente base y una proporción, como 1,25 o la proporción áurea; previsualiza cada paso con tu propio texto y copia los tamaños como propiedades personalizadas de CSS o como una configuración font-`
Generador de escala tipográfica (escala modular para CSS y Tailwind): Cada tamaño es el valor base multiplicado por la proporción una vez por cada paso: con 16 px y una tercera mayor, 1,25, los pasos superiores son 20, 25, 31,25, 39,06 y 48,83 px, y los pasos inferiores son 12,8 y 10,24 px. Los tamaños se muestran en px y rem y reciben nombres como los tamaños de texto de Tailwind, desde xs hasta 4xl. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas de desarrollo
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}Cada paso es el que está debajo multiplicado por la proporción: con un tamaño base de 16 px y una proporción de 1.25, los tamaños superiores son 20, 25 y 31.25 px, y los inferiores, 12.8 y 10.24 px. Las proporciones pequeñas, como 1.125, son adecuadas para interfaces densas; las más grandes, como 1.5, dan más contraste a los titulares. Los valores en rem presuponen que el tamaño raíz predeterminado del navegador es de 16 px.
De dónde vienen los nombres de las proporciones
Los nombres corresponden a intervalos musicales: una quinta justa tiene una proporción de frecuencia de 3 : 2, por lo que una escala tipográfica basada en 1,5 crece en la misma proporción que las notas separadas por una quinta. La escala modular de Tim Brown popularizó esta idea en la web.
La proporción áurea, 1,618, produce saltos muy grandes; se explica en la calculadora de la proporción áurea.
Redondeo
Los navegadores representan tamaños de píxel fraccionarios, por lo que 31,25 px está bien tal cual. Si un sistema de diseño necesita píxeles enteros, redondea cada paso y conserva los valores rem con cuatro decimales, tal como hace la herramienta; convierte los demás valores con el convertidor de px a rem.
Cómo se usa
- Introduce el tamaño base y elige una proporción.
- Define cuántos pasos subir y bajar, y previsualízalos con tu texto.
- Copia las variables CSS o la configuración de Tailwind.
Privacidad y límites
Todo se ejecuta en tu navegador.
Herramientas relacionadas
Preguntas frecuentes
¿Qué proporción debería usar?
Las interfaces con mucho texto y las pantallas pequeñas funcionan bien con proporciones moderadas, como 1,125 o 1,2; las páginas editoriales y las páginas de destino pueden usar de 1,333 a 1,618 para obtener titulares más llamativos.
¿Por qué usar rem?
Los tamaños en rem siguen la configuración del tamaño de fuente del navegador del lector, por lo que el texto aumenta para quienes necesitan verlo más grande. La conversión supone una raíz predeterminada de 16 px.
¿Puedo hacer que los tamaños sean fluidos?
Sí: toma el tamaño mínimo y máximo que quieras para un paso y conviértelos en una expresión clamp() con el generador de clamp de CSS.
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta