Blog  //  Enero 2014  //  Font-size | Maquetar responsive con rem

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

con 2em no es lo mismo que una

con 0.8em dentro de un

con 2em que va dentro de un
con 2 em. ¿Confuso? Pues aqui está el problema de usar unidades em (¡demasiado complicado!). Si trabajas con documentos html estaticos, que tu (que eres un experto) puedes controlar a lo mejor te apañas, pero cuando entran gestores de contenidos y diferentes usuarios y/o personas maquetando se convierte en el infierno.

b) ¿Que alternativa tenemos a los em? ¡Los rem (root em)! Son también unidades relativas, lo unico es que dependen solamente del valor definido en la raiz (en el
). 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;}
 

 

 

Escrito por:
BABELCreativa
Publicado el 10/01/2014 por BABEL | con 0 comentarios
Comentarios:
Esta publicación no tiene comentarios.
 Security code