Cómo saber el valor final resultante de font-size de un elemento con herencias y unidades relativas "em"

diseno.jpg
Solucionex
07
Feb 15

Muchas veces nos encontramos con elementos dentro del DOM que tienen un tamaño de fuente diferente al tamaño base de la página y al ver los estilos que tiene aplicado dicho elemento vemos que tiene un font-size con un valor en unidades em, por lo que tendríamos que ponernos a calcular en función de las herencias según los elementos padres que tenga, ya que las unidades em son unidades relativas que se calculan respecto al valor computado del padre, y si nos encontramos con unos cuantos niveles sería bastante lento ponernos a calcular.

Para comprobar de una forma rápida el valor final resultante de font-size del elemento en cuestión y evitarnos tener que hacer cálculos, tenemos una herramienta para desarrolladores web o inspectores web en cada navegador (en unos es mejor que en otros, pero eso ya cada cuál que use el que más le guste) que todos los maquetadores y desarrolladores conocemos y utilizamos cada día, pero que muchos no aprovechamos al máximo.

Nosotros nos decantamos por usar el Chrome Web Inspector:

MAC -> Comandos Mac, los más usados, explicado para principiantes cmd + X alt + I
WIN/LINUX -> Ctrl + Shift + I

 En este ejemplo podemos ver como tenemos una etiqueta <p> dentro de un <h2> dentro de un <article> dentro de un <section> dentro del <body>. Si cada elemento o algunos de ellos tuviera un font-size asignado y expresado en unidades "em" al revisar la css del elemento <p> que nos interesa solo veríamos que tiene un font-size de 0.75em, pero no podemos saber el valor final resultante ya que hereda del padre, y éste, a su vez, hereda de otro padre y así sucesivamente, por lo que tendríamos que ir calculando.

Pero si nos fijamos en la parte de estilos computados podremos ver directamente el valor resultante final del font-size del elemento <p>, en este caso es de 40.5px, e incluso podremos ver toda la herencia pinchando en la flecha junto al estilo que se desplegará y veremos cómo se ha llegado a dicho resultado.

 

Al igual que con el font-size, lo podemos usar para ver los valores resultantes de otros estilos como width, height, line-height,  ...

Esperemos que os sirva de ayuda y os ahorre tiempo en cálculos y pruebas.