El miedo al papel en blanco. El síndrome al que muchos nos hemos enfrentado cuando empezamos a diseñar una web. Desde SiloCreativo os hemos ofrecido herramientas para empezar vuestros diseños con ciertas bases y que se hagan menos cuesta arriba: como creando una paleta de colores, como usar el espacio en blanco, ideas sobre combinaciones de tipografías… Pero había un aspecto que no habíamos tocado hasta ahora, y era la elección de los tamaños de tipografía dentro del diseño web. Y para ello, tenemos la ayuda de la escala tipografía.
Como ya sabemos, dentro de una web tenemos diferentes jerarquías al designar un texto. Existen varios niveles de encabezados o headings, y párrafos. Además de su jerarquía dentro del HTML solemos darle también una diferenciación de tamaño para diferenciarlas una de otra. Es una de las claves que dimos en nuestro artículo sobre como potenciar nuestros diseños mediante el contraste.
Tenemos claro que un titular va a tener mayor tamaño que un subtítulo, y este a su vez mayor tamaño que el cuerpo del texto pero, ¿cuál es exactamente la diferencia de tamaño entre uno y otro?. ¿Nos vale cualquier tamaño de fuente, simplemente sabiendo que una es más grande que otra?. Aquí es donde entra en juego la escala tipográfica, que nos va a dar ciertas pautas al elegir los tamaños de nuestros textos, consiguiendo al mismo tiempo esa diferenciación jerárquica, pero sin crear saltos de tamaño incómodos para el lector.
¿Qué es una escala tipográfica?
Si sois usuarios habituales de software de diseño gráfico, como Adobe Photoshop o Illustrator, seguro que al elegir el tamaño de un texto dentro de estos programas, os habéis encontrado con esta lista:
Y seguro que os habéis preguntado, ¿por qué han seleccionado esos tamaños y no otros?. ¿Por que avanzamos de 16px a 18px, pero luego damos un salto a 24px?. Esto es simplemente porque hacen uso de una escala tipográfica, heredada directamente de la época en la que las máquinas de escribir eran ampliamente usadas.
La idea de esta escala es buscar cierta armonía entre los diferentes tamaños de fuentes. Se comienza teniendo un valor base, al que le iremos aplicando un valor multiplicador fijo de forma exponencial, con el que conseguiremos todos los tamaños que necesitemos.
Con la escala tipográfica conseguiremos dos metas. Por un lado, en el momento de diseñar, limitamos el hecho de tener que elegir todos y cada uno de los valores de tamaño de nuestros textos. Simplemente elegiremos uno, y obtendremos el resto a partir de él. Por otro, estaremos usando siempre unos valores hermanados entre sí de forma matemática, y que de forma inconsciente las personas que lo vean no notarán nada extraño en sus variaciones.
Una vez sabemos que es una escala tipográfica, ¿qué multiplicadores son los más indicados de usar para crear una escala correcta?. Es lo que veremos a continuación con los diferentes tipos de escala ya existentes que podemos utilizar en nuestros proyectos.
Tipos de escala tipográfica
Hay diferentes tipos de escala que podemos usar en nuestros diseños. Vamos a ver las más comunes, aunque si buscáis podéis encontrar más. En primer lugar, veamos las escalas donde no vamos a tener un salto muy grande entre cada escalón:
- Major Second – multiplicamos o dividimos el tamaño de la fuente por 1,125
- Major Third – multiplicamos o dividimos el tamaño de la fuente por 1,25
- Perfect Fourth – multiplicamos o dividimos el tamaño de la fuente por 1,33
Usando alguna de estas tres lograremos una escala tipográfica más suave, con una diferencia entre cada salto de tamaño menos contundente. Por el contrario, si vamos buscando un estilo donde haya textos con un tamaño muy grande y potente, con un contraste mucho mayor, es mejor que nos vayamos a estas escalas:
- Perfect Fifth – multiplicamos o dividimos el tamaño de la fuente por 1,5
- Golden Ratio – multiplicamos o dividimos el tamaño de la fuente por 1,618
Seguro que ha muchos os suenan estas escalas, y es que están directamente relacionadas con las escalas musicales. No era gratuito cuando decíamos que lo que buscábamos era una armonía entre los diferentes tamaños de nuestros textos.
Calculando la escala tipográfica
Conseguir la escala tipográfica es muy sencillo, ya que como hemos dicho antes, solo hay que aplicar un factor multiplicador. Por ejemplo, si tomamos que nuestro texto base va a tener 16px, y vamos a usar la escala Major Third, el siguiente tamaño de fuente será 20px (16px x 1,25), el siguiente 25px (20px x 1,25)… Y por debajo de 16px, tendremos 12,8px (16px / 1,25). Mediante estos sencillos cálculos podemos tener definidos todos los tamaños de fuentes en nuestro proyecto.
También podemos recurrir a herramientas que nos automatizan este trabajo, y que nos dejan ver de un solo clic el resultado que vamos a obtener. Una de mis favoritas es Type Scale. Simplemente deberemos asignar el tamaño base de nuestra fuente y el tipo de escala tipográfica que vamos a usar. Solo con eso ya obtenemos una previsualización completa, a la que podremos cambiar el texto, el tipo de fuente o su grosor.
Escala tipográfica y CSS
Veamos como podemos aplicar todo esto a nuestros diseños web mediante CSS. Una de las formas más sencilla es mediante es uso de variables CSS. Las variables CSS nos permiten darle una nombre creado por nosotros mismos a un valor de una propiedad CSS. Así, cuando lo utilicemos en un futuro, no debemos acordarnos del valor exacto, solo recordar el nombre que le dimos. Suele ser muy común para designar colores, ya que es más fácil retener un nombre que hayamos puesto nosotros, que un código de color HEX.
En nuestro caso, nos va a servir para no que no tengamos siempre en mente los valores de los tamaños de fuente, ya que al tener a veces decimales, serán más difíciles de recordar. La designación dada a las variables es muy personal, ya que cada uno vamos a usar una que sepamos a que se refiere. En mi caso, usare el código fs para saber que se refiere a font-size, seguido de un guión, y el tamaño de la fuente: sm para small, md para medium, lg para large, etc. Por lo que el código CSS sería así si estamos usando la escala Major Third:
:root {
--fs-xsm: 12.80px;
--fs-sm: 16px;
--fs-md: 20px;
--fs-lg: 25px;
--fs-xl: 31.25px;
--fs-xxl: 39.06px;
}Una vez tenemos esto, solo tendremos que aplicar estas variables CSS a cada tipo de texto que tengamos en nuestra web. Por ejemplo, puedo asignar la variable –fs-sm a mis párrafos, –fs-xxl a h1, –fs-xl a h2, –fs-lg a h3… Ya es cuestión de gustos ver donde encaja mejor cada tamaño. Y, por supuesto, podemos aumentar la escala y agregar más variables según las necesidades de cada proyecto.
La importancia de usar una escala tipográfica
Aunque esto solo ha sido una pequeña introducción, nos puede servir para entrar en el mundillo de las escalas tipográficas. Y es que no hay una guía exacta sobre que escala es mejor. Unas encajaran mejor en webs en las que necesitemos textos a gran tamaño, otras en las que necesitemos que sean muy legibles. O incluso según la clase de tipografía, nos encaje mejor una escala que otra. También podemos optar en usar dos escalas diferentes dentro de un mismo proyecto, una para le versión en escritorio y otra para dispositivos móviles. Para esto, nos resultará muy útil el uso de media queries para colocar cada CSS en su lugar correcto.
Usar este tipo de herramientas al crear nuestros propios diseños nos servirá para siempre tener una base sobre la que construir, sabiendo que al menos, en referencia a las tipografías y los textos, vamos a conseguir cierta armonía, y evitar extraños contrastes de tamaño. Es una cuestión de experimentar por nosotros mismos, y ver webs en donde se haya hecho uso de estas escalas para comprobar como se ha utilizado y bajo que condiciones.
Como siempre, tenéis disponibles los comentarios para cualquier duda, sugerencia o experiencia que queráis compartir con nosotros, y que seguro que nos servirá como inspiración para seguir creando y creciendo!
