¡No más tamaños de fuente aleatorias, usen tipografía modular!

Para los que cuidan la proporción tipográfica en sus propuestas, les traigo una herramienta que para mí se ha vuelto indispensable. Es una aplicación web donde pueden experimentar con tamaños menos convencionales de fuente y que permite generar una escala proporcional.

Si se han cansado de escoger los tamaños predeterminados de tipografías para su propuesta web (12,14,18,24,30…) y no saben cómo aplicar tamaños diferentes sin perder proporción en su proyecto, esta herramienta será su salvación.

Como saben, los tamaños de las etiquetas de los encabezados (h1,h2,h3,h4,h5,h6), los párrafos (p), listas (li) y demás, vienen predeterminados en el HTML. Y muchas veces modificamos estas dimensiones para ajustarlos mejor a nuestra propuesta. Pero, si les ha pasado, a veces los tamaños resultantes (sobre todo para encabezados) a veces se descontrola un poco jerárquicamente, es decir, puede que la diferencia de tamaños entre etiqueta y otra sea mínima porque no estaba contemplada.

Modular Scale es una herramienta creada por Tim Brown, type manager en Typekit y curador de A List Apart. Usarlo es bastante sencillo y no ofrece complicaciones.

Una escala modular, como una escala musical, es un conjunto de proporciones armónicas preestablecidas.
— Robert Bringhurst

¿Cómo usar Modular Scale?

Supongamos que están diseñando un sitio, y están definiendo las dimensiones de sus textos. Quizás tengan bien definido el tamaño de sus párrafos, y quizás de su encabezado principal. Pero no saben que tamaños seleccionar para los diversos encabezados y demás elementos. Es entonces cuando pueden usar esta herramienta:

Definan el tamaño ideal de su texto (párrafos) y de un número importante (puede ser un encabezado principal).

Definan el tamaño ideal de su texto (el que usarían para párrafos) y de un número importante (puede ser un encabezado principal).

Seleccionen la proporción deseada sobre la que sus dimensiones base serán escaladas. Particularmente me gusta utilizar más el 1:1.618 que corresponde a la proporción áurea.

Seleccionen la proporción deseada sobre la que sus dimensiones base serán escaladas. Particularmente me gusta utilizar más el 1:1.618 que corresponde a la proporción áurea.

A partir de los valores que asignaron podrán visualizar las dimensiones que podrán aplicar proporcionalmente a su sitio.

A partir de los valores que asignaron podrán visualizar las dimensiones que podrán aplicar proporcionalmente a su sitio.

Como verán en el resultado, los valores se dividen en Pixeles, Ems, Ems @ 16 y % of 13.

Aunque puede que sólo les baste con el valor de los pixeles, realmente vale la pena que contemplen otras medidas como Ems que permiten un mejor control y fluidez de la tipografía para sitios responsive. Espero pronto escribir al respecto de cómo usar ems o rems (mi favorito).

¿Les sirvió esta herramienta? Comenten y compartan si les ha gustado o si tienen alguna otra alternativa para la escala tipográfica.


Te puede interesar

  • Roc

    Pues la verdad es que no se entiende mucho como se debe utilizar.

    ¿Por favor, puedes desarrollar más la parte en que debes introducir los pixels?

    • 25Horas

      Por supuesto, digamos que estas trabajando tu sitio web, y entonces defines que tu tamaño de párrafo va a ser 16px, éste sería tu Ideal Text Size.

      Y supongamos que hay algún elemento en tu propuesta que tiene que tener 55px en tu tamaño de fuente, éste sería tu Important Number.

      De todas las opciones, escoges la proporción áurea (1:1.618).

      El resultado será este: http://modularscale.com/scale/?px1=16&px2=55&ra1=1.618&ra2=0

      Entonces ya con estos datos puedes decir que tu párrafo va a ser de 16px, y respecto a las etiquetas de encabezados podrías acomodarlos así (es sólo una sugerencia):

      h6: 21.009px
      h5: 25.888 px
      h4: 33.993 px
      h3: 41.887 px
      h2: 55 px
      h1: 67.773 px

      Si tienes cualquier duda avísame! 😉

      • Roc

        ¡Gracias! Ahora lo he entendido mejor.

Inversiones seguras https://gentiuno.com/inversiones-seguras/ comentarios