Cómo calcular tamaños tipográficos para Web

Proporción. La proporción está en la naturaleza en un 100% así como también a nuestro alrededor en las ciudades. Pensar desde la proporción puede ayudarnos en muchos procesos de diseño, a calcular tamaños tipográficos y modulares en la Web. 

Ya hablamos de la tipografía en tiempos de responsive y del problema del Lorem Ipsum. Ahora hablaremos del tamaño y proporción tipográficas.

El tamaño para textos en web debe aproximarse a los 16px ya que es el equivalente a los 12px en la impresión en papel. Las pantallas están más alejadas que el libro, además que es preferible subirle el punto a tener que adoptar una mala postura para poder leer el texto.

¿16px siempre? No. Podemos averiguar el correcto tamaño de nuestro texto pensando en números que no son aleatorios, sino que tienen una base desde el cálculo de la proporción. Qué proporción? la proporción áurea, que nos puede ayudar como base para nuestros diseños así como también para hacercálculos tipográficos para nuestros textos.

:

La gente no es que lee menos, los sitios web todavía no están correctamente diseñados para que el usuario pueda leer textos extensos cómodamente.

La sección áurea o proporción divina en tipografía

No quiero ser muy extensa con esta parte, así que veremos una explicación breve de lo que es la sección áurea, también llamada proporción divina.

El número áureo surge de la división en dos de un segmento guardando las siguientes proporciones: "la longitud total a+b es al segmento más largo a, como a es al segmento más corto b".

Dicho más sencillo: “el grande es al pequeño como el pequeño es a la diferencia".

Veámoslo gráficamente:

Si a ese rectángulo lo divido al medio en dos partes iguales, me salen dos rectángulos igualmente proporcionales, y así hasta el infinito. Esa es la misma proporción que usan los formatos A3, A4, A5, A6 en el papel. El número que identifica la sección áurea es 1.6180339887. 

oert.org :

El número de oro o áureo es el irracional 1,61803…, cociente de (1 + raíz de 5) / 2. Fuente

Proporción áurea y puntos tipográficos

Basándonos en estas proporciones, podemos calcular cualquier cosa que queramos que tenga una proporción armónica.

Tamaño de letra, ancho de línea e interlineado

Estas tres variantes son como las moiras del diseño tipográfico y web. Están ligadas unas a otras, por lo que un valor incidirá en los demás.

Primero necesitamos establecer nuestros bloques o cuadrícula que usaremos en nuestro diseño para poder calcular el resto.

Si tenemos un ancho de 1024px puedo deducir el ancho de los bloques de texto mediante esta proporción.

Código :

1024 / 1.618 = 632,88 

1024 - 632,28 = 391,72

Una vez que tengo las proporciones puedo pasarlas al sistema de medida que me sea más útil para la maqueta.

Ya tenemos el ancho de línea para poder calcular los tamaños tipográficos. Comencemos con el tamaño base. Para eso elegiré el ancho intermedio que es donde se supone irían los textos. 

Calcular las medidas tipográficas con Golden Ratio Typography Calculator

Bueno, para qué tantas ecuaciones complejas si somos diseñadores . Este excelente recurso calcula las medidas tipograficas haciendo el cálculo según la regla de la proporción áurea.

El sistema nos calcula a partir del ancho de línea el tamaño de la tipografía y el interlineado. Si quisiéramos calcular en base al tamaño de la letra, solo ingreso el tamaño y me da el resto de los resultados. 

También puedo calcular en base a cantidad de caracteres por línea (CPL), por ejemplo si deseo saber tamaños para títulos que tengan un máximo de caracteres por línea. También puedo visualizar cómo queda el punto en tal tipografía, de un listado básico de tipografías.

El sistema además me propone los otros tamaños proporcionales para Títulos, Subtítulos y demás, todo en proporción áurea.

El problema de la caja de X

Uno de los problemas que este sistema de cálculo tipográfico es que no contempla la variante de la altura de la caja de X de la letra.

Hay familias tipográficas que tienen más altura de caja de X que otras en el mismo punto. Entonces toca distinguir las características de la tipografía que elegí para ver si debo agregarle más interlineado por ser más alta en su caja de X o quitarle.

Veamos cómo funciona el mismo interlineado y mismo punto tipográfico en dos tipografías distintas:

Como vemos la letra Arial es más gruesa y alta en su altura de X que la Palatino y es por eso que en el primer texto el interlineado se ve más apretado que en el de abajo. 

El interlineado en un párrafo de texto no debe verse. O sea, uno debería ver una mancha gris homogénea a ver líneas en blanco y negro. Si comenzamos a divisar líneas en blanco y negro es que se nos fue la mano con tanto interlineado.

Este es un ejemplo de un párrafo con demasiado interlineado:

Tenemos que tener cuidado al usar estos cálculos matemáticos. Ayudan muchísimo pero muchas veces nuestro “ojo” nos indica que hay que ajustar los números un poco, por que al final todo es acerca de cómo percibe y lee el ojo.

En el sistema Golden Ratio Typography Calculator, ahora pongo un ancho de 800px y me devuelve:

• Font Size: 17 
• Line Height: 28

Veamos cómo queda:

A mi parecer, el ancho de la línea es muy larga y son demasiadas palabras por línea. Para arreglar esto, en el sistema pongo un número menor del CPL (caracter por línea). En vez de 107CPL pondré 80.

Ahora está mucho mejor, y de igual manera seguimos manejando el sistema de proporción áurea, con pequeños retoques.

Al final...el tamaño sí importa

Atrás quedaron los oscuros tiempos en que coleccionabamos las pixel fonts de 7px para usar en nuestras páginas locas hechas en Flash. De a poco con la caída de flash y el auge de los estándares, la Web ha ido por el buen camino, pensándose desde el usuario y la interacción y no desde el ego de los diseñadores. 

Luego vinieron los dispositivos móviles y un gran mercado de pantallas de escritorio cada vez más grandes. También pasa que cada vez hay más herramientas que nos ayudan a hacer cálculos para todo, por lo que tenemos que ser juiciosos y por eso también sigue siendo tan importante saber las bases, para poder hacer los retoques correspondientes para que el mensaje siga siendo lo primordial, que para eso eso estamos, para comunicar mediante imágenes y tipografía.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información