Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Tárcio Zemel

Folhas de Estilo Web Dicas & truques CSS

Veja, também, o Índice com todas as dicas.

Nesta página:

em, px, pt, cm, in…

CSS oferece um número de unidades diferentes para a expressão de comprimento. Algumas têm sua história em tipografia, como o ponto (pt) e a paica (pc), outros são conhecidos devido a seu uso diário, como centímetro (cm) e polegada (in). E há, também, uma unidade "mágica" que foi inventada especificamente para CSS: px. Isso significa que diferentes propriedades precisam de diferente unidades?

Não, as unidades não têm nada a ver com as propriedades, mas têm tudo a ver com a mídia de saída: tela ou papel.

Não há qualquer restrição sobre quais unidades podem ser usada em qual lugar. Se uma propriedade aceita um valor em px ('margin: 5px') ela também aceita o valor em polegadas ou centímetros ('margin: 1.2in; margin: 0.5cm') e vice-versa.

Mas, em geral, você deve usar um conjunto diferente de unidades para exibição em tela do que para a impressão em papel. A tabela abaixo apresenta o uso recomendado:

Recomendado Uso ocasional Não recomendado
Tela em, px, % ex pt, cm, mm, in, pc
Impresso em, cm, mm, in, pt, pc, % px, ex

A relação entre as unidades absolutas é: 1in = 2,54cm = 25,4mm = 72pt = 6pc

Se você tiver uma régua pode checar o quão preciso seu dispositivo é: aqui está uma caixa com altura de 1in (2,54cm) ↑
72pt
↓

As assim chamadas medidas absolutas (cm, mm, in, pt e pc) significam o mesmo em CSS como em qualquer lugar. Uma medida expressa em qualquer uma dessas aparecerá exatamente do tamanho que é (dentro da precisão do hardware e do software). Elas não são recomendadas para uso em tela porque tamanhos de tela variam muito. Uma tela grande pode ter 60cm (24in); uma pequena e portátil, talvez apenas 8cm. E você não olha pra elas a partir da mesma distância.

As unidades em e ex dependem da fonte e podem ser diferentes para cada elemento no documento. em é, simplesmente, o tamanho da fonte. Em um elemento com a fonte de 2in, 1em será, portanto, 2in. Empressando tamanhos, como margins e paddings, com em significa que eles são relativos ao tamanho da fonte e se o usuário tem uma fonte grande (ex. uma tela grande) ou uma fonte pequena (ex. dispositivo handheld) , os tamanhos serão proporcionais. Declarações como 'text-indent: 1.5em' e 'margin: 1em' são extremamente comuns em CSS.

A unidade ex é raramente usada. Seu propósito é expressar tamanhos relacionados à "altura do x" de uma fonte. A altura do x é, grosso modo, a altura de letras em mínusculo como a, c, m, ou o. Fontes que têm o mesmo tamanho (e, portanto, o mesmo em) podem variar muito o tamanho de suas letras em minúsculo, e, quando é importante que alguma imagem, por exemplo, se iguale à altura do x, a unidade ex está disponível.

A unidade px é a unidade mágica das CSS. Ela não é relacionada ao tamanho da fonte atual nem a unidades absolutas. A unidade px é definida para ser pequena, mas visível, e tal como uma linha de 1px de largura, pode ser apresentada com "serrilhamento" (sem anti-aliasing). O quão nítida, pequena e visível será, depende do dispositivo e da maneira como ele está sendo usado: você o está segurando perto de seus olhos, como em um celular, no comprimento dos braços, como num monitor de computador ou alguma coisa entre um e outro, como se fosse um livro? O px, portanto, não é definido como uma medida constante, mas algo que depende do tipo de dispositivo e o uso típico deste.

Para ter uma idéia da aparência do de um px, imagine um monitor CRT de 1990: o menor ponto nele consegue exibir medidas de 1/100 de polegada (0,25mm) ou um pouco mais. A unidade px tem esse nome em função dos pixels da tela.

Atualmente, existem dispositivos que podem, a princípio, exibir pontos menores (embora você possa precisar de uma lupa para vê-los). Mas documentos do século passado que usaram px em CSS continuam sendo exibidos da mesma forma, não importando o dispositivo. Impressoras, especialmente, conseguem mostrar linhas com muito mais detalhes que 1px, mas, até nas impressoras, uma linha de 1px parece muito com como sua exibição ficaria em um monitor de computador. Dispositivos mudam, mas o px tem sempre a mesma aparência.

CSS também define que imagens rasterizadas (como fotos) são, por padrão, exibidas com um mapeamento de pixels de 1px. Assim, uma foto de resolução 600 por 400 será 600px comprida e 400px alta. Os pixels na foto, portanto, não mapeiam os pixels do dispositivo de exibição (que pode ser bem pequeno), mas mapeia para unidades em px. Isso torna possível fazer alinhamentos precisos de imagens com outros elementos do documento, desde que você use unidades em px em sua folha de estilos ao invés de pt, cm, etc.

Use em ou px para tamanhos de fonte

CSS herdou as unidades pt (ponto) e pc (paica) da tipografia. Impressoras têm, tradicionalmente, usado essas e unidades similares, com preferência a cm ou in. Em CSS, não há razão para usar pt, use qualquer outra unidade que preferir. Mas existe uma boa razão para não usar nem pt nem outra unidade absoluta e usar somente em e px.

Aqui estão algumas linhas com diferentes espessuras. Algumas ou todas elas podem ser nítidas, mas, pelo menos as linhas de 1px e 2px devem ser nítidas e visíveis:

0,5pt, 1px, 1pt, 1,5px, 2px

Se as quatro primeiras linhas parecerem todas iguais (ou se a linha de 0,5pt estiver faltando), provavelmente você está olhando para um monitor de computador que não consegue exibir pontos menores do que 1px. Se as linhas parecem aumentar de espessura, provavelmente você está olhando para esta página em uma tela de computador de alta qualidade ou papel. E se a de 1pt parece mais espessa que a de 1,5px, você, provavelmente, tem a tela de um dispositivo móvel.

A unidade mágica de CSS, o px, frequentemente é uma boa unidade para se usar, especialmente se o estilo requer alinhamento do texto com imagens ou, simplesmente, porque tudo o que tem 1px ou é múltiplo de 1px de largura é garantido de parecer nítido.

Mas, para tamanhos de fonte, é ainda melhor usar em. A ideia é (1) não especificar o tamanho de fonte do elemento BODY (em HTML), mas usar o tamanho padrão do dispositivo porque esse é um tamanho que o leitor consegue ler confortavelmente; e (2) expressar o tamanho da fonte de outros elementos em em: 'H1 {font-size: 2.5em}' para fazer o H1 2½ vezes maior que o normal.

O único lugar que você pode usar pt (ou cm ou in) para especificar o tamanho da fonte é em folhas de estilo para impressão, se você precisar ter certeza de que a fonte impressa será, exatamente, de um certo tamanho. Mas, mesmo assim, usar o tamanho de fonte padrão é, geralmente, melhor.

Mais unidades em CSS no futuro

Para tornar ainda mais fácil de fazer as regras de estilo que dependem somente do tamanho de fonte padrão, uma nova unidade está em desenvolvimento: a rem. A rem ("root em") é o tamanho de fonte do elemento-raiz do documento. Diferentemente do em, que pode ser diferente para cada elemento, o rem é constante em todo o documento.

Outras unidades em desenvolvimento permitem especificar tamanhos relativos à janela do leitor. São a vw e vh. A vw é 1/100 da largura da janela e vh é 1/100 da altura da janela.

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2021 W3C® Privacy policy

Criado em 12 de janeiro de 2010;
Última atualização qua 06 jan 2021 05:40:49 UTC

Idiomas

Sobre traduções