Hoy día, con los diseños adaptables, los proyectos web se convierten en tareas más complejas de llevar a cabo que hace una década, debido entre otras cosas a que hemos pasado de usar unidades fijas a unidades escalables. Es por eso que actualmente se recomienda usar EM y REM como unidades de medida en CSS y así poder escalar nuestro diseño web de un modo más sencillo.
Para poder entender mejor estos conceptos y entender la diferencia entre ambos, vamos a retroceder un poco en el tiempo hasta su origen. Un EM es una unidad de longitud usada en tipografía para imprenta tradicional, que ha sido trasladada al mundo digital dentro de las hojas de estilo con el mismo propósito. Se llama EM porque originalmente esta medida hacía referencia al ancho del tipo de la letra M, es decir, a la pieza que contenía esta letra.
La característica de calcular el tamaño tomando como referencia otro elemento es algo que CSS hace suyo. Esto es importante tenerlo en cuenta ya que estos dos elementos no tienen una medida fija sino que son dependientes de otros que hayamos definido previamente durante la maquetación web.
Profundicemos en cada uno por separado para conocer las características particulares de cada uno. De este modo quedará más claro después cuál es la diferencia entre REM y EM a la hora de aplicarlas en un proyecto web.
REM
REM es una unidad de medida que se basa en el tamaño de fuente de la etiqueta <html> de nuestro diseño directamente. El tamaño de este elemento viene predeterminado por el navegador desde el que se está viendo el portal, que actualmente es de 16px, si bien esto es algo que podemos personalizar a nuestro criterio mediante CSS. De este modo, cuando trabajemos con REM estaremos definiendo escalas relativas a ese tamaño raíz del documento HTML.
EM
En cambio la unidad de medida EM toma como referencia el elemento en el que nos encontramos. Es decir, si nos encontramos en una capa cuyo tamaño de fuente hemos definido con un valor específico, al usar EM éste configurará su escala en base al tamaño de esa fuente. En caso de no tener ninguna definida, por herencia, tomará el valor del elemento padre en el que nos encontremos y así por jerarquía hasta la raíz del documento.
Diferencia entre REM y EM
Ahora sí, habiendo visto cada unidad, podemos resumir que la diferencia entre REM y EM se basa en el elemento que toma como referencia para dar las medidas; el primero usará el valor del elemento HTML, ya sea su valor por defecto como el que hayamos definido específicamente; el segundo adquiere los valores del elemento en el que estamos o del elemento padre por jerarquía.
Así pues, si el elemento del que vamos a tomar la referencia tiene un tamaño de fuente de 14px, entonces 10em o 10rem serán el equivalente a 140px, ya que la fórmula que se aplica para definir el tamaño es 14×10=140.
Si tienes interés en conocer más, puedes consultar puedes consultar el listado completo de unidades de medida en CSS.
Deja una respuesta