Unidades de medida en CSS

4. Unidades de medida

El tamaño de los elementos de una web se puede expresar en unidades absolutas y relativas.

4.1. Unidades absolutas

Las unidades absolutas mantienen su aspecto y se visualizan siempre igual independientemente de las características del dispositivo.

in	Pulgadas (1 pulgada = 2.54 cm)
cm	Centímetros
mm	Milímetros
pt	Puntos (1 pt = 1/72 pulgadas)
pc	Picas (1 pica = 12 puntos)

4.2. Unidades relativas

Las unidades relativas se ajustan a cada tipo de dispositivo ya que dependen de la resolución de cada pantalla.

px	Píxeles (relativo al dispositivo)
em	Relativo al tamaño de la fuente del elemento ( 2 em significa 2 veces el tamaño de la fuente actual)
%	Porcentaje (relativo al elemento padre)
vh y vw	Medidas relativas de acuerdo al viewport1 vh = 1% de la altura del viewport100 vh = altura del viewport

4.3. Usos de unidades

Normalmente es recomendable usar unidades relativas en la medida de lo posible, ya que mejora la accesibilidad de la página web y permite que los documentos se adapten fácilmente a cualquier medio. Por tanto, para la creación de una página web, el uso de medidas absolutas queda descartado.

Aunque no hay un criterio definido, el organismo W3C, recomienda el uso de la unidad em para indicar el tamaño del texto. El tamaño de los ems se establece en base al tamaño que tenga definido el navegador.

Usualmente el tamaño de una fuente por defecto en los navegadores es de 16px. Por tanto, tendríamos que  16px = 1em y podríamos definir la siguiente conversión entre unidades.

px	em	%
12	0,750	75
14	0,875	87,5
16	1,000	100
18	1,125	112,5
20	1,250	125

 Hay que tener en cuenta que el tamaño base definido en los navegadores puede ser modificado por los usuarios. Este tema lo trataremos en detalle en la unidad sobre accesibilidad web.

Ejercicios propuestos

• Si el tamaño de fuente por defecto en un navegador es de 12px. ¿Cuántos em son 16px? Puedes ver la conversión de píxel a ems en el conversor online de w3schools: w3schools.com/tags/ref_pxtoemconversion.asp

• Observa el resultado del siguiente código en un navegador y estudia las diferencias que hay entre los distintos tamaños definidos.

<p style="font-size: 16px;">Párrafo de 16px</p>
<p style="font-size: 12px;">Párrafo de 12px</p>
<p style="font-size: 1em;">Párrafo de 1em</p>
<p style="font-size: 1.5em;">Párrafo de 1.5em</p>
<p style="font-size: 0.5in;">Párrafo de 0.5 pulgadas</p>
<p style="font-size: 8mm;">Párrafo de 8 milímetros</p>
<p style="font-size: 12pt;">Párrafo de 12 puntos</p>

dark