Comprensión de profundidad del tamaño de fuente (PX vs EM vs REM)

Comprensión del tamaño de fuente

El tamaño de fuente juega un papel muy importante en la web. El tamaño de fuente es una de las propiedades de CSS. El tamaño de fuente o el tamaño de texto definen el tamaño de los caracteres que se muestran en una página web. una fuente generalmente se mide en puntos (pt) y comúnmente se define en píxeles (px).

Por defecto, el tamaño de fuente base (tamaño de fuente del cuerpo) de cualquier página web es 16px, hasta que definamos cualquier tamaño de fuente personalizado.
La propiedad de tamaño de fuente se especifica de una de las siguientes maneras:

1. Tamaño absoluto o tamaño relativo
2. Como longitud o porcentaje (en relación con el tamaño de fuente del elemento principal)

Sintaxis Básica

Sintaxis básica de fuente

Tamaño absoluto
xx-small, x-small, small, xx-large, x-large, large
El tamaño de fuente con palabras clave de tamaño absoluto será mayor o menor en relación con el tamaño de fuente del elemento principal.

Tamano relativo
más pequeño, más grande

Longitud-tamaño
El tamaño de fuente definido en longitud siempre será un valor positivo, se utilizarán unidades relativas a la fuente como em y px

Porcentaje de tamaño
El tamaño de fuente con porcentaje siempre será un valor positivo y relativo al tamaño de fuente del elemento padre

Definir tamaño de fuente en el cuerpo

Definir el tamaño de fuente en el cuerpo es el mejor enfoque para desarrollar cualquier página web. Al establecer un tamaño de fuente de palabra clave en el elemento del cuerpo, puede establecer el tamaño de fuente relativo en cualquier otro lugar de la página, lo que le permite escalar fácilmente la fuente hacia arriba o hacia abajo en toda la página en consecuencia.

Tamaño de fuente en píxeles (Px)

Definir el tamaño de fuente en Pixel no es una buena práctica. esto solo será bueno si está administrando el diseño perfecto de píxeles.
 El píxel (px) es un valor estático, px es un navegador independiente del sistema operativo y que le dice a los navegadores que representen las letras exactamente a la cantidad de píxeles de altura que especificó. Los resultados pueden variar ligeramente entre navegadores, ya que cada navegador utiliza diferentes algoritmos y enfoques para lograr un efecto similar.
 Cuando define el tamaño de fuente en píxeles (px), es posible que deba escribir algunos css adicionales para administrar la página de manera receptiva. y tienes que escribir el CSS en cada punto de quiebre.

Tamaño de fuente en EM

Otra forma de definir el tamaño de fuente es con valores em. El tamaño de un valor em es dinámico. cuando definimos el tamaño de fuente en em, depende del tamaño del elemento padre.
 Si no hemos establecido el tamaño de fuente para el padre, por defecto tomará el tamaño de fuente del navegador, es decir, 16px.
 Lo más importante que debes saber con em es que siempre depende del tamaño de fuente de su padre. así que si está definiendo la fuente en el elemento anidado, debe tener esto en cuenta para establecer el tamaño de la fuente.

Conversión de píxeles a em

Tamaño de fuente en REM

Los valores rem de tamaño de fuente se inventaron para superar el problema de em con elementos anidados.
 Los valores rem de tamaño de fuente son relativos al elemento raíz html, no al elemento padre, el resto es todo lo mismo que em.
 A continuación se muestra la diferencia entre rem y em si hay elementos anidados.

Diferencia entre elementos anidados con EM y REM

Elemento anidado con EMElemento anidado con REM

Ref: https://developer.mozilla.org/en-US/docs/Web