15 de agosto de 2019
No recuerdo donde fue la primera vez que leí sobre escala tipográfica, pero desde que lo conocí es por lo primero que hago al una guía de estilos para un proyecto, consiste en multiplicar un tamaño base del texto por un factor de crecimiento para obtener el tamaño de los encabezados.
Te recomiendo un par de herramientas type-scale.com y modularscale.com
Vamos a implementar esta técnica utilizando variables CSS, necesitamos un tamaño base, un factor de crecimiento y el numero de veces que se va ha incrementar, por defecto ninguna.
Utilizamos la función calc para obtener el tamaño de nuestro texto, échale un ojo al código.
Ahora vamos a añadir ritmo a nuestro texto, utilizamos el alto de linea como unidad para generar los espacios en blanco y el alto de linea del resto de elementos. Así conseguimos una armonía en nuestro diseño.
Puede que te interese este recurso www.gridlover.net
Ahora vamos a añadir ritmo vertical a nuestro ejemplo anterior, y lo podemos utilizar tanto para el alto de linea, márgenes y rellenos siempre combinándolo con nuestra gran aliada la función calc.
Nuestra CSS tiene un problema los encabezados principales son demasiado grandes para verlos en dispositivos móviles, para solucionarlo simplemente tenemos que reducir el factor de crecimiento así no alcanzarán tamaño tan grandes.
Con este ejemplo ya puedes ver la potencia que tienen las variables nativas de CSS y la diferencia que tienen con las variables de Sass.
Como solo necesitamos cambiar el valor de las variables para modificar el comportamiento de nuestros textos. Vamos al siguiente nivel «calc inception».
En tamaño intermedios de pantalla nos puede ser muy útil multiplicar el tamaño del texto por una unidad relativa a la pantalla como por ejemplo viewport width (vw)
Para ello asignamos como valor a nuestras variables una función calc con el tamaño de texto multiplicado por la unidad relativa.