[vc_row][vc_column][vc_column_text]
Una práctica cada vez más extendida en la definición de tamaños de fuentes en una web son las unidades relativas rem y em. Dichas unidades nos dan flexibilidad en nuestros diseños y la capacidad de escalar elementos en vez de trabajar con tamaños fijos. Además, al basarse en herencias, nos permiten adaptar su tamaño respecto a distintos elementos de la web.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=»¿Cuál es la diferencia entre ellas?» font_container=»tag:h4|text_align:left|color:%23dd1818″ google_fonts=»font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal»][vc_row_inner][vc_column_inner width=»2/3″][vc_column_text]
La diferencia entre ambas es la manera en la que el navegador interpreta cada una de ellas, lo que determina el valor en píxeles en las que las convierte.
Las unidades rem dependen directamente del elemento raíz de la página, o sea del tamaño de fuente del elemento <html>. Dicho tamaño se multiplica por el número que se está usando en la unidad rem.
[/vc_column_text][/vc_column_inner][vc_column_inner width=»1/3″][vc_single_image image=»16456″ img_size=»large»][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space][vc_column_text]
Por ejemplo, si la etiqueta html tiene un tamaño de fuente 16px (tamaño por defecto), 10rem equivaldrían a 10*16px=160px. Así que, si se utiliza 1rem siempre será equivalente al tamaño definido en la etiqueta.
[/vc_column_text][vc_column_text]
html { font-size: 100% } /* Esto significa 16px por defecto */
h1 {
font-size: 32px;
padding: 10em; /* 10 * 16px = 160px */
}
[/vc_column_text][vc_column_text]
Como nota, comentar que la etiqueta <html> obtiene el tamaño de fuente definido en la configuración del navegador, que suele ser por defecto de 16px. Es una mala praxis definir el tamaño de fuente de la etiqueta <html> en píxeles, puesto que anula dicha configuración. Por eso es recomendable establecer un tamaño de fuente de 100% o usando porcentajes.
Volviendo a las unidades, las em dependen del tamaño de fuente del selector o elemento al que se le aplica el atributo o, en el caso de que no se haya definido, el del elemento padre.
[/vc_column_text][vc_column_text]
html { font-size: 100% }
h1 {
font-size: 32px;
padding: 2em; /* 2 * 32px = 64px */
}
[/vc_column_text][vc_column_text]
Un error muy común es que se piensa que las unidades em son directamente relativas al elemento padre, solo se da el caso cuando no se ha definido el tamaño de fuente en el elemento en el son usadas. Evidentemente, también puede darse el caso de que el elemento pueda heredar el tamaño de fuente de su capa padre, que heredó dicho tamaño de otra etiqueta padre, y así sucesivamente hasta llegar a la raíz o una capa con unidades en px o vw. Por eso, el uso de estas unidades puede ponerse complicado si no se controla el flujo de herencias.
Ambas unidades se utilizan comúnmente en la propiedad font-size de css pero también se suelen usar en margin, padding o line-height.
h1 {
font-size: 2em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 32px */
}
p {
font-size: 1em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 16px */
}
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=»50px»][/vc_column][/vc_row][vc_row][vc_column width=»1/3″][vc_empty_space][vc_single_image image=»16442″ img_size=»large»][/vc_column][vc_column width=»2/3″][vc_custom_heading text=»¿Cuándo usar cada una?» font_container=»tag:h4|text_align:left|color:%23dd1818″ google_fonts=»font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal»][vc_column_text]
Es un tema de discusión ya que hay distintas opiniones sobre cómo utilizar estas unidades de medida.
Claramente las unidades rem son más sencillas de aplicar porque se basan en el tamaño de fuente predeterminado por el navegador, sin importar la herencia de otro elemento, pero hacen menos modulares los diseños aunque aporten simplicidad.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
En cambio las unidades em, aunque aportan flexibilidad a la maquetación, pueden hacer que tu código adquiera cierta complejidad. Esto no es malo, pero deben manejarse con cuidado. Puede ser una herramienta útil para algunos casos pero, al final, depende de cuál sea la vía que le resulte más cómoda al diseñador para hacer adaptables ciertos elementos de la web. Veamos la diferencia entre amabas unidades con un ejemplo.
[/vc_column_text][vc_column_text]
Declaramos una cabecera en HTML:
[/vc_column_text][vc_column_text]
<div class="header header-big">A Header Element</div>[/vc_column_text][vc_column_text]
Así serían las dimensiones de sus elementos usando sólo unidades rem:
[/vc_column_text][vc_column_text]
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;/* En píxeles sería padding: 8px 12px */
background: #7F7CFF;
}
.header-big {
font-size: 2rem;
padding: 1rem 1.5rem;/* En píxeles sería padding: 16px 24px */
}
[/vc_column_text][vc_column_text]
Así serían las dimensiones de sus elementos usando sólo unidades em:
[/vc_column_text][vc_column_text]
.header {
font-size: 1em;
padding: 0.5em 0.75em;/* Padding: 8px 12px */
/* Otros estilos */
}
.header-big {
font-size: 2em;
padding-left: 0.375em;/* padding-left: 12px ((2 * 16px)) * 0.375 = 12px) */
padding-right: 0.375em;/* padding-right: 12px ((2 * 16px)) * 0.375 = 12px) */
margin: 0.75em 0;/* margin: 24px ((2em * 16px)) * 0.75em = 24px) */
}
[/vc_column_text][vc_column_text]
Lo más óptimo sería encontrar el equilibrio combinando ambas, algo que simplifica bastante el código además de hacer escalables los elementos a los que se les aplican.
[/vc_column_text][vc_column_text]
.header {
font-size: 1em;/* font-size: 16px */
padding: 0.5em 0.75rem;/* padding: 8px 12px */
}
.header-big {
font-size: 2em;/* font-size: 24px */
/* Con este tamaño de fuente el margen interior sería padding: 16px 12px */
} [/vc_column_text][/vc_column][/vc_row]