A maior das definições de estilização envolvem tamanho, e estes tamanhos podem ser definidos utilizando diferentes sistemas de medidas.
Aqui abordaremos algumas delas, bem como suas vantagens e desvantagens.
Entre as medidas absolutas estão cm, mm, in e pc.
Elas tentam representar um tamanho exato em tela, a depender da precisão do hardware.
Seu uso não é recomendado pela variação de tamanho de telas. Uma tela de computador pode possuir 60cm enquanto uma de celular 8cm. Um texto de 4cm pode ser bom para uma tela de computador, porém será péssimo para uma tela de celular.
O em é uma medida relativa ao tamanho da fonte.
Se o tamanho da fonte é de 1px, então 1 em possuirá o tamanho de 1px.
Como este tamanho é relativo ao tamanho da fonte definida em seu contexto, ele acaba por se tornar muito inconstante.
O px é uma medida extremamente variável, ela é definida para ser pequena e visível. Seu tamanho varia tanto pelas medidas da tela quanto pelo o quão próximo o dispositivo fica aos olhos do usuário.
Importante lembrar que um px não corresponde a um pixel na tela, porém imagens são mapeadas para px. Uma imagem com 400x400 pixels será exibida com 400px de altura e largura.
Como uma forma de correção para o em, foi criado o rem.
Diferentemente do em, esta medida depende da fonte definida na raiz o documento, definida por seletores como a tag html ou a pseudo classe root.
Isto faz com que a medida seja menos instável, e transforma a mudança de tamanhos em uma página extremamente simples.
Digamos que você utilizou 1px como tamanho de fonte raiz para sua página, e definiu o resto dos itens utilizando rem. Agora você deseja dobrar o tamanho de todas as fontes para uma determinada tela. Para isto basta você alterar a fonte raiz de 1px para 2px, logo todos os itens definidos em rem irão se ajustar.
Estas medidas lidam com o tamanho total da tela do usuário.