soy Kseso y esto EsCSS

Font-size: Unidades y su uso o no. Em vs Rem vs %. Destierra Px y Pt

Font-size: Unidades y su uso o no. Em vs Rem vs %. Destierra Px y Pt

·Por Kseso ✎ 26

El tamaño, tanto del texto como de otros elementos de las páginas, admite ser declarado en una gran variedad de unidades. Cada una de ellas con sus particularidades y razón de ser. Pero no todas se deberían utilizar en todos los casos.
Para entender mejor cuándo utilizar unas u otras, y cuales no usar, veamos que es cada una de ellas

Unidades absolutas

Se llaman absolutas porque su valor es el declarado. No hay cálculo del mismo. Es el que es y de ahí no se mueve

Pixel

Px: Los píxeles son unidades de tamaño fijo que se utilizan en los media="screen". Un pixel es igual a un punto en la pantalla del ordenador (la división más pequeña de la resolución de su pantalla) y por lo tanto es indivisible.

Su problema es que no es escalable, atentado contra la accesibilidad. Era una cuestión que muchos obviaban porque les permitía un control "al milímetro" de sus realizaciones.

Pero hoy a esa falla en la accesibilidad por algunos colectivos se suma el comportamiento en dispositivos de pequeñas dimensiones y grandes resoluciones.

Ni permite escalar a más los textos a los usuarios con problemas visuales ni a menos en dispositivos como los i-algo o smartphones.

Puntos

Pt: Malo el px, peor el pt.

El punto es una herencia de los medios impresos. Un punto es igual a 1/72 de pulgada (según diversas fuentes), apróx. 0´04mm.

Al ser también una medida absoluta tiene todos los problemas de los px aumentados. Olvídala excepto para los media="print". Ahí es la reina.

Unidades relativas

El valor final resultante (computado) está en función de un valor previo.

Em

Em es una unidad escalable que se utiliza en los documentos web. 1 em es igual al tamaño de la fuente font-size del padre. Su referencia es el tamaño (altura) de la letra m minúscula de la familia de la tipografía font-family declarada en el elemento.

El valor primigenio debería ser el que tenga declarado el usuario del navegador en sus preferencias.

Y pese a ser una práctica muy extendida que el diseñador web pise dicho valor declarando un tamaño de fuente absoluto en el html o body del documento no deja de ser una mala práctica.

Porcentaje %

%: El funcionamiento del tanto por ciento es similar al del em. El valor computado es el del padre (o ancestro más próximo que lo tenga declarado o computado).

Al igual que em necesita de un ancestro sobre el que hacer los cálculos.

Funcionamiento de em y %

El valor de estas dos unidades es acumulativo. Esto es, a medida que profundiza el dom el valor resultante va cambiando.
Un ejemplo. Tengamos tres elementos anidados, un div, un p y un span, contenidos en el body. Vamos a suponer para el ejemplo que el valor de font-size computado o declarado para html sean 20px.
Si declaramos para el div su tamaño del texto en 1.2em (o 120%) el valor computado serán 24px (20px del padre multiplicado por 1´2).
Ahora en el párrafo su tamaño en 1.4em (140%) el resultante será 33´6px (el navegador redondeará).
Y en su span .8em (90%) son 26´8px.
Como ves, el valor de cada décima varía sensíblemente. Este comportamiento debido a la herencia suele confundir a quienes se inician en el uso de Css.

Rem

Rem: esta unidad es lo mismo que "em" pero, y esta es la gran y única diferencia, el cálculo siempre se realiza sobre el valor de la letra m del elemento raíz (root). El del padre o ancestros no se tienen en cuenta.
En el ejemplo anterior los valores serían para el div = 24px; para p = 28px; y en el span = 16px.

Adenda

El documento de trabajo de los editores de Css3 "CSS Values and Units Module Level 3" del 23 de Abril de 2012 (status: Editor's Draft) añade algunas unidades nuevas para poder dar tamaño a los textos en función de las medidas de su caja contenedora inicial o del tamaño de la ventana. Estas unidades nuevas son: vw ‖ vh ‖ vmin . Y sobre ellas ya publiqué este artículo recientemente.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso