CSS Font Sizing: Píxeles vs Em vs Rem vs Porcentaje vs Unidades Viewport

Se ha debatido mucho sobre los píxeles vs em vs porcentaje vs rem y qué propiedad de la fuente usar y cuándo. A pesar de todos los más de 100 artículos en línea, este tema puede ser muy confuso dado que el uso de estas propiedades de la fuente difiere en función de las necesidades de nuestros proyectos. Por ejemplo, algunas personas sugieren no utilizar valores de píxeles fijos en el nivel base (elementos html y body) ya que el usuario no tendrá la oportunidad de reajustar el tamaño de la fuente a sus especificaciones. Pero, para gente como yo que depende de bootstrap, esto no es aconsejable. Acabamos teniendo un valor base fijo en píxeles y tenemos que crear las propiedades de la fuente de todo nuestro proyecto en relación con los valores de píxeles base.

Este artículo explica la diferencia entre estas propiedades de la fuente y la mejor manera de utilizarlas. Por supuesto, no hay una manera correcta de hacer esto y una gran parte de lo que el tamaño de la fuente a utilizar y cómo será en gran medida determinista basado en nuestra comprensión de estas unidades de tamaño de la fuente y el proyecto en cuestión.

Píxeles: Antes de la llegada del diseño responsivo, el píxel era ampliamente utilizado como EL tamaño de la fuente para todo, desde la tipografía hasta el ancho, el relleno y la altura. Sin embargo, los píxeles son unidades de tamaño fijo y no cambian en función del tamaño de la ventana gráfica ni son escalables. Si quieres construir un sitio web responsivo utilizando píxeles, puede ser muy difícil hacer un seguimiento de todos los valores basados en píxeles a través de la hoja de estilo CSS, incluyendo los valores dentro de las consultas de medios. Entonces, ¿qué propiedad de fuente podemos usar que nos permita hacer cambios mínimos en nuestra hoja de estilos CSS pero que siga siendo escalable? Ahí es donde entran en juego las unidades em, rem, percent y viewport.

Em:Em es una unidad flexible y escalable que el navegador convierte en valores de píxeles. Si el tamaño de la fuente por defecto en chrome es de 16 px, 1 em = 16 píxeles. Un gran error sobre em es que es relativo al tamaño de la fuente del elemento padre. Según la especificación W3, em es relativa al tamaño de la fuente del elemento en el que se utilizan. Este artículo ha hecho un magnífico trabajo explicando el concepto de em de forma clara y detallada. Si realmente quieres aprender cómo funciona em, no te saltes el artículo mencionado. Los em se utilizan comúnmente para la tipografía como los encabezados, los textos , los párrafos y los elementos asociados a la tipografía como los márgenes, el relleno, etc. Si estableces el tamaño de la fuente de tus elementos html y body en píxeles y las propiedades de tus elementos tipográficos se definen usando ems, para el diseño responsivo todo lo que necesitas hacer es cambiar el tamaño de la fuente por defecto en el nivel base como

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

y todos los valores em se recalcularán automáticamente al nivel base.

¡Sin embargo, los ems tienen una advertencia importante, la Herencia! Por ejemplo, un <div> con un font-size de 16px que contiene un <p> con un font-size de 2em se traduce en 32 px para el elemento <p>. Ahora añade un <div> dentro del <p> con un tamaño de fuente de 0,5em también, el resultado del div será 16px, la mitad de 32 px, no 8px. Aquí es donde entran en juego los rems.

Rem: Rem es relativo al tamaño de la fuente del elemento raíz (elemento html). Si el tamaño de la fuente del elemento html es 16 px, entonces 1rem = 16 px. Rem será SIEMPRE relativo al elemento raíz, independientemente de lo anidados que estén los elementos. Sin embargo, usar sólo rems y no ems puede tener su propia cuota de problemas ya que la tipografía puede ser demasiado grande o demasiado pequeña y esto puede llevar a problemas de escalado. Este artículo explica una gran manera de resolver este problema.

Porcentajes: El valor de los porcentajes es siempre relativo a otro valor, ya sea el valor del padre del elemento o de otra propiedad del propio elemento. Los porcentajes se utilizan mucho en el diseño responsivo. Un gran ejemplo sería el framework Bootstrap de Twitter. El diseño de 12 columnas de Bootstrap tiene sus anchos establecidos en porcentajes, por lo que siempre son fluidos y de tamaño relativo a su elemento padre
Los porcentajes se utilizan comúnmente para la anchura y la altura de los contenedores, divs y para el dimensionamiento de las imágenes de respuesta.

Unidades de la ventana gráfica: Las propiedades de anchura y altura de la ventana gráfica son relativas a la anchura/altura del tamaño de la ventana gráfica actual.

1vw = 1% de la anchura de la ventana gráfica
1vh = 1% de la altura de la ventana gráfica

La ventana gráfica significa aquí el tamaño de la ventana del navegador. Si quieres dimensionar tu elemento basándote en la anchura de la ventana gráfica y no en el elemento padre/raíz, entonces las unidades de la ventana gráfica es la unidad de tamaño de la fuente que necesitas usar. Las unidades vw/vh funcionan muy bien con la tipografía y se usan comúnmente para lo mismo.
Aquí hay un gran artículo que explica cómo usar esta propiedad.

Veredicto final: Como uso bootstrap con frecuencia, mi tamaño base por defecto es en píxeles. Uso porcentajes para establecer el ancho y alto de las imágenes, contenedores y divs, ems y rems para la tipografía y elementos relacionados con la tipografía como el margen, el padding, etc. Actualmente estoy jugando con las unidades de viewport para la tipografía responsive y me parece impresionante. Experimenta mucho con estas propiedades de la tipografía y pronto caerás en un estilo hecho a tu medida.