Unha medida indicada mediante unidades absolutas está completamente definida, xa que o seu valor non depende doutro valor de referencia. A continuación móstrase os valores absolutas que empregaremos durante o curso:

• pt, puntos. Un punto equivale a uns 0.35 milímetros. É habitual empregalo para o tamaño de letra
• px, pixel. As medidas indicadas en pixeles tamén se poden considerar como relativas, xa que o aspecto dos elementos dependerá da resolución do dispositivo no que se visualiza a páxina HTML. Se un elemento ten unha anchura de 400px, ocupará a metade dunha pantalla cunha resolución de 800x600, pero ocupará menos da terceira parte nunha pantalla con resolución de 1440x900.

A continuación móstranse exemplos de utilización de unidades absolutas:

/*Tamaño de letra dos paragrafos de 10pt: */

p {
  font-size: 10pt;
}

/*Tamaño de letra dos títulos de nivel 1 de 18 pixeles: */
h1 {
  font-size: 18px;
}

A principal vantaxe das unidades absolutas é que o seu valor é directamente o que se debe utilizar, sen necesidade de realizar cálculos intermedios. A súa principal desvantaxe é que son moi pouco flexibles e non se adaptan doadamente aos diferentes medios.

A unidades relativas, a diferenza das absolutas, non están completamente definidas, xa que o seu valor sempre está referenciado respecto a outro valor. A pesar da súa aparente dificultade, son as máis utilizadas no deseño web pola flexibilidade coa que se adaptan aos diferentes medios.

Como expliquei no anterior punto, o px, (pixel) pódese considerar como unha medida relativa respecto da resolución da pantalla do dispositivo no que se visualiza a páxina HTML, aínda que nos a consideraremos absoluta.

Tamén podemos indicar unha medida relativa empregando porcentaxes.

Pero, a única medida relativa que vamos a empregar durante o curso é o rem, relativa respecto do tamaño de letra do elemento

rem

Normalemente se emprega o valor rem para indicar os tamaños de tipos de letra. 1rem equivale o tamaño establecido do tipo de letra no html, así, neste exemplo 1rem equivale a 16px (2rem a 32px e así sucesivamente):

html {
  font-size: 16px;
}

/* Como o tamaño de letra no html é 16px, 1 rem equivale a ese tamaño (16px) */
p {
  font-size: 1rem;
}

/* Como o tamaño de letra no html é 16px, 2rem equivale ao doble dese tamaño (32px) */
h1 {
  font-size: 2rem;
}

Neste outro caso, 1rem equivale equivale a 20px (2rem a 40px e así sucesivamente):

html {
  font-size: 20px;
}

/* Como o tamaño de letra no html é 20px, 1 rem equivale a ese tamaño (20px) */
p {
  font-size: 1rem;
}

/* Como o tamaño de letra no html é 20px, 2rem equivale ao doble dese tamaño (40px) */
h1 {
  font-size: 2rem;
}

Porque é interesante esta medida?

Se empregamos rem sempre que modifiquemos un tamaño de letra (agás na etiqueta html que temos que empregar px ou pt), modificando o tamaño de letra na etiqueta html se modifica automáticamente no resto do html, xa que estos tamaños dependerán do tamaño do tipo de letra que teñamos na etiqueta html.

En xeral, recoméndase o uso de unidades relativas sempre que sexa posible, xa que mellora a accesibilidade da páxina e permite que os documentos se adapten doadamente a calquera medio e dispositivo.

O documento Recomendacións sobre técnicas CSS para a mellora da accesibilidade dos contidos HTML, elaborado polo organismo W3C, recomenda o uso da unidade em para indicar o tamaño do texto e para todas as medidas que sexan posibles.

Normalmente utilízanse pixel e porcentaxes para definir o layout do documento (basicamente, a anchura das columnas e dos elementos das páxinas) e em e porcentaxes para o tamaño de letra dos textos.