Usa el Calculadora de Escala Tipográfica Modular gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Una Proporción, Todos los Tamaños de Título Que Necesitas
Elegir tamaños de título a ojo suele producir un desorden: un H2 apenas más grande que el texto del cuerpo, un H3 más grande que el H2, y tamaños que cambian de página en página. Una escala modular corrige esto con una sola regla. Empieza desde un tamaño base, multiplica por una proporción fija en cada paso hacia arriba, y divide por la misma proporción en cada paso hacia abajo. Cada tamaño de la página queda entonces relacionado con todos los demás, y toda la página parece diseñada en lugar de armada.
La herramienta de arriba hace los cálculos. Escribe tu tamaño base, normalmente el tamaño de tu texto del cuerpo, y elige una proporción. La tabla muestra siete pasos, desde dos pasos por debajo de la base hasta cuatro pasos por encima, con una vista previa en vivo de cada tamaño. Copia las variables CSS y tus títulos, subtítulos y texto pequeño saldrán todos de un solo sistema.
¿Qué Proporción Debes Elegir?
Las proporciones pequeñas dan jerarquías tranquilas y sutiles. Una proporción de 1,125, la segunda menor, sirve para documentación densa e interfaces donde los títulos deben susurrar, no gritar. Una proporción de 1,25, la tercera mayor, es la elección general más popular: los títulos superan claramente al texto del cuerpo sin dominar la página. Es un valor seguro por defecto para blogs, sitios de negocios y páginas de inicio.
Las proporciones grandes dan dramatismo. Una proporción de 1,333, la cuarta justa, sirve para diseños editoriales y de revistas. Una proporción de 1,5, la quinta justa, sirve para carteles, páginas de marketing y secciones principales. La proporción áurea, 1,618, crea contrastes llamativos pero puede producir títulos superiores enormes, así que úsala cuando el diseño tenga espacio para un tamaño de exhibición muy grande. Si dudas, empieza en 1,25 y sube solo si tus títulos se sienten tímidos.
Asigna los Pasos a Elementos Reales
Una escala solo es útil cuando cada paso tiene un trabajo. Una asignación práctica es: dos pasos por debajo de la base para pies de foto y notas, un paso por debajo para etiquetas pequeñas, la base misma para el texto del cuerpo, un paso por encima para párrafos grandes o de entrada, dos pasos por encima para H3, tres pasos por encima para H2 y cuatro pasos por encima para H1. Adáptala a tu contenido, pero mantén la asignación coherente en todo el sitio.
La coherencia es el beneficio real. Cuando cada página usa la misma escala, los lectores aprenden tu jerarquía una vez y navegan cada página más rápido. También acelera el trabajo de diseño: en lugar de debatir cada tamaño de título nuevo, eliges el paso que encaja con su rango. Los nuevos miembros del equipo pueden seguir el sistema sin adivinar.
El Tamaño Base Importa Más Que la Proporción
El tamaño base ancla toda la escala, así que elígelo con cuidado. Para la mayoría de los sitios web, la base es el tamaño del texto del cuerpo, comúnmente de 16 a 18 píxeles. Una base más grande eleva toda la escala, lo cual sirve para sitios con público mayor o lectura larga. Una base más pequeña ajusta todo, lo cual sirve para herramientas densas y paneles. Cambiar la base después mueve cada título, así que defínela con intención al inicio de un proyecto.
Prueba la escala en una página real, no solo en la tabla. Una escala que se ve elegante como lista puede sentirse pesada por arriba cuando un H1 grande queda sobre varios párrafos. Si el paso superior se siente abrumador, baja un punto de proporción en lugar de reducir un solo título a mano: las excepciones hechas a mano son la forma en que un sistema se desarma en silencio.
Escalas Adaptables Sin Caos
En pantallas pequeñas, una escala completa de escritorio a menudo se rompe: un H1 de cuatro pasos puede tragarse la pantalla de un teléfono. La solución limpia es una proporción menor o una base menor en el móvil, aplicada con una media query, para que toda la escala se reduzca como un solo sistema. Evita cambiar el tamaño de títulos aislados para el móvil mientras dejas el resto: eso recrea la incoherencia que la escala se creó para eliminar.
Copia las variables CSS en tu hoja de estilos y haz referencia a ellas en todas partes: los títulos usan las variables, nunca valores de píxeles escritos a mano. Cuando la marca o el público cambian, actualizas la base o la proporción en un solo lugar y todo el sitio cambia de escala de forma coherente. Ese único punto de control es el verdadero poder de una escala modular.
Herramientas relacionadas
- Modular Type Scale Calculator (English version)
- Probador de Espaciado entre Letras
- Creador de Firmas Online Gratis
Pingback: Modular Type Scale Calculator - Perfect Heading Sizes