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.
Construye una escala tipográfica modular a partir de un tamaño base y una razón, y muestra cada paso a su tamaño real con los números que importan al lado: rem, interlineado, espaciado y —el que decide si un tamaño sirve para prosa— cuántos caracteres caben en una línea al ancho de tu columna. Deriva una escala de espaciado de la misma razón, ajustada a una cuadrícula de 4px.
Escala
Proporción: 1.25
Espaciado de la misma proporción
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
Ajustado a una rejilla de 4px, la que casi todos los sistemas de diseño ya tienen, y un hueco de 13px al lado de uno de 12px es ruido.
Vista previa
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El verde marca de 45 a 75 caracteres por línea, el rango de Bringhurst para el texto latino, al que el hangul, que se escribe con espacios, se parece más que el CJK de ancho completo.
Exportar
¿Quieres que alguno de estos tamaños escale con la ventana en vez de ir a saltos? La calculadora de tamaños fluidos convierte dos de ellos en un solo clamp().
Cómo se usa
Fija el tamaño base
El tamaño del texto de cuerpo, casi siempre 16px. Todo lo demás es esto multiplicado o dividido por la razón, así que acertarlo primero ahorra volver a elegir la razón después.
Elige la razón: esta es la decisión
Una segunda mayor (1,125) es el valor seguro para interfaces: ocho pasos siguen cayendo en un rango sensato. Una cuarta justa (1,333) es editorial: tres pasos por encima de 16px ya son 38px. La proporción áurea es famosa y demasiado empinada para texto de interfaz. Cada preajuste dice para qué es; elige por el rango que necesitas, no por el nombre.
Decide cuántos pasos, y si redondear
Los pasos hacia abajo son para leyendas y etiquetas; los pasos hacia arriba, para títulos. Exacto conserva la geometría y te da píxeles fraccionarios; el redondeo a 1px o 2px da números que una persona puede retener en la cabeza y rompe ligeramente la razón. Redondear es la elección habitual, y el valor exacto se sigue mostrando junto a cada uno redondeado.
Fija el ancho de columna y lee los recuentos de caracteres
Escribe el ancho de la columna en la que este texto realmente se asienta. La cifra más a la derecha de cada fila es caracteres por línea a ese ancho, y se pone verde entre 45 y 75: el rango con evidencia real detrás para prosa corrida. Un tamaño que se lee bien aislado y da 110 caracteres por línea es el tamaño equivocado para texto de cuerpo.
Exporta los tokens
Variables CSS, un bloque de tema de Tailwind, SCSS o JSON. La escala de espaciado sale con ellos, así que un solo pegado cubre las dos.
Preguntas frecuentes
¿La vista previa muestra mi fuente real?
No: se dibuja con la fuente de esta página. Los tamaños, interlineados y espaciados son reales, pero otra tipografía tiene otra altura de x, y la altura de x es lo que realmente decide qué tan grande se ve 16px. Trata la vista previa como una comprobación de proporción, y confirma el tamaño base en tu propio producto.
¿Debería usar la escala entera?
No, y generar once pasos no es una razón para usar once. La mayoría de las interfaces necesitan cuatro o cinco tamaños. Los pasos extra existen para que veas adónde va la razón, y para que un tamaño que rara vez hace falta tenga un valor definido en lugar de inventarse sobre la marcha.
¿De dónde salen los interlineados y el espaciado?
De una regla, no de tu tipografía: el interlineado baja a medida que el tamaño crece, el espaciado se estrecha en los pasos grandes y se abre un poco en los pequeños. Es el punto de partida convencional y acierta lo bastante a menudo como para ser útil, pero una tipografía condensada o una coreana con bloques silábicos altos querrá otros números. Ajusta después de mirar.
¿Por qué la escala de espaciado se ajusta a 4px y la tipográfica no?
Porque el ojo las lee distinto. Un título de 17px junto a uno de 18px es una jerarquía; un hueco de 13px junto a uno de 12px es ruido, y es el tipo de ruido que sobrevive a la revisión y luego se copia. Casi todos los sistemas de diseño ya tienen una cuadrícula de 4px, así que la escala de espaciado se encuentra con ella ahí.
Puede recibir de
Calculadora de tamaños fluidos
Fluid Size Calculator
Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.
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.
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.
Calculadora de tamaños fluidos
Fluid Size Calculator
Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.
Extractor de tokens de CSS
CSS Token Extractor
Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.
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.
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.
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.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.