Font-size | Maquetar responsive con rem

Elegir la unidad de medida para el font-size a la hora de maquetar una página Responsive no es tan sencillo. Tenemos los problemas de compatibilidad (y antiguedad) de navegadores que a veces nos limita a la hora de utilizar las tecnologías más actuales. En este post no nos centraremos demasiado en explicar los pros y contras de cada unidad pero mostraremos el método que creemos ser el más sencillo para la actualidad.

1. ¿Qué unidades tenemos disponibles para el font-size?

Absolutas: px y pt
Son unidades de tamaño fijo (1 punto = 1 pixel de la pantalla / no escalables) lo que afecta la accesibilidad, empeorando cuando utilizados en dispositivos pequeños con grande resolución.

Relativas: %, em, rem, vh, vw, vmin, vmax
Dependen de un valor previo.

Nota: las unidades vh, vw, vmin y vmax son aun demasiado actuales y todavía soportadas por un porcentaje bajo de dispositivos, lo dejaremos para un post posterior.

2. ¿Que medidas usar?

¡Las relativas! Son muy utiles porque permiten de una forma sencilla determinar el tamaño de una tipografía (para cada dispositivo), con tan solo cambiar en la css el valor de su primero contenedor... dos demás se cambiarán proporcionalmente en cascada.

a) Los em, ¿no? Son medidas que cualquier dispositivo puede interpretar y, como son medidas relativas (también dependen del tamaño de fuente predefinido por el usuario para su dispositivo) las hace accesibles. Por norma los dispositivos vienen configurados como 1em = 16px, pero el usuario puede configurar el tamaño de fuente de su dispositivo. El problema en usar este tipo de unidad (que tiene un comportamiento igual que el %) es que va en función del tamaño determinado de sus contenedores. Es decir, una

con 0.8em dentro de un

). Pero... ni todos los dispositivos interpretan este valor. Ver aquí cuales lo soportan: www.caniuse.com.

3. ¿Cómo aplicar los rem sin olvidar los navegadores que no los suportan?

¡A través de fallback! Consiste en darle una alternativa en caso de que no funcione el rem; básicamente especificar las medidas en dos unidades. En primero lugar viene la medida en px (sí, px no es una medida relativa, pero se verá en un numero reducido de dispositivos... creo que nos podemos permitir a ese "lujo") y luego despues en rem. Los dispositivos que entiendan rem se quedan con esta medida y si no, se quedan con la medida anterior (px).

Para complementar el proceso, y para simplificar nuestro labor de maquetación, podemos "resetear" el valor del rem en el root () para que este se acerque al valor de px (así tenemos una referencia de los tamaños que estamos usando). Si el body {font-size: 100%)  entonces 16px = 1rem, entonces body {62.5%} 16px = 1.6rem.

Ejemplo:

html { font-size: 62.5%}
h1 {font-size:24px; font-size:2.4rem;}
h2 {font-size:18px; font-size:1.8rem;}
p {font-size:12px; font-size:1.2rem;}