Usando unidades relativas en font-size

Hola a todos, hoy quería escribir brevemente sobre cómo usar en css las unidades relativas para el tamaño de las fuentes por medio de la propiedad font-size. Concretamente sobre el uso de % y la unidad em, así como la menos conocida rem, que a mi particularmente me gusta mucho.

Si queréis acceder a toda la información sobre este tema, podéis hacerlo en el siguiente enlace:

http://www.w3.org/TR/css3-values/#absolute-lengths

La diferencia principal a la hora de usar em y % o rem, radica en lo siguiente. Tanto em como % dependen del valor utilizado en sus ancestros que tengan computada o establecida la propiedad. Es decir, se basa en sus antecesores para calcular su valor. Sin embargo, rem, siempre calcula su valor con respecto al tamaño de texto definido en la raíz.

Vamos a ver un ejemplo para entender el funcionamiento:

<div id="parent" style="font-size:0.9em;">
    <p id="child" style="font-size:0.9em;">
       Esta es la prueba
    </p>
</div>
<div id="parent">
    <p id="child" style="font-size:0.9em;">
       Esta es la prueba
    </p>
</div>

Y esto que vemos a continuación, es el comportamiento que tendría este código.

Esta es la prueba

Esta es la prueba

Se puede ver como en el primer div, el tamaño del texto en el interior de la etiqueta p es menor, ya que, el cálculo se realiza usando em y como decíamos se realiza teniendo en cuenta el tamaño definido para sus ancestros y en este caso, éste se ha establecido ya a 0.9em. Lo mismo ocurriría si hubiésemos utilizado %.

Vamos a ver ahora otro ejemplo usando la propiedad rem

<div id="parent" style="font-size:0.9rem;">
    <p id="child" style="font-size:0.9rem;">
       Esta es la prueba
    </p>
</div>
<div id="parent">
    <p id="child" style="font-size:0.9rem;">
       Esta es la prueba
    </p>
</div>

Y ahora vamos a ver el resultado de usar este ejemplo:

Esta es la prueba

Esta es la prueba

En este caso observamos como el tamaño siempre es el mismo. A diferencia del caso anterior, en que el tamaño variaba en función de definir un propiedad font-size en sus antecesores o no, ahora la referencia será siempre el tamaño de texto definido en la raíz.

Espero que os sea de utilidad a la hora de trabajar con la propiedad font-size. Yo normalmente utilizo rem, porque me resulta más cómodo y se ajusta más al funcionamiento que quiero conseguir, además de no tener que estar pendiente del tamaño definido en las etiquetas previas.

Otro enlace donde explican todo esto en profundidad y que me ha servido para entender mejor el concepto.

http://ksesocss.blogspot.com/2012/05/font-size-las-unidades-y-su-uso-o-no-em.html

Un saludo a todos