El tamaño de los elementos de una web se puede expresar en unidades absolutas y relativas.
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) |
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 |
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.
<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