Unidades de medida

Siempre había tenido dudas en cuanto a las medidas utilizadas en css, cuál es la recomendada, por qué usar unas u otras. Hoy por fin, ya era hora, me he puesto a investigar en profuncidad. Si te pasa lo mismo, aquí te dejo mis conclusiones.

Conceptos previos

En css utilizamos medidas para establecer alturas, anchos, márgenes, tamaño de la letra,… de los diferentes elementos html.

Sintáxis

• Se indica con un valor numérico decimal y la medida.
• Entre el valor y la medida no debe haber ningún espacio.
• Cuando el valor es 0 no hace falta indicar la unidad de medida

Clasificación

Podemos clasificar las unidades de medida en dos grandes grupos:

Unidades absolutas

Establecen de forma exacta el valor de un elemento, no dependen de otro valor de referencia.

• cm - centímetros
• mm milímetros
• in - pulgadas (inches) - 1in = 2,54cm = 96px
• pt - puntos - 1pt = 1/72 de 1in = 0.35mm aprox.
• pc - picas - 1pc = 4.23milímetros - 12pt
• px - píxeles - 1px = 1/96 de 1in.

De las medidas absolutas, en la web podríamos decir que sólo se utilizan px y pt.

Unidades relativas

Definen su valor en función de otro valor de referencia.

• ex - unidad relativa con respecto a la altura de letra indicado. Aproximadamente, el tamaño 1ex corresponde al alto de la letra “x” de la tipografía que estemos usando. Esta medida no se suele usar.
• em - unidad relativa con respecto al tamaño de letra indicado en ese elemento o en sus ancestros.
• rem - relativa al tamaño de letra del elemento root (html) y si no se ha establecido al que venga por defecto en el navegador.
• % - valor entre 0 y 100 relativo al alto o ancho de su contenedor.

Las medidas relativas son mucho más flexibles que las absolutas porque se adaptan mejor a cada medio. Por ello son las que vamos a usar en css (a excepción de la medida ex).

Entremos en detalle con cada una de ellas.

Px

Esta medida depende de la resolución del dispositivo por lo que también se podría considerar como medida relativa. Sin embargo, al haber tanta variedad en cuanto a tamaños de pantalla se refiere, no se recomiendan utilizar.

Aunque no la vayamos a utilizar hay que tenerla muy presente ya que todas las medidas relativas finalmente son computadas por el navegador en píxeles.

Rem

Esta unidad existe desde 2013 y su nombre viene de "root em". Es relativa al tamaño de fuente del elemento root del documento, es decir, del html. Si este no se ha establecido por css hará referencia al que venga por defecto en el navegador.

Este valor suele ser 16px, por lo que podríamos decir que por defecto 1rem = 16px

Realmente no deberíamos de modificar el tamaño de fuente del root mediante css. Estaríamos"manipulando" el comportamiento por defecto del navegador en el caso de que el usuario cambie la fuente en las opciones de configuración.

Esto lo puede hacer cualquier persona pero sobre todo aquellas que tienen problemas de visión ya sea por discapacidad, edad o porque simplemente prefieren aumentar o disminuir el tamaño de letra.

Para hacerlo en Chrome por ejemplo, en el menú pinchamos en Ajustes. Pinchamos en el enlace de "Mostrar opciones avanzadas" y en el apartado de Contenido Web aparecerá un desplegable con las opciones de tamaño.

Si el root no está "manipulado" las equivalencias deberían de ser las siguientes:

• Very small - 9px
• Small - 12px
• Medium - 16px
• Large - 20px
• Very large - 24px

En el caso de querer "manipular" estos tamaños por algún motivo, quizás por hacer la versión mobile de una web de una manera provisional y aumentar rápidamente todos los tamaños, deberíamos utilizar al menos medidas relativas, nunca en píxeles. De lo contrario, cuando el usuario vaya a cambiar estas opciones no verá ningún efecto.

Em

Esta unidad es relativa con respecto al tamaño de letra indicado en el elementro al que estemos haciendo referencia..

Si el elemento no tiene font-size establecido hará referencia al font-size de su ancestro. Su valor por tanto está afectado por la herencia.

Aproximádamente, el tamaño 1em corresponde al ancho de la letra “M” de la tipografía que estemos usando. Esto viene a ser, si no tiene ningún font-size heredado, 16px.

Como excepción cuando utilizamos este medida en las media queries, siempre hace referencia al font-size del root (html).

Puesto que los cálculos para saber la equivalencia entre em y px puede ser complicada a veces lo que se hace es establecer al body un font-size equivalente a 10px con una medida relativa.

Esto de que la medida sea relativa es importante. Si lo hacemos con una medida absoluta ocurrirá lo mismo que hemos comentado antes en la unidad rem, estaremos privando al usuario de poder cambiar el tamaño de la fuente en la configuración de su navegador.

Esto se puede hacer de 2 formas:

body{
     font-size:62.5%;
}

body{
     font-size:x-small;
}

Los dos métodos son relativas y equivalen a 10px. De este modo ahora la equivalencia es más intuitiva:

1em = 10px

1.2em = 12px

1.4em = 14px

1.6em = 16px

Y así sucesivamente

Una desventaja de esto es que si por ejemplo, quiero dar un tamaño concreto a un enlace que hay dentro de un párrafo, tengo que sobrescribir lo que me viene en el padre( que en este caso sería el párrafo). Además la equivalencia la he perdido y ya no tiene mucho sentido.

%

Esta medida se utiliza sobre todo para crear layout flexibles, es decir, para los contenedores principales y hacer que nuestra página sea responsive. Ya no hacemos columnas en píxeles, ya las hacemos en porcentajes de tal manera que se adapte a cualquier dispositivo.

Las medidas expresadas en porcentajes tienen algunas peculiaridades:

1. Cuando indicamos en % margin o padding verticales siempre hay que tener como referencia el ancho del contenedor y no el alto como se suele pensar.
2. La altura de una caja especificada en porcentaje no funciona a menos que tengamos en cuenta las siguientes reglas:
• Debemos especificar la altura del padre con un valor fijo.
• Si especificamos la altura del padre también en porcentajes, también debe especificarse en % en todos sus ‘ancentros’.
.

Ejemplo:

html{ 
     height:100%;
}
body{ 
     height:100%;
}
div{ 
     height: 100%; 
     min-height: 250px; 
     max-height: 350px; 
}

Ejemplo

De momento partimos de la misma base y todos son iguales. Ahora vamos a hacer diferentes modificaciones en los 3 y vamos a ver la diferencia:

1. Cambiamos el font-size en el elemento html (root), por ejemplo a 20px

• px - no ocurre nada
• rem - todas las medidas expresadas en rem (altos, anchos, tamaños de fuentes,...) son relativas a este nuevo valor. Por ejemplo, el font-size del párrafo que mide 1 rem = 20px
• em - todas las medidas expresadas en em (altos, anchos, tamaños de fuentes,...) son relativas a este nuevo valor. Por ejemplo, el font-size del párrafo que mide 1 em = 20px

* Tener en cuenta que esto es un ejemplo, como se ha comentado antes, no debemos establecer por css y menos en unidades absolutas, el font-size en el elemento html. Sólo es para simular lo que ocurre cuando cambiamos la configuración del navegador.

2. Cambiamos el font-size en el elemento body con una unidad absoluta, por ejemplo a 30px

• px - no ocurre nada
• rem - no ocurre nada. Su valor de referencia siempre es el html que sigue siendo 20px.
• em - todas las medidas expresadas en em (altos, anchos, tamaños de fuentes,...) son relativas al último valor expresado en valores absolutos. Ahora nuestro párrafo mide 1em = 30px

* Igual que antes, indicar que esto es sólo un ejemplo, no debemos utilizar medidas absolutas en el body, evitaríamos que el usuario pudiera modificar a través de las opciones del navegador el tamaño de la fuente.

3. Cambiamos el font-size en el elemento body con una unidad relativa, por ejemplo a 2em

• px - no ocurre nada
• rem - no ocurre nada. Su valor de referencia siempre es el html que sigue siendo 20px.
• em - todas las medidas expresadas en em (altos, anchos, tamaños de fuentes,...) son relativas a este nuevo valor que a su vez tiene como referencia el del html. Por tanto ahora nuestro párrafo mide 1em = 20px * 2 = 40px

4. Cambiamos el font-size del botón, por ejemplo a 3em en el ejemplo de em y a 3rem en el ejemplo de rem

• px - no ocurre nada
• rem - Seguimos teniendo como referencia el font-size del html por lo que el font-size del botón será 60px (20px * 3rem = 60px). Vemos que el botón no ha credido al crecer el tamaño del texto ya que el padding y el line-height están expresados en rem y su valor no ha cambiado. Para ajustar el botón tendríamos que cambiar su valor.
  
• em - todas las medidas expresadas en em en este botón son relativas a este nuevo valor que a su vez tiene como referencia el valor del body que a su vez tiene como referencia el valor del html. El font-size de nuestro botón ahora mide 120px (3em * 2em * 20px). La diferencia con el anterior es que el botón ha crecido también, ya que el padding y el line-height son relativos al font-size del elemento botón, por tanto, si éste font-size aumenta las demás propiedades expresadas en em también.
  

Otras unidades

Han aparecido unas nuevas unidades de medida que, aunque todavía algunos navegadores y versiones no las dan soporte, cabe mencionarlas porque son totalmente "revolucionarias".

Se trata de unidades relativas al viewport (ventana).

• vw: representa un porcentaje relativo a la anchura del viewport.
• vh: representa un porcentaje relativo a la altura del viewport.
• vmin: representa un porcentraje entre vw y vh toma el que tenga menor valor.
• vmax: representa un porcentraje entre vw y vh toma el que tenga mayor valor.

Conclusiones

• Una de las principales conclusiones que sacamos en que para hacer layouts flexibles no debemos utilizar medidas absolutas.
• Podríamos usar píxeles cuando se trata de cosas muy concretas y pequeñas, por ejemplo para indicar bordes.
• Si queremos que las dimensiones de un elemento se modifiquen proporcionalmente cuando cambia el font-size del mismo utilizamos em.
• Si queremos que las dimensiones de un elemento sean fijas a menos que se cambie el font-size del html utilizaremos rem.
• No utilizar medidas absolutas ni en el body ni en el html. Estamos impidiendo al usuario que cambie el tamaño de fuente mediante el navegador.
• El % es muy útil para crear layouts flexibles y siempre son relativos al alto o ancho de su contenedor.