Escalabilidad
Last updated
Last updated
La escalabilidad de los tamaños tipográficos es clave para mantener una consistente experiencia visual en toda la interfaz. Existen diversos métodos y fórmulas para lograr una escalabilidad adecuada, pero en Quantum Design nos basamos en dos principios fundamentales: Base y Escala.
La base es el tamaño más pequeño que estimamos utilizar en la interfaz. En Quantum, definimos un tamaño base para los títulos y otro para los cuerpos de texto.
Para generar la escalabilidad, utilizamos tres reglas universales en la escala tipográfica: High Contrast, Medium Contrast y Low Contrast. Cada una de estas reglas genera un contraste entre los tamaños de texto, según el propósito y las necesidades específicas del tamaño de la interfaz.
High Contrast (1.41) Util para los dispositivos de pantalla grande.
Medium Contrast (1.22) Genera un contraste entre los tamaños de texto no tan drástico, lo que permite ajustarse a interfaces con más contenido de manera armoniosa.
Low Contrast (1.12) Ideal para diseños que deben ser versátiles, como dashboards y apps móviles, ya que permite que el contenido sea flexible.
Lo primero que debes hacer es seleccionar un tamaño base, tanto para el cuerpo de texto como para los títulos. Luego, elige el tipo de contraste que deseas utilizar. Como puedes observar, cada contraste tiene un número asignado. A continuación, multiplica el tamaño base por el número del contraste, y el resultado obtenido debe volver a multiplicarse por el número del contraste. Repite este proceso sucesivamente hasta alcanzar la cantidad de tamaños establecidos.
Ejemplo: vamos a elegir 14px como base para los títulos y Medium Contrast (1.22) como sistema de escala
Acá podemos definir entonces que 14 será el tamaño de título más pequeño y 37,4 el más grande. También se puede redondear para tener solo un número de dos o tres dígitos.
El line-height es responsable de proporcionar consistencia al tamaño de cada tipografía. Para esto, utilizamos un sistema escalable que consiste en sumar puntos según el tamaño del texto, comenzando con 4 puntos y añadiendo 2 puntos adicionales por cada incremento de tamaño.
Ejemplo: Siguiendo el ejercicio anterior, el tamaño más pequeño es de 14px. A este le sumamos 4 puntos, lo que resulta en un line-height de 18px. Para el siguiente tamaño, que es 17px, el line-height no será de 4 puntos, sino que sumaremos 2 puntos más, es decir, 6 puntos. Por lo tanto, el line-height para este tamaño será de 23px. Y así sucesivamente con cada tamaño.
Acá podemos definir entonces que 14 será el tamaño de título más pequeño y 45,6 el más grande. También se puede redondear para tener solo un número de dos o tres dígitos.
