Quando se trata de definir tipos de tamanhos de textos em CSS há uma grande variedade de tipos. Você pode definir uma keyword, como por exemplo:

p{ font-size: small; } 

Ou então definir um valor numérico. Quando estamos usando valores numéricos, você precisa declarar qual a unidade métrica que o valor esta definido. Você pode usar %, px (pixels), em (significa quantas vezes é maior ou menor que a fonte padrão estipulada no CSS), pt (pontos por polegada). Qual o melhor para ser utilizado? Isto depende, é claro. Vamos dar uma olhada em cada um dos tipos:


Keyword


As opções válidas para definir o font-size com keyword são: xx-small, small, medium, large, x-large, e xx-large. A unidade keyword é muito consistente em todos os browsers e plataformas, como você pode conferir abaixo no teste feito com Opera, Firefox IE 6 e Safari.

Veja que embora elas sejam muito parecidas, há algumas diferenças onde tem quebra de linhas e parágrafos.

Apenas quando uma das palavras-chave é utilizada em cascata que o font-size do pai afeta o filho. Por exemplo, digamos que a tag pai foi definida com font-size: medium, certo, e a filha foi definida como large. Desta forma a filha ficará normal como large. Agora se a filha for definida como larger, então ela ficará um tamanho maior que a medium. O contrario funciona também usando smaller. Desta forma você pode definir um valor abaixo e acima conforme for o tamanho da tag pai. Neste caso é bom utilizar para definir hierarquias, cada tag que vai se aprofundando você define font-size:smaller e não precisará saber o tamanho e nem se importar com quantos níveis você vai ter.


Pixel (PX)


Se você é exigente e precisa de controle refinado de tamanho de fontes, o PX (pixel) é a melhor forma de fazer isto (também é a que mais uso). Ela trabalha de forma excelente, você define 14px de tamanho, ela vai ter 14px de altura, conforme você definiu. Com o dimensionamento fontes em pixels, você está literalmente dizendo navegadores para tornar as letras exatamente esse número de pixels de altura, veja o exemplo abaixo:

O bom disto é que funciona quase que identicamente em todos os browsers (ie6 apenas que tem uma diferença - mas quem se importa com o ie6, não é?), navegadores, formas de anti-aliased e cross-browsers, não importa, definiu um valor ele terá este mesmo valor para todo e qualquer computador.

Devido à natureza dos valores de pixel, não há cascata. Se um elemento pai tem um pixel tamanho 18px e a filha 16px, a filha será 16px. No entanto, as configurações de fonte de dimensionamento pode ser usado em combinação com a keyword. Por exemplo, se o pai foi definido para 16px e a filha foi criada a larger, a filha realmente sair maior do que o pai.


EM


Unidades de valores EM são as mais complicadas de se trabalhar. Ela é abstrata e arbitária. Aqui tem um exemplo, 1em é igual ao tamanho atual da fonte do elemento em questão, ou seja, se você ainda não definiu tamanho de fonte em lugar algum na página, então ele vai automaticamente pegar o tamanho de fonte padrão do browser, que provavelmente é 16px. Então, define-se que por padrão 1em = 16px. Digamos que você defina na tag body { font-size:20px } então o 1em passará a ser 20px. Assim que ele funciona.

Outro exemplo: Se você criar uma tag h1 { font-size: 2em; }, o tamanho do H1 em px vai ser 32px caso você não tenha definido algum valor ainda no css.
Uma dica é você definir que o tamanho da fonte padrão é 10px, assim você pode usar font-size: 1.8em para definir o tamanho de 18px.



Porcentagem (%)


Porcentagem assim como o nome diz trabalha com percentual de valor. Se um pai tiver o tamanho de 20px, e você definir o filho com font-size:50% ele terá o tamanho de 10px.

O porcentual é muito bom para trabalhar com as ferramentas de crescer e decrescer o tamanho na página do texto. Você vê isto em vários locais na internet, como na imagem abaixo.



PT


A unidade de medida PT, a última que veremos aqui, é definida pelo tamanho da fonte em valores de ponto. Um ponto é uma unidade de medida utilizada para a vida real, no papel de tinta a tipografia padrão usa 72pts que é igual a 1 polegada.
O PT deve ser usado em valores para impressão de CSS, quando você quer imprimir o texto e não usar para mostrar na tela.

Assim como você define o px exatamente o tamanho de pixels na tela, o PT funciona da mesma forma no papel.

Uma boa razão e motivo para não usar PT na tela, é que o resultado nos browsers são muito diferentes, conforme imagem abaixo:


Espero que tenham gostado.

Texto traduzido de: CSS-TRICKS