Antes usaba pixels como unidad de medida para las fuentes. Llegó el responsive y hacia como muchos, usaba saltos media query para ir cambiando el tamaño conforme lo hacia el tamaño de pantalla… (perdón, mejor “ventana” en vez de pantalla porque habitualmente no podemos disponer de todo el tamaño de pantalla por las áreas de interfaz y otras cuestiones)
Esto tenia varios problemas, uno de ellos la inconsistencia entre el tamaño de la ventana y la fuente. En determinados tamaños de pantalla (y ahora hay cientos) un titular se salia del marco, o aparecia un salto de linea que desmaquetaba la pagina y afeaba el conjunto.
Descubrí “vw” (ViewportWidth) como unidad de medida. Perfecto, con h1{ font-size:2vw} Hacias que el tamaño de la fuente fuera el 2% del ancho de pantalla. Ahora si, escalabas la ventana y la fuente escalaba en la misma proporción, se acabaron los saltos de linea ocultos. Los textos se ampliaban como si fuera fotosop.
Problema: Al estar ligados al tamaño de la ventana cuando la pagina habia terminado de escalar (el tipico .container{max-width:…) el texto seguia aumentando. Además, a partir de determinado tamaño, la fuente adquiria proporciones horribles.
Solución : Limitar con media querys tanto el mínimo como el máximo del tamaño. Por debajo de 479 el mínimo legible, por arriba del ancho total de la página el máximo estético o funcional. Pero surge un nuevo…
Problema: Es un coñazo tener que añadir media querys a todos y cada uno de los tamaños de texto, h1, h2, h3, p, etc.
Solución: Aquí acude en nuestra ayuda el viejo “em”. El em es una referencia relativa al tamaño de fuente heredado. Toma como valor el inmediatamente definido anterior. De esta forma, si definimos en el body un font size de 14px y al h1 le aplicamos un 2em, h1 valdrá 28px. Si metemos el h1 en un div que tenga como font size 1.5em, el h1 tendrá 42px de tamaño (14px * 1.5 * 2). Si el div tiene un tamaño en pixels, el em se calculara en base a ese tamaño, no el del body.
Ya tenemos todas las herramientas que necesitamos.
Aplicamos al body un font-size basado en vw limitado por arriba y por abajo con media querys. Pongamos 1.7em, 12px por debajo de 479px y 18px por encima de 1024px. Si calculamos el tamaño en el momento de corte del media query (1024/100*1.7= 18px aprox.) el cambio de em’s a pixels sera continuo y quedara mas fino.
El resto de fuentes las definimos con sus proporciones en em’s y solo nos ha hecho falta dos media querys para definir los tamaños de todas las fuentes de la web, y se escalaran de forma continua con el ancho de la ventana. Además todos los tamaños de fuente estarán referenciados a un único valor, el del body,esto hace muy fácil aumentar o disminuir todas las fuentes a petición del usuario, según dispositivo, etc.
Esto de tener un valor relativo a un ancho limitado de pantalla nos da juego para más cosas que contare en el próximo capítulo.Hay que tener siempre en cuenta el efecto acumulativo de los em’s. Todos los textos que metamos en un div con font-size:0.5em tendrán la mitad de tamaño. Podemos usar la variante “rem”, está un pelin menos soportada, y hace referencia “directa” al tamaño definido en el body (RootEm) independientemente de los tamaños intermedios.
Esto de tener un valor relativo a un ancho limitado de pantalla nos da juego para más cosas que contare en un próximo articulo.