Escalabilidad tipográfica en el diseño de interfaces

La web es 95% tipografía, en alguno de los cursos online de SEO que llegue a tomar hace algunos ayeres, el autor del mismo comentaba que el contenido de un sitio web era el rey. Pero, ¿Desde el diseño de interfaces lo vemos así?

Creo que desde la perspectiva del diseño de interfaces también estamos entendiendo su importancia, por ello es que están surgiendo profesiones como las de UX Writing que ayudan a que nuestros textos sean claros y concisos para que el usuario interactúe fácilmente y sin tener una alta carga cognitiva, y que pueda cumplir con su cometido en nuestra aplicación.

Dicho lo anterior. Sí que es uno de nuestros aliados para dar jerarquía y hacer que nuestro diseño no solo se vea hermoso 🤩, sino que también ayude al usuario a cumplir su objetivo en nuestro sitio web o aplicación 🎯. Ahora sí, viene lo bueno…

Después de esta pequeña introducción, lo que queremos saber es. ¿Cómo hago para tener una fuente con buena escalabilidad para mi proyecto?

Y la respuesta es… Depende del proyecto.🤯

Al principio mi cabeza exploto, pero después de seguir con la 🕵️investigación🕵️ me hizo todo el sentido del mundo.

Te explico…

Veamos primero ¿Que es una escala modular?

Una escala modular hace referencia a un conjunto de valores armónicos, estos forman una escala en la que un valor tiene relación hacia su valor anterior y su valor siguiente.

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

Ese tipo de escalas modulares tienen matemáticas por detrás para que tengan cierta consistencia, al principio sería bueno entender el trasfondo de ello para saber cómo están creadas y sacarles el mayor provecho según sea el caso. Por lo tanto, explicaré un poco el cómo están creadas.

Digamos que tenemos una fuente base de 16px, esta la multiplicamos por una proporción seleccionada en mi caso será 1.250, pero ¿y de dónde sacamos ese multiplicador? La realidad es que ya alguien hizo un poco el trabajo por nosotros.

Hay varios sitios web como type-scale, Layoutgrid calculator, Modular scale, google material también tiene una herramienta, Entonces de esta forma tendremos las bases para elegir un tipo de escala y empezar a trabajar con ella, para este post trabajaré con Type Scale.

Nos vamos al sitio web y veremos en la parte izquierda tenemos una serie de inputs donde podemos elegir nuestra fuente base, después un input que nos pregunta por la escala, por defecto está la de Major Third Seleccionada, posteriormente veremos qué tipo de fuente usaremos (Este sitio web usa google fonts) usaremos Poppins y en el Weight usaremos 400, tenemos también un input donde podemos poner un texto a nuestro gusto, y en la parte derecha veremos nuestra escala.

🏆¡Si siguen conmigo, son unos campeones!🎖️

Tengan la seguridad qué al terminar esta lectura, tendrán las bases sólidas para arrancar y usar mejor la tipografía en sus aplicaciones.

Así que sigamos que nos falta un poco más para llegar a la cima.🧗

Si vemos en la página en el input donde elegimos Major Third tenemos un número a la izquierda, este numerito es nuestro querido multiplicador (1.250), que fue el que yo elegí y por el que multiplicaremos nuestra fuente base que en este caso fue 16px, de hecho, ahí ya nos entregan una escala que puede ser perfectamente llevada a nuestras aplicaciones como Sketch, Figma o Adobe XD para empezar a trabajar. Bueno, veamos cómo se hace esta multiplicación con una imagen.

Dejo link a la imagen por si no no se visualiza bien :)

Para concluir este punto, si regresamos al sitio web podemos ver que tenemos varias opciones para escalar nuestra tipografía, como Augmented Fourth, Major Second, Perfect Fourth, entre otras.

Adelante veremos ejemplos de por qué y como usar cada algunas de ellas.

En el ejemplo de la imagen de arriba puse los números con decimales, podemos ver que el resultado de la multiplicación de 8.19 x 1.250 que es 10.2375 es el tamaño de fuente del siguiente y así sucesivamente, de esta manera podemos crear nuestras propias escalas teniendo como base un número, pero para no complicarnos lo ideal es usar las herramientas existentes, que ya traen un trabajo detrás.

Una vez que entendemos de donde sale esta escalabilidad con consistencia de nuestras tipografías, podemos pasar al tema de, ¿cómo elegir la mejor dependiendo de nuestro proyecto?

Aquí es donde tendrá más sentido, el que podamos tener variantes en nuestra forma de escalar una fuente.

💪¡No nos detengamos que casi logramos nuestro objetivo!💪

Elliot Dahl, genero tres arquetipos en los que agrupaba los distintos tipos de sitios o web apps.

• Sitio de marketing
• Blog
• Sitio de contenido administrativo

Categorización de arquetipos creada por Elliot Dahl

Sitio de marketing

Según la ilustración este tipo de sitios tiene una escalabilidad muy marcada entre un tamaño de fuente y otra. Entonces podríamos usar como base la escala Perfect Fourth

Sitio de marketing, podemos usar una escala tipo Perfect Fourth

Sitios informativos / Blogs

Para los sitios informativos / Blogs podemos utilizar una escala media según el autor, ya que proporcionara un buen contraste, pero dejará que pueda ponerse bastante información.

Sitio informativo/blog, podemos usar una escala tipo Major Second

Sitios de producto

Para los sitios de producto donde tengamos dashboards, paneles, etc. Debemos usar una escala baja, ya que queremos usar varios tamaños de fuente.

Sitio de producto, podemos usar una escala Minor Second

🏁¡Por fin!🏁

Hemos terminado… por ahora.

Solo me queda decirte que debes poner a prueba estas fuentes al momento de empezar a trabajar en tu mockup, ya que seguro será necesario ir haciendo ajustes a los tamaños y posiblemente necesites agregar y quitar tamaños según vayas viendo la necesidad, pero sin duda ya puedes empezar a trabajar con la base sólida que hemos visto en este artículo.

Recordando que este artículo no expresa una verdad absoluta ni mucho menos. Mi intención es compartir un método que me pareció interesante y que puede dar punto de partida para algunos diseñadores de interfaces.

(Mantén tu mente inquieta, cuestiónate este y otros artículos, no hay una verdad absoluta.) Saludos🤙

👉Por cierto, no olvides compartir si consideras que puede aportar valor a alguien.🦸♂️