Genere una escala tipográfica para encabezados

Una escala tipográfica convierte un tamaño de texto base y una proporción en una jerarquía previsible de encabezados. Indique un tamaño base, como 16, y una proporción positiva, como 1.25 para una tercera mayor. El generador asigna potencias sucesivas de esa proporción a los niveles y devuelve una lista ordenada y apta para máquinas desde h1. Resulta útil para crear tokens CSS, documentar un sistema de diseño o comprobar que una jerarquía sigue una regla matemática coherente.

Elija una base y una proporción adecuadas para la lectura

Comience con el tamaño empleado en el texto corrido. Una base de 16 píxeles es habitual en la web, aunque no es una regla universal: una interfaz densa puede usar un valor menor y una publicación editorial puede partir de 18 o 20 píxeles. La proporción determina la rapidez con que los encabezados se alejan de la base.

Un valor de 1.125 produce una progresión discreta, 1.2 ofrece una jerarquía moderada y 1.25 suele denominarse tercera mayor. Las proporciones grandes generan tamaños de exhibición con rapidez, sobre todo al solicitar los seis niveles HTML. La capacidad admite cualquier proporción finita positiva.

Con 1 todos los tamaños son iguales; por debajo de 1, los valores disminuyen al aumentar el exponente. Solo cero y los valores negativos son errores. Mantenga la misma unidad en su sistema.

La respuesta indica px por comodidad, pero la relación numérica no tiene unidad. Decida según el contenido real, la anchura disponible, las métricas de la fuente y los dispositivos de destino, no únicamente por el nombre de la proporción.

Comprenda el cálculo de cada nivel de encabezado

El tamaño base es el paso cero y no se incluye como encabezado. Si solicita seis niveles, h6 recibe la base multiplicada por la proporción elevada a 1, h5 usa el exponente 2 y la secuencia continúa hasta h1 con el exponente 6. Así, cuando la proporción supera 1, h1 queda más alejado del cuerpo, mientras la salida conserva el orden habitual de h1 a h6.

Con tres niveles, la respuesta contiene h1, h2 y h3; h3 usa la primera potencia, h2 la segunda y h1 la tercera. Cada fila presenta el nombre, el exponente y el tamaño calculado. Los valores se redondean a seis decimales para evitar ruido de coma flotante y conservar precisión suficiente para variables CSS.

El campo opcional levels vale 6 por defecto y debe ser un entero entre 1 y 6. Los resultados excesivamente grandes se rechazan antes de producir una salida no finita o inutilizable.

Aplique la escala sin confundir tamaño y estructura

Considere los valores generados como propuestas de diseño, no como una orden para elegir etiquetas según su apariencia. Los niveles HTML expresan la estructura del documento para navegadores, buscadores y tecnologías de asistencia; un h2 debe seguir siendo una subsección de h1 aunque un componente lo represente con un token menor. Un flujo práctico consiste en generar la escala, copiar los tamaños a tokens con nombres semánticos y asignarlos después a elementos estructurales mediante estilos.

Pruebe el mayor valor con títulos reales, pantallas móviles estrechas, traducciones, pesos gruesos y fuentes con métricas distintas. Puede usar solo parte de la escala, limitar los tamaños grandes de forma adaptable o compartir un tamaño entre varios niveles. Estas adaptaciones hacen que la regla funcione bajo restricciones reales.

Para revisiones, conserve juntos la base, la proporción, el número de niveles y las filas devueltas; así quedará claro si un cambio procede del cuerpo, de la proporción o de la selección de niveles.