Reverzereverze

Font Size Scale Calculator

Free Calculator

Convierte un tamaño base y una razón de escala en una escala tipográfica modular y armónica — un nivel abajo y tres niveles arriba para los títulos.

100% privado

Se ejecuta en tu navegador — ningún número sale de tu dispositivo.

Tus números

El tamaño de tu texto de cuerpo en píxeles — normalmente 16px en la web.

El multiplicador entre niveles, p. ej. 1.25 (tercera mayor) o 1.5.

1 nivel arriba

20

Base × razón — subtítulos y texto de entrada.

Pequeño (base ÷ razón)

12.8

Un nivel debajo de la base — pies de foto y letra chica.

2 niveles arriba

25

Base × razón² — títulos de sección.

3 niveles arriba

31.3

Base × razón³ — títulos de página y de hero.

Cómo funciona

1

Define tu tamaño base

Ingresa el tamaño de tu texto de cuerpo — 16px es el punto de partida común en la web.

2

Elige una razón de escala

Escoge un multiplicador como 1.2, 1.25 o 1.5 para controlar el contraste entre niveles.

3

Multiplica y divide

Cada nivel arriba multiplica por la razón; el tamaño pequeño divide la base entre ella.

4

Lee tu escala

Cuatro tamaños aparecen al instante y se actualizan en vivo al cambiar la base o la razón.

Una gran escala tipográfica merece grandes capturas

Reverze rebuilds App Store screenshots into higher-converting creative

¿Qué es un font size scale calculator?

Un font size scale calculator crea una escala tipográfica modular a partir de dos datos: un tamaño base y una razón. En lugar de elegir tamaños de títulos al azar, multiplicas la base por una razón constante para subir en la escala y la divides entre esa razón para bajar. Una base de 16px con una razón de 1.25 te da 12.8px de texto pequeño, 20px, 25px y 31.25px — tamaños relacionados entre sí por la misma proporción, de modo que títulos y texto de cuerpo se ven armónicos.

Es la misma idea detrás de un type scale calculator usado en sistemas de diseño y frameworks de CSS. Las razones comunes se inspiran en intervalos musicales — 1.125 (segunda mayor), 1.25 (tercera mayor), 1.5 (quinta justa) y 1.618 (la proporción áurea) — donde una razón mayor produce más contraste entre el texto de cuerpo y los títulos. Usa esta calculadora para fijar una escala antes de escribir CSS y luego reutiliza los mismos cuatro tamaños en tus páginas web, pantallas de app y creatividades de la App Store para un aspecto coherente y profesional.

Preguntas frecuentes

¿Cómo se calcula una escala tipográfica modular?
Parte de un tamaño base y una razón. Cada nivel arriba multiplica el tamaño anterior por la razón; el tamaño pequeño divide la base entre ella. Con base de 16px y razón 1.25: pequeño 12.8px, luego 20px, 25px y 31.25px.
¿Qué razón de escala debo usar?
De 1.2 a 1.25 da un contraste sutil y legible para interfaces con mucho texto; 1.5 o la proporción áurea 1.618 crea títulos dramáticos y editoriales. Prueba varias razones y elige la que mejor se ajuste a tu contenido.
¿Qué tamaño de fuente base es mejor?
16px es el valor por defecto del navegador y un punto de partida seguro para el texto de cuerpo en la web. Los diseños móviles y de marketing a veces usan 17px o 18px para mayor legibilidad — define lo que convenga a tu diseño.
¿Puedo usar estos tamaños en rem o variables CSS?
Sí. Divide cada valor en píxeles entre tu tamaño raíz (normalmente 16) para convertir a rem, o coloca los valores en píxeles directamente en propiedades personalizadas de CSS para que toda tu escala se mantenga coherente.