Cómo Crear una Escala Tipográfica Modular

Posiblemente la pregunta tipográfica más obvia para un diseñador sea “¿Qué tipgrafía debería usar?” La segunda cuestión que raramente recibe la merecida atención es “¿Qué tamaño debería tener la tipografía de mis textos?” Crear una escala modular es la mejor forma de determinar los tamaños tipográficos, de hecho, puede ayudar a establecer los tamaños y proporciones de todo el diseño de la página.

A lo largo de esta serie hemos visto la jerarquía; como el tamaño y otros factores pueden influir en las relaciones visuales de los elementos tipográficos. También hemos explicado recientemente el ritmo vertical, la consistencia visual del espaciado y los elementos de una página. Después tenemos el asunto de establecer una retícula de base para el interlineado, que nos ayuda a establecer el ritmo vertical. Hemos hablado incluso del uso de ems como unidad de medida, en dos ocasiones de hecho. Todos estos aspectos tipográficos están vinculados con la presencia fundamental del tamaño, por tanto, ¿cómo decides exactamente cuán grandes deben ser tus elementos tipográficos?

Introducción a la Escala Modular

El término Escala Modular hace referencia a un conjunto de valores armónicos. Siendo una escala, cada valor está en relación al resto y podría tener el siguiente aspecto:

Aplicando esta escala a una tipografía básica con CSS, obtendríamos lo siguiente:

1

h1 { font-size: 36px }

2

h2 { font-size: 24px }

3

h3 { font-size: 18px }

4

h4 { font-size: 14px }

5

6

p { font-size: 11px }

7

8

small { font-size: 9px }

Podrías reconocer estos valores como parte de la escala modular clásica, ilustrada por Robert Bringhust en The Elements of Typographic Style (Los Elementos del Estilo Tipográfico).

Una escala modular, al igual que una escala musical, es un conjunto preestablecido de proporciones armoniosas.

Robert Bringhurst

Al adherirte a esta escala y establecer tus distintas variantes y piezas tipográficas a los valores mostrados, adquirirán una belleza intrínseca; se trata de las proporciones destiladas a través de la experiencia y que han funcionado a los diseñadores tipográficos durantes siglos.

Sí, siglos, no nos hemos equivocado.

De hecho, en su origen, el establecimiento de una escala tipográfica sobrevino tanto como necesidad práctica como para establecer un juicio estético. En los emocionantes días de la tipografía de metal fundido, cuando cada carácter era moldeado como un bloque metálico (llamado tipo) esto no era viable, resultaba demasiado caro fundir y almacenar los conjuntos completos de los caracteres de cada tipografía, en todos sus distintos grosores y tamaños.

Los antiguos cajistas de imprenta establecieron por tanto, a través de la experiencia y el paso del tiempo, un útil rango de tamaños que funcionaban juntos de forma armónica.

Establecer Tu Propia Escala Modular

Establezcamos ahora una sencilla escala, para usarla en nuestros propios proyectos.

Escoge un Número

Necesitamos empezar por algún sitio, así que empezaremos con un número significativo de base, nuestro tamaño de fuente base. Estoy acostumbrado a empezar con el tamaño, sea cual sea, que tenga establecido como predeterminado el navegador, de forma que usaremos 16px de base. Tim Brown recomienda empezar con el tamaño de fuente en el que tu fuente se muestre más nítida – normalmente este tamaño será de 16px para fuentes diseñadas pensando en la web.

Lo Conocía, Ratio-Ho

(Lo siento, esta fue la única cita que se me ocurrió conteniendo el término ratio).

Así que ahora necesitamos establecer una proporción o ratio, mediante el cual multiplicaremos y dividiremos exponencialmente nuestro valor base. Este ratio puede ser cualquier cosa que tú elijas; si tienes alguna escala que a tu parecer proporciona unos resultados atractivos, perfecto.

Podrías, por ejemplo, optar por el ratio de oro 1:161803398875. Este ratio tiene su origen en las propias estucturas del mundo natural que nos rodea, y ha sido empleado por diseñadores y arquitectos para estructurar estéticas armoniosas desde… siempre.

Para ilustrar rápidamente lo que está sucediendo, vamos a usar 1:2 (aquello de vosotros que tengáis sentido musical, yo precisamente no, reconoceréis esto como una octava). Empezando con 16, obtenemos lo que viene a continuación:

1

16 * 2 = 32

2

32 * 2 = 64

3

64 * 2 = 128

Y esto puede continuarse exponencialmente. Para establecer nuestra escala, dividimos a la baja de la siguiente forma:

1

16 / 2 = 8

2

8 / 2 = 4

3

4 / 2 = 2

Con esto conseguimos el inicio de nuestra escala:

Que después podemos aplicar a nuestro CSS para la tipografía básica de la siguiente forma:

1

h1 { font-size: 256px }

2

h2 { font-size: 128px }

3

h3 { font-size: 64px }

4

h4 { font-size: 32px }

5

6

p { font-size: 16px }

7

8

small { font-size: 8px }

¡Buen trabajo!

Completa los Huecos

Esta escala es bastante extrema. Funciona, pero para una página web estas medidas son bastante despiadadas. Para permitirnos mayor flexibilidad, démonos más opciones añadiendo una segunda dimensión a la escala, un proceso descrito por Tim Brown en su artículo More meaningful Typography escrito para A List Apart.

Escoge otro número. Sirve cualquier número, mientras tenga algún sentido para ti en tu diseño. Ya hemos usado 16 porque es el tamaño de nuestra fuente base, así que completémoslo añadiendo 95, la anchura de un columna que voy a emplear en esta maquetación de ejemplo cuya anchura de página será 1.140px.

Aplicando el ratio 1:2 a 95, obtenemos la siguiente escala:

1

11.875 / 2 = 5.938

2

23.75 / 2 = 11.875

3

47.5 / 2 = 23.75

4

95 / 2 = 47.5

5

95 * 1 = 95

6

95 * 2 = 190

7

190 * 2 = 380

8

380 * 2 = 760

Por tanto ahora tenemos dos escalas, ambas basadas en el mismo ratio, y que por tanto coexisten bastante bien:

De hecho, podemos combinarlas, obteniendo la escala siguiente:

1

760.000

2

512.000

3

380.000

4

256.000

5

190.000

6

128.000

7

95.000

8

64.000

9

47.500

10

32.000

11

23.750

12

16.000

13

11.875

14

8.000

15

5.938

16

4.000

17

2.969

18

2.000

19

1.485

Esto cubre nuestros huecos, haciendo que nuestra escala se vea mucho más completa.

¿Qué Hago con Estos Números?

Ya hemos mencionado como podemos aplicar nuestra escala a elementos tipográficos básicos, así que actualicémoslo.

1

h1 { font-size: 64px }

2

h2 { font-size: 47.5px }

3

h3 { font-size: 32px }

4

h4 { font-size: 23.75px }

5

6

p { font-size: 16px }

7

8

small { font-size: 8px }

Ahí vamos, tampoco es tan intenso. Nuestra escala también puede aplicarse a otras características tipográficas, como el interlineado (line-height) y por tanto a toda la rejilla base:

1

p {

2

  font-size: 16px;

3

	line-height: 23.75px;

4

	margin: 0 0 16px 0;

5

}

Y también podemos mejorar todo esto usando ems, haciendo las relaciones y las proporciones más limpias:

1

body {

2

	font-size: 100%;

3

}

4

5

p {

6

	font-size: 1em;

7

	line-height: 1.484;

8

	margin: 0 0 1em 0;

9

}

Si tienes dificultades con los cálculos en este punto, revisa el artículo Modular Scale de Tim Brown. Su calculadora extraerá automáticamente los valores en píxeles y en em.

Como referencia, aquí tienes el aspecto que tiene nuestra escala en ems (en otras palabras, las medidas son relativas al tamaño de la fuente base):

1

64

2

47.5

3

32

4

23.75

5

16

6

11.875

7

8

8

5.938

9

4

10

2.969

11

2

12

1.484

13

1

14

0.742

15

0.5

16

0.371

17

0.25

18

0.186

19

0.125

20

0.093

Dimensionar Nuestra Retícula

Tras habernos ocupado de los elementos tipográficos básicos de nuestra página, volvamos nuestra atención a la estructura. Podemos crear fácilmente una sencilla fila de doce columnas de la siguiente manera:

1

.column-1 	{	width: 95px };  	*

2

.column-2 	{	width: 190px };  	*

3

.column-3 	{	width: 285px };

4

.column-4 	{	width: 380px };		*

5

.column-5 	{	width: 475px };

6

.column-6 	{	width: 570px };

7

.column-7 	{	width: 665px };

8

.column-8 	{	width: 760px };		*

9

.column-9 	{	width: 855px };

10

.column-10 	{	width: 950px };

11

.column-11 	{	width: 1045px };

12

.column-12 	{	width: 1140px };

13

14

/* in a fluid grid, these would be converted to % values */

Reconocerás los valores que tienen un asterisco al final de la línea, son los que mostraremos en nuestra escala modular.

Cada columna tendrá que tener asignado el atributo “float”, y además, para crear los medianiles, o espacios entre columnas, podemos añadir algo de padding a cada una, por ejemplo de 1em (16px, valor que también aparece en nuestra escala).

1

/* apply a natural box layout model to all elements */

2

*, *:before, *:after {

3

  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

4

 }

5

6

.column {

7

	float: left;

8

	padding: 0 1em;

9

}

Rápidamente hemos creado las bases para una sólida retícula, y también para la tipografía, todo ello basado en una escala armónica.

Llevarlo Más Allá

Combinar las retículas con la tipografía puede ser un asunto complicado; ¡calcular una harmonía puede resultar en ocasiones muy poco intuitivo! Aunque una vez hayas establecido una base básica, descubrirás que no puedes maquetar una página web sin dar algún tipo de sentido en las relaciones entre los elementos de tu página.

Lo que hemos hecho hasta ahora constituye un buen comienzo, pero todavía hay mucho más por hacer y un montón de tareas para dejarlo pulido. Por ejemplo, podría resultar un poco engorroso crear la rejilla de base en este momento, ya que podrías descubrir que los valores iniciales no funcionan. Además, probablemente querremos que nuestra retícula sea flexible, por tanto las columnas no mantendrán los valores fijos que usamos originariamente. Por este motivo, podrías observar como nuestros valores horizontales no siempre funcionan con las medidas verticales.

A lo largo de los siglos se han establecido y se han probado distintas escalas y retículas. ¿Por qué no intentar implementar algunas de ellas en nuestro trabajo? ¿Has aplicado alguna vez deliberadamente una escala modular a tu trabajo? Si no es así, ¿cómo determinas el tamaño de tu tipografía? ¿Existen problemas específicos con los que te sueles topar cuando usas escalas? ¡Danos tu opinión a través de un comentario!

Referencia Útiles

• More Meaningful Typography de Tim Brown
• Modular Scale de Tim Brown
• Typeplate a kit de base para la Tipografía
• The Typographic Scale
• Scale & Rhythm de Iain Lamb
• Definición de Proporciones modulares en la Wikipedia
• Don’t compose without a scale
• type-scale.com herramienta tipográfica de Jeremy Church