CSS - ¿por qué usar rem como unidad de medida de la font-size?

Css CSS rem em

El lenguaje css es, a la fecha, un requisito fundamental para quienes aspiran a convertirse en desarrollador front-end. Como bien sabemos a estas alturas (pero siempre es bueno repetirlo) junto con el lenguaje j avascript y el lenguaje html es necesario crear el front end de una aplicación web

Que es css

El lenguaje CSS es un lenguaje de estilo; CSS significa Cascading Style Sheets y este lenguaje se utiliza para definir con precisión la apariencia de un documento HTML o XML. El lenguaje se compone de una serie de reglas que nos permiten modificar las llamadas "hojas de estilo", que describen la presentación estética de la página web, incluyendo diseño, fuentes, imágenes, colores, etc.

Cuando se trata de fuentes y formato, es fácil caer en errores de tamaño genéricos para la escritura en nuestra página web. CSS proporciona unidades relativas (relative units) como solución al problema, para proporcionar un estilo único específico a una página web.

Algunos de estos, em y rem, reemplazan la unidad de medida genérica y universal px (píxel). Las unidades relativas son clave porque los tamaños de pantalla vienen en muchos tamaños y formas diferentes en estos días. Si usamos px, el tamaño del elemento permanece constante independientemente del tamaño de la pantalla. Por lo tanto, el uso de unidades relativas como em y rem se considera una good practice.

Por lo tanto, las unidades CSS se clasifican de dos maneras: unidades absolutas y relativas. %, em, rem, vh y vw son todas unidades relativas.

Hablando de em y rem, el primero se refiere al tamaño del elemento actual. Si no se establece el tamaño del elemento actual/principal, normalmente el valor predeterminado es el tamaño en el CSS del navegador. Alrededor de 16px.

El em no se trata solo del tamaño de fuente. Es una unidad relativa que puedes usar para establecer valores de propiedad como font-size, margin, padding, width, height y line-height de un elemento.

El rem es la raíz em. Puedes usar rem en cualquier lugar donde puedas usar em.

Entonces, ¿cuándo es rem una mejor opción que em?

Si, sin darte cuenta, vuelves a aplicar un tamaño de fuente de 0,5 em, el tamaño se reduce a 1/4 del original. Esto por las características básicas del lenguaje CSS.

Nota: esto solo sucede si usas unidades relativas. Aplicar una regla que incluya unidades absolutas no afectará el resultado final.

 1. <!DOCTYPE html>
 2. <html lang="it">
 3. <head>
 4.     <meta charset="UTF-8">
 5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7.     <title> Te muestro la diferencia entre em y rem!</title>
 8. </head>
 9. <body>
10.  
11. <h1> La diferencia entre em y rem en el tamaño de fuente de un elemento </h1>
12. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
13.
14. <a href="#">Haz clic aquí!</a>
15.  
16. </p>
17.  
18. </body>
19. </html>

20.

CSS:

1. @media all and (max-width:768px){
 2.  
 3. h1{
 4. font-size:0.50em;
 5. }
 6. p {
 7. font-size:0.50em;
 8. }
 9. a {
10. font-size:0.50em;
11. }
12. }

Este código CSS reducirá el mensaje "¡Haz clic aquí!" menos de ¼ del tamaño original. Prácticamente se vuelve ilegible, especialmente en la pantalla de un dispositivo móvil. Esto sucede porque la etiqueta a está anidada dentro de p en el código HTML. Los estilos, por tanto, se superponen y el tamaño de la fuente se reduce progresivamente.

 1. @media all and (max-width:768px){
 2. h1{
 3. font-size: 0.50em;
 4. }
 5. p { 
 6. font-size:0.50em;
 7. }
 8. a {
 9. font-size:0.50rem;
10. }
11. }

De esta manera, en cambio, utilizando rem el tamaño de "¡Haz clic aquí!" no se encogerá, ajustándose al tamaño de los demás elementos.

Esta es la razón por la cual, en ciertas situaciones, usar rem se vuelve más útil para configurar el tamaño de fuente de una página web.

Si quieres practicar el lenguaje CSS, puedes practicar con nuestros ejercicios de CSS y, si quieres aprender más sobre este estilo de lenguaje y las unidades de medida de las que hemos hablado, ¡no te pierdas nuestra guía de html y css en español!

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo