¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de Escala Modular de Tipos de Fuente

DesarrolladorMatemáticasTexto

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

Base

Tamaño base (px)

El tamaño de referencia de 1rem. La mayoría de los navegadores predeterminan 16px.

Relación

Cada paso en la escala es el paso anterior multiplicado por esta relación.

Relación personalizada

Cualquier valor entre 1.01 y 3.

Producción

Unidad

Decimales

Decimales en los valores renderizados.

Formato

Texto de vista previa

Muestra

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Generador de Escala Modular de Tipos de Fuente

El generador de escala modular de fuentes crea una escala tipográfica completa a partir de un tamaño base y una relación matemática elegida. Cada paso en la escala es el paso anterior multiplicado por la relación, por lo que los títulos, el texto corporativo y el texto pequeño mantienen proporciones consistentes en cada pantalla.

Cómo Usar

Configura el Tamaño base en píxeles (normalmente 16px, que equivale a 1rem).
Elige un Relación desde el menú desplegable, o elige Personalizado y escribe tu propio valor.
Elige la salida Unidad (rem, em o px) y el número de Decimales.
Elige un Formato de Exportación — variables CSS, variables SCSS, configuración de Tailwind o JSON.
Edite el Muestra texto para ver una copia personalizada en cada paso de la escala.
Copia o descarga el código generado y úsalo directamente en tu proyecto.

Características

Nueve relaciones clásicas – Desde segundo menor hasta octava, incluyendo la relación áurea (1.618).
Entrada de relación personalizada – Ingresa cualquier valor entre 1.01 y 3 para una escala personalizada.
Vista previa visual en tiempo real – Ve el texto de ejemplo renderizado en cada paso desde xs hasta 6xl.
Cuatro formatos de exportación – Propiedades CSS personalizadas, variables SCSS, configuración de Tailwind o JSON. fontSize config, o JSON.
rem, em o px – Elige la unidad que coincida con tu sistema de diseño.
Precisión ajustable – Redondea los valores generados a 0–5 decimales.
Cálculo en el lado del cliente – Todo se ejecuta en tu navegador, por lo que nada se envía a un servidor.

 Preguntas frecuentes

¿Qué es una escala tipográfica modular?

Una escala tipográfica modular es una secuencia de tamaños de fuente construida a partir de un tamaño base y un multiplicador fijo. Cada paso es el paso anterior multiplicado por esa relación, lo que mantiene la relación proporcional entre los tamaños coherente en todo el diseño.
¿Por qué usar relaciones matemáticas en lugar de tamaños arbitrarios?

Las relaciones tomadas de la teoría musical y la proporción clásica — cuarta perfecta, quinta perfecta, la relación áurea — crean relaciones que el ojo interpreta como armónicas. Los tamaños arbitrarios tienden a sentirse desiguales y obligan a más decisiones visuales en cada pantalla.
¿Qué relación debo elegir para contenido con fuerte enfoque en el cuerpo del texto?

Relaciones más pequeñas, como el tercio menor (1.2) y el tercio mayor (1.25), mantienen los tamaños de los títulos cercanos al texto corporativo, lo cual funciona bien para documentación, blogs y interfaces con mucho contenido, donde el lector pasa la mayor parte del tiempo leyendo párrafos.
¿Qué relación debo elegir para diseños de marketing y contenidos editoriales?

Relaciones más grandes, como la quinta perfecta (1.5) y la relación áurea (1.618), producen saltos dramáticos en el tamaño entre el cuerpo del texto y el texto de presentación. Funcionan bien en páginas de destino, revistas y secciones de hero donde la tipografía es el punto focal.
¿Cuál es la diferencia entre las unidades rem, em y px?

px es un tamaño absoluto en píxeles. rem es relativo al tamaño de fuente raíz, por lo que se escala cuando los usuarios cambian sus ajustes predeterminados del navegador. em es relativo al tamaño de fuente del elemento padre más cercano, lo que hace que los elementos anidados se multipliquen. La mayoría de los sistemas de diseño prefieren rem para escalas globales de fuentes porque respetan las configuraciones de accesibilidad del usuario.