CSS Font-size: px, em, %, pt ou keyword?
Quando se trata de definir tipos de tamanhos de textos em CSS há uma grande variedade de tipos. Você pode definir uma keyword. 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...
em 11/04/2012 00:00
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:
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.
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.
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 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.
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: