Guía de escala de tipografía
Una escala tipográfica es un conjunto de tamaños de fuente que siguen una proporción matemática consistente. En lugar de elegir tamaños al azar, cada paso se multiplica por la misma proporción, creando un ritmo visual y una jerarquía entre los títulos, el cuerpo del texto y los subtítulos.
Elija un tamaño base (16px es el valor predeterminado del navegador y un punto de partida sólido), luego elija una proporción. Proporciones más pequeñas como 1,125 crean escalas sutiles y elegantes para sitios editoriales; proporciones más grandes, como 1,618, crean un contraste espectacular para las páginas de marketing.
Pro Tips
- La proporción áurea (1,618) es hermosa para títulos de visualización, pero demasiado agresiva para sitios con mucho cuerpo. Para lecturas largas, quédese entre 1,125 y 1,333.
- Exporte la escala como propiedades personalizadas de CSS y haga referencia a ellas en todas partes: tamaño de fuente: var(--font-lg). Cambiar la escala más tarde significa editar un archivo.
Frequently Asked Questions
Q: ¿Qué es una báscula modular?
¿Qué es una báscula modular? Una escala modular es una serie de tamaños derivados de un tamaño base multiplicado repetidamente por una proporción fija: la misma matemática detrás de las escalas musicales.
Q: ¿Qué proporción debo elegir?
¿Qué proporción debo elegir? Comience con 1.333 (cuarto perfecto) para uso web general. Utilice 1.2 para interfaces densas, 1.5 para sitios de marketing atrevidos y 1.618 para diseños editoriales espectaculares.
Q: ¿Por qué 16px es el tamaño base estándar?
¿Por qué 16px es el tamaño base estándar? 16px es el tamaño de fuente raíz predeterminado en todos los navegadores. Basar su escala en él garantiza la coherencia cuando los usuarios cambian la configuración de accesibilidad o zoom del navegador.
Q: ¿Debería usar rem en lugar de px?
¿Debería usar rem en lugar de px? Sí. Defina la escala en px pero aplíquela con rem para mayor accesibilidad: 1rem es igual al tamaño de fuente raíz, por lo que los tamaños basados en rem escalan según las preferencias del usuario.
Q: ¿Cuántos pasos necesita una báscula?
¿Cuántos pasos necesita una báscula? De 6 a 8 pasos cubren la mayoría de las necesidades: título, pequeño, cuerpo, rango h4-h1 y tamaño de visualización. Más pasos añaden mantenimiento sin mucho beneficio.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.