Unidades CSS para tamaño de fuente: px, em y rem

En este tutorial, aprenderemos diferentes unidades para medir el tamaño de fuente en CSS, es decir, px, emy remsus diferencias y cuál usar cuando.

Índice
  1. Tamaño de fuente predeterminado
  2. PX
  3. EM
  4. movimiento rápido del ojo
  5. Pensamientos finales

Tamaño de fuente predeterminado

Primero comprendamos el tamaño de fuente del navegador, que es un concepto clave en la diferencia entre px, emy rem.

La mayoría de los navegadores ofrecen la posibilidad de cambiar el tamaño de fuente desde la configuración. El tamaño de fuente predeterminado es 16px, que el usuario siempre puede cambiar según sus preferencias, como se muestra a continuación:

Configuración del tamaño de fuente en el navegador Chrome

Configuración del tamaño de fuente en el navegador Chrome

Puede anular la configuración de tamaño de fuente predeterminada del navegador usando CSS de esta manera:

html {
	font-size: 32px;
}

Donde

html {
  font-size: 200%;
}

Aunque no se recomienda anular el comportamiento predeterminado del navegador, de lo contrario no respetará las preferencias del usuario, lo que no es una buena idea.

PX

el píxel px es una unidad absoluta de tamaño fijo en CSS.

Los píxeles son fácilmente traducibles. Por ejemplo, usando el CSS a continuación, el tamaño de fuente de p El elemento (párrafo) siempre permanecerá 12px en todos los dispositivos y pantallas, independientemente de los cambios en la configuración del tamaño de fuente del navegador o el tamaño de fuente de cualquiera de sus elementos principales.

Aunque el tamaño de un píxel no siempre es el mismo en todos los dispositivos y pantallas, esto significa que el ancho real del bloque que tiene width: 120px en portátil no es lo mismo que en iPad.

¿Qué tiene de malo px?

El problema ocurre cuando el usuario cambia el tamaño de fuente predeterminado del navegador e indica que quiere ver un tamaño de fuente más grande. En este caso p (párrafo) con el CSS anterior siempre se mostrará como font-size: 12px ya que es un valor absoluto. No se refleja la preferencia del usuario, lo que no se considera una buena experiencia de usuario.

¿Cuándo usar px?

píxel px sigue siendo una buena opción para medidas de diseño fijo y espaciado fijo (relleno, margen, etc.), pero no es una buena opción para diseños flexibles y medidas de tamaño de fuente.

¿Alternativa de px?

los em y rem son las unidades relativas (o flexibles) en contraposición a px, que es una unidad absoluta (o fija). Los dos em y rem son traducidos por el navegador a valores de píxeles (px), según la configuración de tamaño de fuente predeterminada del navegador. Digamos, si el tamaño de fuente predeterminado del navegador es 16pxluego

1em = 16px;
1rem = 16px;

EM

los em la unidad es relativa a su elemento padre directo o más cercano.

Si el tamaño de fuente no se establece explícitamente, este elemento lo heredará del elemento principal. La herencia continúa así entre los antepasados ​​hasta el elemento raíz. El navegador proporciona el tamaño de fuente del elemento raíz predeterminado.

¿Cuándo usarlos?

1. Estructura anidada

Podemos usar el em donde desea aplicar el tamaño de fuente en relación con el elemento principal, como la estructura del menú.

<style>
.menu-container {
  font-size: 100px;
  border: 1px solid black;
}
.menu-item {
  font-size: 0.5em;
  padding-left: 20px;
}
.menu-item::before {
  content: '▾'
}
</style>

<div id="container" class="menu-container">
  <div id="menu" class="menu-item">
    Menu
    <div id="submenu" class="menu-item">
      Submenu
      <div id="subsubmenu" class="menu-item">
        Subsubmenu
      </div>
      <div id="another_subsubmenu">
        Another Subsubmenu
      </div>
    </div>
  </div>
</div>

Vemos que el tamaño de la fuente disminuye a medida que avanzamos por los niveles anidados de la estructura del menú, aunque hemos aplicado la misma clase CSS .menu-item a todos los elementos de menú anidados. Veamos cómo el navegador calcula el píxel (px) de rem valores relativos.

  1. los #menu Objeto font-size: 0.5em es relativo a la #container por lo que el tamaño de fuente en píxeles sería 100x0.5 = 50px
  2. los #submenu Objeto font-size: 0.5em es relativo a la #menu por lo que el tamaño de fuente en píxeles sería 50x0.5 = 25px
  3. los #subsubmenu Objeto font-size: 0.5em es relativo a la #submenu por lo que el tamaño de fuente en píxeles sería 25x0.5 = 12.5px
  4. los #another_subsubmenu Objeto class y font-size no está definido, por lo que el tamaño de fuente en píxeles sería el mismo que su padre #submenu es decir 25px

2. Consultas de medios

los em debe usarse para establecer el ancho de la pantalla en las consultas de medios. Aquí hay un artículo interesante que explica por qué em debe usarse para consultas de medios.

¿Que hay de malo con ellos?

El principal problema con em es que debe hacer todos los cálculos matemáticos del tamaño de fuente de los elementos secundarios como lo hicimos nosotros. Además, si desea aplicar un tamaño de fuente específico al elemento secundario, no puede hacerlo usando em.

¿Sustituto de ellos?

los rem es la solución a nuestro problema. Es una unidad relativa y no depende de elementos padres. Veámoslo.

movimiento rápido del ojo

los rem la unidad es relativa al elemento html (raíz).

Si el tamaño de fuente del elemento html raíz es de 16 píxeles, es decir,

:root {
   font-size: 16px;
}

luego

1rem = 16px

para todos los elementos.

Si el tamaño de fuente no se establece explícitamente en el elemento raíz, 1rem será igual al tamaño de fuente predeterminado proporcionado por el navegador (generalmente 16px).

¿Cuándo usar rem?

Se recomienda utilizar rem para espaciado (margen, relleno, etc.) y tamaño de fuente en CSS porque respeta las preferencias del usuario y proporciona una mejor experiencia de usuario.

px a rem cuando la raíz es 16px

puede usar la siguiente tabla para convertir de px para rem cuando el tamaño de fuente raíz es 16px:

píxel movimiento rápido del ojo
10 píxeles 0.625 rem
11 píxeles 0.6875 rem
12px 0,75 rem
13 píxeles 0.8125 rem
14px 0.875 rem
15px 0.9375 rem
16px 1 rem
17px 1.0625 rem
18px 1.125 rem
19px 1.1875 rem
20px 1,25 rem
21px 1.3125 rem
22px 1.375 rem
23px 1.4375 rem
24px 1,5 rem
25px 1.5625 rem
26px 1.625 rem
27px 1.6875 rem
28px 1,75 rem
29px 1.8125 rem
30px 1.875 rem
31px 1.9375 rem
32px 2 rem
33px 2.0625 rem
34px 2.125 rem
35px 2.1875 rem
36 píxeles 2,25 rem
37 píxeles 2.3125 rem
38px 2.375 rem
39px 2.4375 rem
40px 2,5 rem
41px 2.5625 rem
42px 2.625 rem
43px 2.6875 rem
44px 2,75 rem
45px 2.8125 rem
46px 2.875 rem
47 píxeles 2.9375 rem
48px 3 rem
49px 3.0625 rem
50px 3.125 rem
51px 3.1875 rem
52px 3,25 rem
53px 3.3125 rem
54px 3.375 rem
55px 3.4375 rem
56px 3,5 rem
57px 3.5625 rem
58px 3.625 rem
59px 3.6875 rem
60px 3,75 rem
61 píxeles 3.8125 rem
62 píxeles 3.875 rem
63px 3.9375 rem
64px 4 rem

También puedes calcular rem usando Pixel to Rem Converter

Pensamientos finales

La mejor práctica para los desarrolladores web es:

  • Usar px para diseño de tamaño fijo (ancho, alto, etc.) o paso fijo (margen, relleno, etc.)
  • Usar em para elementos anidados (árbol, menú, etc.) y consultas de medios
  • Usar rem para un diseño, espaciado y tamaño de fuente flexibles

Si quieres conocer otros artículos parecidos a Unidades CSS para tamaño de fuente: px, em y rem puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas