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

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 (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.

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